arrow pointing back Back to the home page

Improving physical grocery shopping for visually impaired

About the project

The group of four interaction design students was going to find a solution on how to improve the physical shopping experience for people with reduced vision. Service design was the biggest part of this project.

Exploration/discovery

Picture of a Double Diamond that show the whole semester, methods and the flow

Our process and methods throughout the semester .

The project started off with a service safari that lets designers walk a mile in a user's shoes. Every group member tried on glasses that made adjustments to their sight. Some group members wore glasses simulating color vision deficiency while others simulated generally bad vision or tunnel vision. Service safari had a huge impact on our understanding of the user, and many of the problems the group members faced during the service safari were later confirmed during in-depth interviews with a user. The group made a research wall and sorted it using affinity mapping, which gave an overview of main categories and a common understanding of the insights. Personas and empathy maps were made using post-it notes from the research wall. The group created the journey map based on interviews and service safari that highlighted the biggest challenges.

Service safari. Picture collage. First picture show a girl holding bananas and trying to see the groceries. Second is a girl holding spice mix close, to see what is written on it. Third picure, digital pricetags. Last one, girl holding a cheese and looking for some other groceries

Service safari. I wore glasses borrowed from school, which simulated color vision deficiency. Other team members were creative in simulating tunnel vision or blurry vision.

The big struggle of the user was that they often needed assistance and did not want to cause inconvenience. Some do grocery shopping through Oda.no but the social aspect of physical shopping is still very important. Something that came through the interview was how some people take grocery shopping for granted. For many people grocery shopping is a big social aspect of their life, they can stumble on people they know and have a short talk. But otherwise a feeling of just shopping among other people is important to many.

 Picture with quotes from the interviewees. Det er ikke spesielt mye som er tatt hensyn til egentlig, synes jeg. ..elektroniske prislappene ogsånt helt umulige å se. Jeg ga opp å prøve å se prisen på dem da, når jeg ikke hadde på briller eller linser. ja assa enten jeg bruker forsørrelse eller så bruker jeg tale. Voiceover så jeg skal slippe å anstrenge meg så mye. Det er ikke akkurat alltid lett å finne dem. Det er jo det sosiale som er viktig med butikken for meg- Det er greit å få beskjed om prisen, og det ville en vanlig person ha sjekka, sjekker som regel prisen. Noe jeg ikke får gjort.
            ..litt problemer når jeg kommer til krydderavdelingen.Fordi med en gang når jeg må begynne å lete så er det liksom .. stressmoment. .elektroniske prislappene ogsånt helt umulige å se. Jeg ga opp å prøve å se prisen på dem da, når jeg ikke hadde på briller eller linser.

Quotes from the interviews of the interviewees who had severely impaired vision.

To see the prices and ingredients of the products were the biggest challenges for the user. Most of the group members had the same problem during the service safari, because most of the prices are digital and lack good contrast, while ingredients overview have a very small text size. Because of that, users felt they could not take economic choices, let alone choose healthy alternatives. The last problem was lack of safety and predictability. The present feeling of unknown and uncertainty about how the shopping trip will end up.

Empathy map to our persona Julie.

Empathy map to our persona Julie.

The group chose to initiate crazy 8 to come up with several ideas, as well as co-creating workshops with other student groups. The group was left with a lot of ideas that needed sorting; the idea portofolio was therefore used for sorting and prioritizing. The ideas were narrowed down through the dot voting. The conclusion was that the most available device was a phone, and the interviews showed that a phone was used as a helping device in daily life for people with reduced vision. The group checked existing solutions at the app store, as well as going through the comments about the app. This was made so the group had a realistic understanding of what is technically possible to achieve.

Journey map that show how he user experiences the grocery shopping

This is journey map. Magnifying function is avalible on the desktop/laptop computer.

Design process

Testing of the prototype. Picture collage. First photo a girl is aiming to take a picture of the tea. Second is a man holding the phone close to the eyes. Third is showing how the group used Figma Mirror

Testing of the first iterative prototype that led to several changes.

The next step was parallel prototyping, where every group member designed its own solution, and then usertest it. This let several good ideas be discovered and merged together in one iterative prototype, that was then tested so the group could discover weaknesses. One of which was a light yellow color had a bad visibility, and was therefore replaced with a stronger orange color. The first prototype had a lot of intro steps that irritated the user more than it helped. Those extra steps were removed in the next iteration.The buttons on the bottom of the screen were problematic and the user forgot which one was “record sound” and which was “read aloud”. The solution was therefore to remove “read aloud” button and have a voice reading everything as a default. This would be optional and can be removed in the settings.

Mockup of a phone screens. Six pictures. They explain how to talk to the app and how to record sound, as well as compare function. The last two show how to pick a shop (Kiwi, rema1000 etc).

This is a selection of some slides from first iterative prototype. Usertest showed that there were too many steps in the beginning. The two buttons below were difficult not to confuse. The color was also too light and was therefore almost not visible.

Main button was recording sound, because the user pointed it out to be a very useful function. The whole app was going to be able to operate on sound. Every shop has headlines to navigate in the building, those are big and readable from a distance. If a user holds the camera up, the app would help the user with guidance by reading those headlines aloud. When the user approaches the product closer the app would start to read names of the products. By taking a picture of the product, the user could get information about the price and ingredients. But it doesn't stop there. Before going to the shop the user could make a shopping list in the app.

The shopping list works in two steps, first is getting the name of a desirable product for example “taco-seasoning”, then the user can add a specification like “gluten free” or “sugar free”. If the search doesn't find a sugar free alternative it will list those with less sugar highest up and alert the user. When inside the shop, the app will recognize the item, read it and give the user the directions. With voice command it can cross out the shopping list item, when the user got it. The whole system will be like an Alexa system that helps the user out. The settings at the start of the app will adjust the many functionalities the app has, so users with better vision could use the app more manually without voice command.

Service blurprint of how the solution works together

This is a service blueprint. Magnifying function is avalible on the desktop/laptop computer.

Final design

Image of the result The text that says The user wants to: Be more independent. Make healthier choices. Make economic choices. Have predictability. The solution helps the user to: Navigate the store independently.  Get the ingredients read aloud. Get the price information. Prepare for the shopping trip with assisting shopping list.
Image of the result

Learning

This subject introduced me to the service safari, and I was surprised at how good this method is to get an idea of what a user might feel. I borrowed glasses from NTNU that simulated color blindness, and it was a new experience for me. It teached me to always check how a colorblind person would see the solution. Many of the methods were new to me at that time and this project introduced me to some of them, and taught me how to use them on a regular basis.

I wish it was possible to include the user to the idea portofolio process as well as including the user into the co-creating workshop. However it was difficult to meet people during the pandemic and the group didn't want to strenuous the respondent we got through the Norwegian Association Of The Blind. They already were generous enough to spend their time having an interview with us, and it was not easy to talk about the struggles they go through.

Something that bothered me a lot after the delivery of the project was a “back” button in our solution that was placed very inconveniently. Phones have a back button on them, and it was only included so that Figma testing could be done.The placement of the elements could use more work. A menu is usually placed at the bottom of an app, not on top, but the “record sound” button needed a best available placement which was downstairs where the finger can reach easily. The placement of a menu under the “record sound” button was an idea, but the chances of accidentally pressing it was higher. If this happened during a shopping trip, the credibility of the app would be weakened.The menu was rarely used during the shopping trip, and that made it more appropriate to put it on top.

arrow pointing back Back to the home page arrow pointing up Back to top of page