@anatinge

PROBLEM

Byte manufactures connected fridges, stocks them with the food and places them in offices and public spaces all over the Bay Area. They were planning a major update of their software and hardware platforms and together with that wanted to improve customer experience across several touch points – fridge, tablet POS, receipt, feedback form and the website.

SOLUTION

The new tablet interface that I designed provided flexibility in facilitating sales of the last items before they spoil, engaged consumers in dynamic pricing (surge pricing) and simplified the user experience of food discovery and checkout.

MY ROLE

• Research & UX/UI Design. I conducted qualitative research studies, worked on the new informational architecture for the application and navigation system, prototyped and tested ideas, and designed pixel perfect mobile app UI’s, email templates and the website.

•  Visual Design. Defining visual style, aligning app design with the brand guidelines.

Re-Design goals

Working closely with stakeholders we identified several problems with the existing UX/UI and, taking into account the nearest business plans, agreed on three main goals for the re-design.

Prototyping

My first step was to explore various navigation and data organization concepts and prototype them to get early feedback from the stakeholders (founders, engineers, product managers). 

Prototypes helped to incorporate stakeholders' perspectives into the design decisions at the early phases of the design process, efficiently communicate tradeoffs and gain consensus as a group.

Home screen variations

Menu and navigation variations

I had multiple discussions with the founders as well as the engineering team to define the informational architecture and navigation system that will give the product maximum flexibility in different scenarios, like when the fridge is almost empty or it sells only one food category (such as drinks) or we want to promote a certain food category or we don't have active promotions at all, etc.

In the results of such collaborative work we identified UI that we believed met the re-design goals and my next step was to turn it into polished visual mockups.

UI and informational architecture that meet design goals

Visual design

Talking to users, I realized that, when people choose what to eat, they mainly decide according to what they see. So yummy food photos should stand out and UI should support and deliver the content as subtly and efficiently as possible, while fading into the background. Main colors and typography for Byte were already defined in the brand book and I had to incorporate its recommendations into app UI.

Together with that, the app should clearly build a connection with Byte’s brand but without overpowering the content.

usability study

I spent much time intercepting customers near the fridges and asking their feedback about the new application, at first just showing the paper design prototype and later, during the beta launch, using the real app.

I observed how new and returning users interact with the fridge naturally, without interruptions, then followed up with the questions depending on what I saw. 

I wanted to get a sense of what people thought about the new app and discover any issues that might block them from finding what they want. The main focus was making sure that the new app UX/UI meets the goals of the re-design.

Takeaways

I know that reading long usability reports is boring and it’s sometimes hard to draw stakeholders’ attention to them. So I decided to experiment with the format and sketched the results of the usability study together with the suggestions on how to address some of the UX issues.

Improvements based on what we learned

At the early stages of the design the usability study allowed me to improve the language of the app and make sure that the app interface is understandable and intuitive. For example, based on the results of tests we changed the layout of the product details page, moving the ingredients block above the description, and we addressed the multi-select ambiguity on the filter screen by changing the screen title from "What is your perfect meal?"  to "Any dietary preferences?".

During the beta launch the usability study allowed us to find more critical issues in the user experience so that we were able to improve it before the public release.

• For example, I found out that customers believed that the tablet displays a general menu that is not related to the fridge’s actual content at all. To address this I suggested adding a label to each product that says how many items are left; this will help customers to understand that the app shows only what is inside the fridge.

• Another important issue that I found was that people treat a fridge as a vending machine and expect it to work the same way. So they somehow are trying to check out selected products once they know what they want, thinking that they can just open a fridge and grab what they want. To address this I suggested adding an infographic that explains how to check out on the product details page.

• The old application wasn't optimized for food discovery so customers used to ignore it and one of the repeated behaviors that I observed was that they were trying to see the prices or read ingredients through the fridge door. They didn't realize that the digital menu existed. To fix that I suggested putting signs directly on the glass door.

While these signs are blocking the view of the food inside the fridge, it helps customers to find the menu and possibly have a better experience in finding what they want through the menu than by looking through the glass door. I believe that this assumption is worth checking.

The first two improvements were implemented before the public launch. The problems with the digital menu discovery we decided to address via follow-up email communication with the user.