The UX behind SLC health codes

Sam Clare
SamuelClare
Published in
5 min readAug 2, 2018

Project by Samuel Clare, Jesse Hunter, Brooke Jones

Project Overview

The Salt Lake County Health Department currently doesn’t publish health code scores on the windowsills of restaurants like other cities do. Local communications director, John Rupp, said it’s because those scores can be misleading. However, he added that the department is looking into implementing a system where a patron can use their smartphone to quickly view a restaurant’s latest health report. He said he hoped that would be available for patrons by summer 2018. “We prefer people looking at a full inspection report,” he said, “so they can see for themselves what types of violations there are.”

Objectives

  1. Discovery: Find out if customers care about viewing health codes.
  2. Identify: What the customer would like to see on the health code.
  3. Ideate: Solutions to pain points easy-to-digest data.
  4. Create: Health scores app that meets customer and state needs.

Research

First, we sent out a mass survey published on a local SLC channel (100+ responses) and second, we performed face-to-face interviews with randomly selected locals in Salt Lake City.

Survey Findings:

Based on our survey information we learned that the majority were female who ranged in age between 20–26, and ate out typically 2–3 days a week. They preferred to eat out at fast-casual restaurants (Rumbi, Noodles & Co. Cafe Rio. etc.) or sit down restaurants.

How likely do reviews and ratings influence where you eat? How much do you trust official health codes?

The majority relied on reviews and ratings to determine where to eat and trusted the official health food scores. We found that most people care about health scores and having that information easily accessible.

Persona

Based on the survey data we created our persona. Sadie Clark is 26 years old and lives in Salt Lake City, Utah. She is married and she and her husband are expecting their first baby. Becoming a mother has brought on a new awareness of the food she eats for the health of her baby. Having easy access to review health codes and other reviews are important to Sadie.

User Story Map

Based on our persona’s goals, we laid out a user story map. This really helped us find our MVPs and start wireframing individual screens and functions.

Based on our research, we found that most people relied heavily on the opinions of others, but only half of those people would leave reviews themselves. We wanted to create a database where both sets of information were shared with easy to understand data.

Wire Frames

Mockups

Our first designs were made with a 5 icon navigation; Home, User Profile, Search, Favorites, and More. The home page (landing page) was a map, showing results by user location, with a seach bar at the top of the page. The seach page and the home page worked similarly, allowing the user to filter results to find restaurants and review data. All searches led to the restaurant profile page.

We spent most of our time designing the restaurant profile page. It is the most important page to help meet the users goal of “finding health scores and having information easily accessible.” It required alot of work in information architecture.

I set out to find the best way to display the health food scores, and found that the state had each restaurant labeled with “Risk Levels” 1–4. I decided this would be the easiest way to quickly show where the restaurant’s health standard were. If you wanted to learn more about why they were assigned to their “risk level” you can click on the icon and information would expand to the inspections by date, and violations.

Final Design Changes

Resturant profile page:Health rating tab

As we developed the final design we ran into several design challenges. Even though SLC publishes the health scores and ranks them via “risk levels” the director asked that we do not rank the restaurants. He asked that we figure-out a way to display the information in a non-leading way.

Looking back at the data, every violation had a point system 1,3 or 6 points depending on the violation. We decided to show the total number of points accumulated in the last inspection with a break down of major violations, minor violations, and total score.

We added an information pop-up to help the user understand what a critical vs. non-critical violation is and the how the points breakdown.

After implementing the new inspection data breakdown, almost every page needed adjustments. Our final design to send to the development team looked like this:

Page Layout

Developer Changes

We have had some minor changes in our design since handing the project off to the development team. The main one was a redesign of the search results page and a map view drawer for the resturat data. The app is currently still in the hands of the development team and we are waiting to do more user testing.

Conclusion

As a designer I learned several skills and tools in designing this app. A lot of it was content management and information architecture. A lot more user testing will happen when we get the app back from the development team. Stay tuned to learn more about how the users interacted with the app. Thanks for reading-

Samuel Clare

--

--