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
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.
The main function of “add to favorite” is deeply embedded.
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