Blindary — Enabling Autonomous Shopping for Visually Impaired People
Global Awareness Accessibility Day
Timeline: 8 Hours| Role: UX Designer | Event: Hackaton
Under the light of our Ironhack Bootcamp, one of the most enlightening experiences we’ve had thus far was the participation in a Hackaton. Throughout the programme, we UX/UI Designers have only interacted with other fellow UX/UI Designers, making the flow of our projects more or less smooth. This time, however, we were put in a more realistic context as Designers and Web Developers teamed up in an effort of creating innovative solutions under the umbrella of the Global Accessibility Awareness Day (GAAD).
During this hackaton, which lasted 8 hours, our goal was to come up with an innovative concept that would improve the access of more than one billion people with disabilities to digital solutions and the use of internet, overall.
“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.
- António Puppe | Back-end Developer
- Cristiane Koshino | Front-end Developer
- Frederico Dias | UI Designer
- Rafael Martins | UX Researcher
❓ 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.
From the discussions we’ve had, it was apparent that our common interest was in the way these individuals purchase goods, hence, we further put our focus on the topic. The research was around the questions below and the findings were placed in a Affinity Map.
- 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
Due to the nature of the hackaton, we had little time devoted to do research. This means that conducting interviews or creating any kind of online questionnaire was out of question for this 8 hour sprint. Thus, we focused mainly on our desktop research. Our main findings can be found below:
- 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.
Moreover, we were able to identify several initiatives that sought to help visually impaired individuals to become more autonomous when doing their shopping. For example, in 2017, an organisation in Brazil helped several people to mentally recognise and then proceed to individual shopping (Source: Acidadeon).
“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.
💭 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.
We started with the classing approach of throwing an idea to the pile; no “but”, always “and”. When we were stuck or felt that our ideas were not too innovative, we then applied reserve engineering, as in, thinking what other possible ways would totally not help them become autonomous — Just a popular technique to unleash creativity.
Our solutions varied greatly from physical products to digital services. With the help of the web developers and taking into account that we had to produce a digital deliverable, there were several ideas that we had to leave behind because their either required quite a lot of technology (such as artificial intelligence) or fell off the scope of increasing the accessibility to digital solutions.
✏️ 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 goal of Blindary is that blind consumers can feel comfortable and fully independent to go to a store by themselves. Surely, online shopping exists and it is extremely convenient to anybody, but nothing yet replaces the feeling of experiencing a service or product in real person.
Thus, Blindary is an information platform that shows the stores and shops which not only are ready to welcome visually impaired consumers — easy access, tags with braille, etc. — but also provides them with information about the products they’d like to buy — brand, location, price, etc.
ℹ️ 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.
So first, we designed a very simple website structure, which are described below:
- 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
With this information architecture set up, we then put our thought into what Gabriel would be doing when finding our website. Thus, we defined the following user journey in which Gabriel wants to go to a supermarket near him and buy some vegetables and fruits.
🚧 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.
♿ 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.
If we’re creating a website specially aimed at those who are visually impaired, then logically, we put more thought into our typography, colours, information display, etc. The work that we put in accessibility was then converted and adapted from the low fidelity version to the high fidelity.
Colour Choice
When it came to colours, we wanted to make sure that everyone would distinguish the colours that we’d be using. We had to investigate which types of colour blindness exist and what the least friendly colours are for this type of individuals.
Hence, our colour choice fell on a combination of high contrast and that could be always easily distinguishable. The colours that went with were light green and light blue, purple as the main (and strongest colour) and a strong green to contrast with it.
Information Display
Regarding the display of information, we wanted to make sure of two things:
- 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.
For the first point, what we aimed to do was to put information about the specific page of the website Gabriel was in at a given moment. This was made considering that he will be able to read it with a Screen Reader
You are in List of Store’s Categories > Supermarket > Supermarket da Lapa
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.
💻 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.
For this stage, we wanted to focus on the flow that Gabriel was going to experience through the website of Blindary as well as giving a feel of information is displayed to him.
Not only that, but Web Developers also had a chance to work on the code behind the website that us UX/UI Designers came up with. Without getting too much in detail, it was also the first experience that we’ve had with Zeplin.
In a nutshell, upon designing the website, we were able to generate the CSS code that we passed on to the web developers who could then start implementing the design that we had agreed on. We were not able to go too far unfortunately, but an experience nonetheless.
Blindary’s Website Under Construction: https://blindary.herokuapp.com/
🚶♂️ 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.
Despite that, the team blended so well. Due to the short nature of the hackaton, I had the impression that us UX/UI Designers had an “advantage” since we dominate the Design Thinking methodology. Nonetheless, both António and Cristiane were open to learn more about it and, without their mindset and help, we would have not been able to come up with Blindary.
Thanks for reading :-)
