01. Overview

Background

Let’s match is a food and beverage pairing app that helps users learn what best foods compliments beverages and vice versa. It also lets users give feedback about their pairing and they can also leave their own opinion about what pairs well for them. Users are also able to create and customize their profiles based on what they like. Ar technology also helps users scan a menu or scan the barcode of a food item to quickly pull up a pairing guide.

Objective

  • Design an end-to-end iOS app to accommodate user to pair food and beverage
  • Understander user pain points when they are trying to pair food and beverage
  • Building branding identity for the app
  • Providing a user friendly Users Experience of Let’s match by a flowing User Interface

Challenge

  • The challenge was to create brand image, and User Experience flow, and gain user engagement on a new mobile application. It has:
  • Design an iOS app that help user to find food and drinks of their needs.
  • Understand user pain points when they are looking for the matching items
  • Design branding identity for the app

My Design Progress

Back to Top

02. Research

Research

Research enables me to learn users paint points, frustrations as well as their goals. I was expecting to validate the assumptions and pre-determined goals set from the beginning of the project.I drawn up research plan to identify research goals, questions, assumptions as well as set the timeline for the research phase. This is a guideline for the project to keep me stay on track of what I was trying to learn.

Competitive Analysis

By understanding the customer’s behavior patterns and needs when it came to paring food and drinks  also having the correct data to provide, I would be able to build an app that addresses and solves these areas with the appropriate features.

User Interview

Once I had had solid secondary research data, I moved on to conduct user interview. The purpose of user interview is to uncover insights of user goals, pain points and needs. I conducted the interview with five participants who have interested on food or seeking a quality of life. This gave me a wide-angle look on user's thoughts, decision-making process, what is their concern when they looking for a tutor. To make it easier to find the patterns from user's insight, I created an interview guideline. The interview question is not exactly the same for each interviewee based on their answers but I was able to gather some meaningful patterns from interview in research synthesis.

User Survey

03. Define

User Personas

By conducting guerrilla research, we interviewed 6 people and identified this persona who could be our target users.

POV Framing


POV 1 - Jenny loves to hang out with friends for dinner. She needs to know more about food and drinks pairing because sometimes she doesn’t know what to order and tend to order the same thing over.

POV 2 - Jenny likes to read a lot recipes and uses google to search for for food and drinks. She needs to make sure everyone will be satisfy while having family dinner because she thinks experience is the most important ingredient for a perfect meal.

POV3 - Jenny likes to stay home and enjoy a meal during her personal time. She goes to grocery store and spend money on varieties drinks because she eats and drinks depends on her mood on that day.

Task Flow

From what we have learnt from previous stages about user needs, we created high-level steps task flow in which user typically goes through to achieve their goal. This set the clear path for further design steps by focusing on single tasks and keep user in mind when designing the app interface.

User Flow

I continued exploring ways to optimize the navigation by conceptualizing a user flow that illustrated key actions, different paths and decision points that a user would face when using the app.  Creating an intuitive and hassle-free user journey flow.

04. Design

Wireframe

While digitizing my sketches, I knew I had to keep in mind the function of the app. Although I wanted this app to be a creative space for users, I had to make sure it was clean and organized as it could easily become overwhelming. Making sure I was applying  basic design principles throughout all the screens helped me create structure.

UI Kit

I created many components and variants on Figma to create my UI Kit. After trying different colors for my logo, I found my color palette. I wanted my brand tone to be playful and friendly. I chose Work Sans for my typography because the font is sans-serif with a gentle character. To look playful, I intend to use illustrations and visualizations. Like all my previous projects, I had to make sure that all the components and colors worked well in warm tone color.

High- Fidelity Wireframe

After implementing priority revisions, I worked to create my high-fidelity wireframes, incorporating colors and illustrations to bring its brand identity to life.

05. Testing

Usability Testing

I performed usability testing and gathered feedback from four participants via video call. They were each required to complete three tasks. Testing my designs early on allowed me to focus on whether the product actually functions as expected before adding in any of the branding.

During user testing, the feedback received was pretty consistent.
The task that participants struggled with the most was the first task, which asked users to pick a special ingredients and pair with the drinks. Using an affinity diagram, I looked for common themes amongst each session and prioritized each recommendation by effort.

Revisions to Wireframes

Using the recommendations from the priority matrix, I made revisions to my High-fidelity wireframes to improve its usability and functionality.

Back Button

Participants were wondering if they click the wrong button, how can they go back to the pervious page. Suggested add a back button on the top corner.

In depth information on
Taste Profile

Participants were confuse on the sensations and appearance. Wording is a little too complicated to read. They mention they want to feel the taste while reading from the text and suggested a scale of taste will help user to develop the imagination.

I put icons on each of the taste to help users to understand more about the taste.

Re-design the box

Participants were confuse on the box for each item. They thought they are buttons and are able to click since the box have the same design as the selection page.

Therefore, I changed the design to 2D and the color so it won't be confusing.

Re-design the page

Participants mention the background was too dark for them to read the icons and word on the page. Also need an exit button in case they just want to read the product page.

I re-select the color in order for the icon to pop out. Also, added the exit button for user to leave this page in any time

Next Step


I found this case study to be the most interesting yet. This was a valuable experience as it was my first time designing an end-to-end mobile application from the ground up, but also learning more and hearing from others was eye-opening.

Patterns are there for a reason.
I was excited to design an app from scratch, but I learned through testing that choosing aesthetic over functionality can cause confusion to the user. To prevent common usability issues and allow for greater learnability in the future, I need to work on finding the right balance.

Implementing a rewards program.
In the next round of designs, I would like to conduct further research on implementing a rewards program based on a user’s activity as some participants felt rewarding will encourage user to sign up and user the often.