SCCDine out Redesign

SCCDineOut is an app that provides food facility inspection results, helping individuals with a strong need to find restaurants with a focus on food safety and a healthy environment.

Understanding of the problem

Heuristic Evaluation

Information Architecture

I listed the current information architecture to help me identify issues in the overall picture.

Wrong position

  1. The main page features the Color Information section, which is causing confusion for me due to its placement in the central position of the navigation bar.

  2. The main function of “add to favorite” is deeply embedded.

  3. Phone/mail/message are categorized as the contact information which is at different levels on the IA.

Difficult Comprehension

4. Closure, It is confusing why users need to view the restaurant that is being closed.

Heuristic Evaluation

Ux flow problems

Heuristic Evaluation

Visual problems

Usability Test

Competitive analysis

Insights

How can we enable users to easily access food facility inspection results and discover the most suitable and health-conscious restaurants?

Design goals

Main searching page

  • Efficiently review the status of each restaurant.

  • User-friendly search and filter tools.

Details page

  • Enhance the presentation of valuable information.

  • Optimize the UI to improve both readability and accessibility.

Ideation

Information Architecture

Flow

Main Search page

Wireframe

I divided the search page into sections Navigation/search/main contents/filters

Main content layout for browsing

I explored two potential solutions for the main content layout in browsing mode. Ultimately, I chose a horizontal-scrolling page, allowing users to efficiently scan through information and select their preferred dining option.

Main content layout for searching

Navigation

I observed a misalignment between the navigation icons and their stylistic elements, so I standardized the style of the icons.

I considered two potential solutions for the main content layout in searching mode. I ultimately opted for the listing layout because it strikes a good balance between context and imagery.

Main content card

To accommodate the list view layout, I selected a card design for creating the restaurant details.

Search and filter

I developed two filter designs and settled on the side-by-side format. This choice allows users to intuitively see all possible filters, making it easier for them to refine results and make decisions.

Detail page

Wireframe

Detail page

The content piority on the page are options/restaurant info/contact info/recent inspection

Restaurant information and more options

Recent inspection

Final solution

Deliverble