Blindary — Enabling Autonomous Shopping for Visually Impaired People

Global Awareness Accessibility Day

“GAAD is an awareness day focusing on digital access and inclusion for the more than one billion people with disabilities and impairments.” — Source: Wikipedia

Our team consisted of two designers and two web developers who fortunately assumed their natural roles quite nicely. We felt as we could be a dream team.

❓ PROBLEM FRAMING

For this challenge, the team decided to think specifically about those who are visually impaired. From there, we started discussing and brainstorming about several scenarios in which a person who presents such issues faces challenges which aren’t felt by others: doing groceries, buying clothes, dating, shopping, ordering food both online and restaurants, etc.

  • How ready are supermarkets to respond to such needs?
  • How do these individuals do their shopping: food, online, clothing?
  • How well can retailers communicate with visually impaired individuals?

🔍 RESEARCH INSIGHTS

Affinity Map with the main insights from research.
  • Dependency: individuals with visual impairments rely a lot of friends and family to help them making choices, specially when it comes to clothing;
  • Poor Communication: several retailers (if not the whole majority) lack communication channels such as including brail in the tags of products;
  • Requires Effort: it requires a certain logistical effort to be able to go do shopping such as calling upfront, guaranteeing someone is able to assist the blind shopper
  • Scary Experience: supermarkets can be overwhelming due to their magnitude and big variety of products from different brands;
  • Inadequate Web Design: so many websites aren’t designed for screen readers, a tool that helps these individuals to read their computer screens.

“I’ve never done shopping on my own, it was very satisfying being able to do so. Mission accomplished!” — Anderson Silva Fonseca, 33, Blind

From these findings, we identified a design opportunity that was based on the autonomy of visually impaired people when making purchases. Therefore, we finally reached our How Might We question:

🤓 PERSONA DESIGN

With the research in mind, we were able to come with Gabriel. For Gabriel, independence is extremely important as he always felt that his disability shouldn’t stop him from achieving anything in life. However, he can’t help it but to feel the shortcomings of being blind when shopping. For someone with such a strong personality as Gabriel, it is really frustrating that he can’t take case of these things alone.

Gabriel, our designed persona for the project

💭 BRAINSTORMING

Upon defining our How Might We Question, we proceeded to the Brainstorming phase. This is where the team went as broad as possible in imagining solutions that would help visually impaired people to become more autonomous consumers. At this phase, our goal was to be disruptive, innovative and potentially create a new business model or service, much like a start-up.

Our Brainstorming Canvas

✏️ CONCEPT DEVELOPMENT

Having gone through research and coming up with different ideas on how to solve the problem that we brought to this hackaton, we managed to create a concept that seeks to provide visually impaired people with more autonomy when doing any kind of shopping. The answer to it is Blindary with its slogan Experience Full Shopping Independence. So, how does it work really?

The Blindary Concept

ℹ️ SITE MAPPING & USER FLOW

Now that the concept was in place, we could move on to setting up the digital solution, in this case, in the form of a website. For that, we had to look into the architecture of information as well as defining a user flow.

  • List Your Shop: this is aimed at stores that want to register themselves within the website in order to become available. This is where they provide with all their data regarding products and other relevant information
  • Start Shopping: the main purpose of the app, this is where users can start navigating through the different types of shops they have in reach, find information about them and their products
  • Shopping Cart: for users to see the products they have chosen and are willing to buy
  • My Profile: basic profile section with information about the user
Simple Site Map for Blindary’s first version
Gabriel’s Defined Flow using Blindary

🚧 LOW FIDELITY PROTOTYPING

With the sitemap and the user journey, we proceeded to create the first sketches of Blindary’s Website. The goal was to have as little information as possible and little text.

The Low Fidelity Version of Blindary’s Website

♿ ACCESSABILITY

This was probably the most enlightening and fun part of the whole process. For the first time during our bootcamp, we really had to put more thought into every people, to be as inclusive as possible.

Colour Choice

Different Types of Colour Blindness (Source: https://enchroma.com/blogs/beyond-color/how-color-blind-see)

Information Display

Header of Blindary’s website, with information about where Gabriel is at a certain moment
  • Gabriel will always know which part of the website he is navigating in.
  • Gabriel can easily identify pieces of text and read the images (attribute appropriate labels when producing the HTML and CSS)
  • He will only have the essential information displayed in his screen.

Voice Search

Also, we wanted to give Gabriel the chance to search for whatever products he needs using his voice, a feature that was added to the his shopping experience.

Displaying a screen with the voice search command

💻 FINAL RESULTS | HACKATON DELIVERABLE

Below, you can find the deliverable for the hackaton. Again, in 8 hours we had quite a lot to cover and we’re happy that we were able to come up with the concept of Blindary.

The hackaton deliverable

🚶‍♂️ NEXT STEPS

Upon working on Blindary during 8 hours, there are some logical next steps that we’d like to take.

  • Business Model Validation: A fair critique that Blindary received in the hackaton was its business model. Something that we mentioned previously in the concept was that any store could add themselves to show up in the platform. Next step is obviously to validate and investigate more what added value could these stores get. Perhps CSR? Good Brand Marketing? We’ll have to find out.
  • Interviews: Also, we did not have time to interview any visually impaired individual. Thus, a logical next step would be to validate some of the problems and dig even deeper
  • Design: The design can as well be improved. At this stage, the font is still slightly big and what we need to test is the right size for Blindary’s users. Also, we want to make sure that the colours make sense and if the voice command is something that would be using

🔑 KEY TAKEAWAYS

Although stressful, I found the hackaton such an enriching experience. Being able to work with web developers who have another way of working and vocabulary made me realise that there are some barriers that both sides need to face normally.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafael Martins

I’m a UX/UI Designer with 2+ years of experience in design thinking practices by conceptualising and crafting innovative services