VIP shopper UX/UI design

VIP shopper - E-commerce app and responsive website for blind people

Role: UX researcher, UX/UI designer and interaction designer

Duration: Jan - Feb 2023 (6 weeks)

Project: The VIP shopper app and responsive website is targeted towards visually impaired people. It is an online shopping cross platform designed for visually impaired people. From the user experience to the interface is completely designed keep the spectrum of blindness in mind.

The Problem:

According to the World Health Organization (WHO), approximately 2.2 billion people worldwide have a visual impairment, which can range from mild to severe. There are very few e-commerce websites or apps that are designed with visual accessibility in mind.

Project Vision:

The goal is to empathise with visually impaired users, and to understand their problems and pain-points. And through that understanding, create an easy to use and accessible online shopping platform for visually impaired people. And in the end, create an universal product.

User research summary:

Background:
I conducted a user research study to understand the experience of visually impaired individuals when using digital interfaces. I aimed to identify pain points, usability issues, and best practices for designing accessible and user-friendly interfaces for this population.

Methodology:
I conducted a series of in-depth interviews with 2 visually impaired individuals, one with near sightedness of 20/100 visual acuity and the other with complete blindness. We asked participants to perform a series of tasks on a variety of websites and mobile applications, while we observed their interactions and asked follow-up questions. This was my primary research method.
I also did research on different types of blindness, along with usage of technology and input methods of visually impaired on web as secondary research.

User Personas:

Google UX Design Certificate - Persona [Ecommerce for VIP] (2).png

Google UX Design Certificate - Persona [Ecommerce for VIP].png

Ideation and Initial testing

I conducted two rounds of usability study to find out pain points of users from the low-fidelity prototypes. The study included 2 participants. Here are some of the findings:

Round 1 findings:

Both users found it difficult to navigate around the main products. As the fixed navigation bar at bottom and search bar at top took lot of space.
Voice input and output is necessary for the users in order to complete any task in the prototype.
Users found that there was no option to zoom in to read any text or buttons which made it difficult to complete any task.

I started the ideation process with crazy 8s and came up with eight essential ideas that makes the design accessible to most of the visual impaired people.

Blindness is a spectrum and there are many kinds of visual impairments so my goal with this exercise was to come up with ideas covering as many types of blindness as possible.

Responsive High Fidelity Prototype - Mobile app

According to user feedback, implemented audio input and output in the interface. And gave clear and defined space for main content. Along with creating no obstructions for scrolling by removing bottom navigation bar.

Hi-fi Prototype

Interaction flows

Touch Interactions

Speech Interactions

Responsive High Fidelity Prototype - Tablet app

The navigation bar is extended to reveal the menu options on larger touch displays like tablets. Still all the touch and drag interactions are present same as mobile version. As the tablets are mostly used in landscape orientation, the voice assistant on product page is moved to search bar unlike the mobile version.

Responsive High Fidelity Prototype - Desktop website

Braille input devices/ Keyboard preview:

For desktop or larger screen devices, I designed a keyboard/ braille input device navigation along with audio-visual feedback. This helps visually impaired to easily navigate the website without the use of mouse. And for users with low vision, the default UI is magnified with larger, and high contrast elements.

Hi-fi Prototype

Accessibility Considerations

Audio and Visual feedback

Both visual and audio feedback/response added throughout in all interactions. So users with visual impairment can understand their input and the output better.

Motion

The option of removal of motion throughout the UI is added. So users with motion blindness can easily use the platform.

Visual Accessibility

All the non-interactive texts and interactive elements have bigger sizes, so readability can be increased and the touch/click error can be reduced. The option to magnify texts and other elements is also provided. Local language support is also provided.

Learnings and Takeaways

I learned a lot from this project. From the primary and secondary research, I learned about the spectrum of blindness and usage of technology by visually impaired.

My UX-UI design journey has also taught me a lot about considerations and pain-points of visually impaired users.

I am eager to learn more about accessibility as there is still much more to discover.

This e-commerce project designed for visually impaired users can have a significant impact on their online shopping experience. Through thoughtful UX design considerations, such as clear and concise descriptions, easy navigation, and inclusive design features, the project can improve accessibility, usability, and overall satisfaction for visually impaired users. This can ultimately lead to increased sales, customer loyalty, and positive brand reputation.

Next Steps

Firstly, I would like to conduct usability study with a larger sample size of visually impaired users which can guide my UX design even better.

Next, there are certain inconsistencies in mobile app and responsive website. So I want to improve the overall design to be more cohesive and inclusive.

Lastly, I want to design a better system for visually impaired which can better integrate the braille devices and input methods.