Helping keep Salt Lake citizens safe from food-borne illness — a UX case study
The Challenge:
All age groups can be infected with Salmonella, but young children, the elderly, and those with compromised immune systems are the most severely affected.
The Salt Lake County Health Department currently doesn’t publish health code scores on the window sills of restaurants like other cities do. Officials said it’s because those scores can be misleading.
I along with two other designers and a team of 3 iOS developers were tasked in creating a Native iOS application capable of displaying these health codes quickly and easily to the citizens of Salt Lake County.
Meet the team:
My Role:
User Research — Independently, our team conducted one-on-one interviews with several local citizens. Collaboratively, We created and distributed surveys to various online platforms.
User Story Mapping — Collaboratively, we built out our User Story Map using our user’s goals, narratives, and tasks.
Wireframing — 10x10 sketching our platform screens and developing mid-fidelity wireframes using Sketch.
Prototyping (Invision, Principle) — We created a prototype of our platform using Sketch wireframes plugged into Invision. Later, developing a more refined prototype in Principle.
User Testing — As a team, we created user tasks and conducted user testing via our developer coded “test flight” version of the app.
The Process:
- Empathize — To gain an empathetic understanding of the problem that we are trying to solve.
- Define — Using information gathered, define the core problems encountered.
- Ideate — Begin to design solutions to the core problems being faced.
- Prototype — To identify the best possible solution for each of the problems identified during the first three stages.
- Test — Used to inform the understanding of the users, the conditions of use, how people think, behave, and feel.
Audience:
Dine Rite gives restaurant goers a quick and convenient way to view information, health scores, and reviews while dining out.
Our audience for Dine Rite is anyone who cares about their health and safety while visiting restaurants and eateries within Salt Lake City. People who are frustrated with having to locate health score ratings on various walls and windows of individual establishments, or dealing with no scores being present at all. People who are interested in helping others stay safe while dining out in Salt Lake City.
Creative Brief:
During a collaborative meeting with our Development team, we formed a Creative Brief to define the problem we were trying to solve.
The Problem:
Salt Lake citizens need an efficient way to check the health and safety of public restaurants & places.
Establishing our audience:
Health conscious individuals in Salt Lake City, general restaurant goers, and people who care about their safety.
Discussing any foreseeable challenges:
Where is the data coming from and is it public? Can users report things they have seen/encountered? How are the health scores graded? What are the parameters? Do citizens of SLC even care about the health codes?
Finally, we discussed our assumptions about health ratings.
Assumptions:
The entire team got together and came up with many assumptions based on the health code scoring.
- Users don’t know what determines a health score rating.
- Many of the ratings are out of date.
- Users want a way to comment on, or submit their own feedback to a health score rating.
- There is some corruption within the grading system.
- There is no such thing as a 100% clean restaurant.
User Research:
Once we documented our assumptions, it was time to reach out to our audience. The team and I conducted several one-on-one interviews with citizens in and around downtown Salt Lake City. We also compiled a short online survey that we distributed out to various online platforms including a very large “Salt Lake City” subReddit resulting in 126 user insights.
Through this research, we found that many people simply wanted a way to cross reference health codes with more established websites like Google, Yelp, or TripAdvisor. They did care about the health code ratings, but social validation was the largest factor in their dining choices
Persona:
Using research data from our street interviews and online survey we began to establish a Persona. Our User Persona “Sadie Clark” was important in helping us to dive into the mind of our users. This allowed us to empathize with our users and their true goals.
Sadie’s Goals:
- I want to be healthy and stay safe
- I’d like the ability to easily make good food decisions
- I’m interested in helping others make healthy food choices
Once we had a clear picture of who we were designing for it was time to begin designing the flow of how “Sadie” would use our health code app.
User Story Mapping:
Once the design team and I established our persona, we moved on to our User Story Map. Through the use of post-it notes, we determined the main goals of the user. We then broke those goals down into narratives and user tasks.
After we established how the user would search and find a restaurant, a restaurant profile started to take shape. This restaurant profile would allow the user to view details about the chosen eatery as well as contact them via phone, email, or website.
The original flow directed our users through a login view where they could connect Facebook or Google accounts for submitting their own reviews or sharing health information.
After some discussion and refinement, the team and I decided on an appropriate user flow to begin creating our Minimum Viable Product.
Wireframing:
After completion of the User Story Map and Flow, our design team was ready to start the ideation process on how our app would look. Beginning with pen and paper using 10x10 rough sketching, we created individual versions of our app view layout.
Through many iterations of our home screen, I experimented with how the pins would populate and how the user would be able to view results.
Our team decided that a bottom tab navigation would be the best option for creating a good app flow and transition between our app views.
After collaborating, it was time to transfer our pen and paper sketches into mid-fidelity wireframes using Sketch App.
After creating our mid-fidelity wireframes using Sketch, we refined our designs into High-Fidelity screen views. It was at this time that we started to discuss some of the branding aspects of our app.
We wanted to keep the interface clean and readable while still implementing some visual “pop”. We chose colors that could project a sense of health and security among our users.
We decided to keep the logo simple with a script font and the name “Dine Rite”. Our brand slogan for this project being “Eat with confidence”.
Once our visual design and branding were established, we plugged our screens into an interactive prototype using Invision. We were then able to transfer the Invision project over to our dev team to start implementation of our designs into a working “test flight” version of the app for user testing.
Coming Soon:
We are currently awaiting release of our test flight version of Dine Rite. Once our developers turn the demo over to us, we will begin testing and further iterations of our app.
Please check back soon, and if you enjoyed this case study you can learn more about me and my design process at www.jessehunterdesign.com. Thanks!
