About Me

Save-on-foods

UI & UX Case Study

Overview

Save-On-Foods is Western Canada’s online grocery store. Save-On-Foods makes it easier for customers to make healthy choices by offering a range of food, products, and services that contribute to good nutrition, health, and wellness.

In this case study, I will redesign the UI and UX of the Save-On-Foods mobile application to make it easy. Also, I will improve my user research, problem-solving, and UI design skills

Role

UX/UI Designer

Tasks

User Research, Problem Analysis, UX Design (User flows, Wireframes), UI Design(UI Kit, Mockups)

Design Process

Problem Analysis

At a glance at the application, I realized it doesn’t have a navigation bar at the bottom to guide users through the app. It increases the steps for users to do online shopping on the app. I reviewed the feedback from the app store. Most users are unsatisfied with the online order for pick-up process. Also, most users care about reward points related to their accounts. Therefore, I would redesign the user flows and interface to solve the users’ problems.

  • No navigation bar
  • Too much information on the home page
  • Icons are not significant for users to understand
  • User flows are confusing for users

Redesign User Flow

The original app doesn’t have a navigation bar to guide users, which is not a mobile app style. My primary mission was to redesign the app with a user-friendly interface to make it easy to buy groceries.
1. Because each department will have different products and deals, the app will ask users to select a location to view the updated information.
2. If users haven’t signed in, they need to sign in first to see the content.
3. I still keep the menu option on the navigation bar because the grocery app has many options and categories. Keeping the menu on the app can help users quickly find their needs.

Low Fidelity Wireframes

Created concept sketches representing the skeleton of the interface. I quickly sketched the basic structures on paper before designing the wireframes on Figma to ensure the interface’s usability.

New Wireframes

UI Redesign

The grocery app usually has colorful content, such as images and advertisements; therefore, I choose a flat and straightforward style with dual tone color from the branding color to redesign it. I want to give users a clean interface that will not quickly fatigue eyes. Also, the line height should be added to 1.5 height for the content portion to improve readability.

Typography

SF Pro is a sans-serif typeface, which is neutral and has good readability.

Color Palette

Icons

A stroke icon style with single color gives the app a minimalist style.

Components

New Mockups

Main Screen Comparison

  1. Navigation bar. To guide users easily on the app, I redesigned it with a navigation bar to lead users.
  2. Notification, cart, and search bar. Users can view the messages when they open the app and search items directly on the home page.
  3. For Hot Deals This Week, instead of users scrolling down the app to view more products, I adjusted it to swipe from left to right by gestures. Also, it could display more than one product simultaneously on the screen.
  4. My account. Users who already sign in to the account will see their name and total points. If users haven’t signed in yet, it will display a sign-in button for users to log in.
  5. Users can edit their location store.
  1. Filter button for users to find the category. The sort button for users by price, brand, and relevance.
  2. Add items to the cart. When users click the add button, the amount will display on the card, and users can select the amount and click the add button to add it to the cart.
  1. The back button. When users click the back button, they will go back to the department page to view all products.
  2. Users can click the heart button to save items to their favorite list.
  3. The add to Cart button. It will stick on the bottom of the screen so users can add items at any time. They don’t have to scroll the page if the description is too long.
  4. If there is only 1 item, it will show the add button on the right and the trash button on the left.
  5. If there is more than one item, it will display the minus button on the left.
  1. Product information, which includes title, price, amount, and image. Users can select the items they want to check out.
  2. Select a pickup location or add a delivery address.
  3. Select all items in the cart. If users haven’t selected the purchase way, the button will be disabled.
  4. Users can use the search bar to find a location nearby.
  5. If users click the checkout button, a notification will pop up to remind them to select the rest of the section.
  6. Users can scroll the time to view more time, and they can click the icon to view the calendar.
  7. If the time is already sold out, the item will be disabled.
  8. View the time slot. Users can click the arrow icon to change the time slot.
  9. When users finish the selection of location, time, and product, the checkout button will be active.
  10. Users can use gestures to remove the product by slipping items from left to right.
  11. Users can use gestures to add products to the list by slipping items from right to left.

Tools Used