Byvanta —Quick UX / #Ally Redesign

Welcome to Byvanta. A proposed e-commerce platform for small and medium sized businesses to scale and reach more customers, worldwide.

The screen grab below was the initial design for the landing screen, simple and straight to the point. However, the simplicity lacked identity in terms of visual cues and overall appeal, which in the long term won’t serve the business. So, I decided to revamp the design with the 10 Principles for Good Design by Dieter Rams and Inclusion in mind.

Problem: oversimplified landing page, no visual identity. What is Byvanta? Potential users weren’t sold on the landing page as they didn’t know what Byvanta was selling or trying to sell.

Screen grab of Byvanta’s initial home page — Initial home page

Changes made:

No carousels: initially, as most ecommerce sites, the plan was to have a main call to action aka a carousel but accessibility research and usability test results have shown that carousels pose several accessibility issues for users, especially those with assistive technologies. The biggest problem being Perceiving, a lot of assistive tech users are unable to perceive the carousel itself or distinguish between carousel elements, and this is usually because of the way carousels are implemented i.e. no pause or stop buttons etc. To avoid any accessibility issues with carousels thus disabling users from using parts of the site, I opted for linked images and buttons that all users can perceive, distinguish from one another and navigate to the intended pages.
Good design makes a product understandable: drawing insight from Dieter Rams’ #4 principle of good design, it made sense to have the different departments as call to actions with images to add context to what the link will do. The intent was to create a design that can clarify the product’s structure in a self-explanatory way. This also tied in with #6 of the good design principles which states that ‘Good design in unobtrusive’ — which in essence means removing the clutter and allowing the user explore the page until they find what they want and the designs being simplistic in its structure, creates space for this.
Colours: It was important to use minimal and accessibility colours like black/white in this case #FBFBFB was used as the background. I have found that this colour scheme has the most contrast as most users can distinguish between the two colours and is not a problem for users with colour blindness.
Navigation: Usability and accessibility research has shown that most users, especially screen reader or users with sight impairment struggle to recognise when an interactive element has an active focus i.e. when it is hovered over or clicked on, some users get lost at this point, so it was important to make the focus visibility of active links distinguishable, by using a solid underline to indicate focus. As this is an issue that falls under WCAG’s Focus Visible criteria, it was vital to solve this issue and build a design system around it to avoid further issues when the project is at a larger scale.

Holistic Living is the active link in focus as indicated by the underline

Alternative text copies/considerations: having worked across several multinational teams, one of the common accessibility failure is insufficient or no alternative text in images that are perceived by screen readers and when images don’t have alt texts, screen readers like JAWS for example, tend to read out the image url/source code to the users, which leads to a bad experience for the user because the information is gibberish and means nothing but there’s no way for the user to know this unless they’re a seasoned screen reader user and can navigate around the image. So, it was important to create alt text copies for images that will be used across the site. This basically reduces the amount of WCAG failures further than the line by creating a copy that will be consistent and ready for the designer/developer to include when the website is being implemented.