Interested in collaborating?

[email protected]

blob 1
blob 2

Dine'n App

CLIENT

Dine'n App

Restaurant App concept for UX course showcasing UI and UX design process.

PROJECT TYPE

Website Design

Design Process

EMPATHIZE

Research

Research Goals

1. Understand the market trends of various industries
2. Identify the target market
3. Identify competitors and evaluate their strengths and weaknesses
4. Understand the role various services play in people’s social lives
5. Understand the experiences people have with various services
6. Discover goals, needs, motivations, and frustrations users

Market Research

In order to gain more insights on what the current industry looks like, I decided to start with market research. Through market research, I was able to get a deeper understanding of the current trends of restaurant market based on data gathered from secondary research.

Competitive Analysis

After conducting my market research, I analyzed top competitors to evaluate their strengths and weaknesses. This information helped me to understand what the trends are across all competitors, their unique differences, and why users might choose a particular service over another.

User Persona

Using what I learned from both my secondary and primary research, I created a user persona that accurately represented who I am designing for. This persona helped guide my decisions along the design process to make sure the solution I am designing is centered on our user. Meet Kevin:

DEFINE & IDEATE

Defining the Problems

Now that I knew who I was defining for, I was able to use the insights and needs gained from research to identify what the main problems are that I am trying to solve. I used those insights and needs to create POV statements to better understand the problem from the user’s perspective and then created HMW questions to come up with possible solutions for these problems.

Task Flow

Now that I knew how these features would fit into a new structure, I wanted to explore how the user’s would be interacting with these features to complete key tasks. I first created a UI Requirements document to identify the key tasks based on our user’s goals, and then clearly laid out the specific requirements for each screen in order for the user to successfully complete those tasks.
Using the same key tasks, I created task flows to understand the actions the users would take and the key pages they would interact with to complete those tasks.

User Flow

Now I wanted to take an even deeper look into the overall user’s journey while interacting with the new features. In order to more deeply empathize with the user, I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.

Lofi Wireframe Sketches

Using everything I learned throughout this phase, I then worked on creating lofi wireframe sketches to make informed decisions on how to design these new screens to help our users complete these tasks and meet their goals.

PROTOTYPE & TEST

Sketches to Prototype

In order to test the design decisions I had made and to test the usability of the design, I wanted to create a prototype to test on real users.

High Fidelity Wireframes

Using Figma, I first started by creating high-fidelity wireframes based on my sketches.

Usability Testing

Using the high fidelity, limited functionality prototype I created, I started to test my design on users to measure its usability and identify any areas of improvement.

Overview
Method: Remote, moderated usability testing (Think Aloud)
Participants: 5
Age: 27-31 years
Average Time: 6.2 minutes
Task Completion Rate: 100%
Error-Free Rate: 97.2%