Steak never ends.

OVERVIEW

Brief

JSteak is a steak website that helps people find food menu list, FAQ, and online orders easily.

Objective

In this project I was given the freedom to create my own prompt. With ambition in hearts, I decided to tackle a problem related to ordering steak online. The goal of the course was to use the UX process of divergent and convergent thinking coupled with iteration to synthesize a solution to the problem I had chosen.

Outcome

JSteak now has an accessible and streamlined website for both gourmet restaurant take away and delivery. The website caters to local residents as well as an international user base. The branding is simple and minimal to emphasize on JSteak's luxurious offerings.

My Approach

Phase 1 : Discover

During the Discover phase of the user-centered design process, I gathered data related to current food delivery and reservation services commonly used in local area. To do this, I had to understand users' view by finding out research goals and performing competitive audit. After going through these steps, I was able to draw insights which informed the next stage of the design process – Define.

Research Goals

1

2

3

4

Are users able to successfully order the steak that they want?

Competitive Audit

The objective of this competitive audit was to compare the order experience of the most popular steak restaurant websites. By analyzing their strengths and weaknesses, I gained the knowledge of what aspects needed to include and improve in my design.

Opportunities to improve:

Create vegetarian information and add kid’s menu
Integrate our website with assistive technology
Provide imaginery menu and add temperature option
Provide rewards or perks for returning customers

For more details, check this competitive audit of three different steak restaurant.

Are there any step difficulties where users are getting stuck?

What can we learn from the user flow, or the steps that users take, to book a steak on the website?

Are there any step difficulties where users are getting stuck?

Phase 2 : Define

After completing the Discover phase of the design process, I moved on to the second phase – Define. During this phase, I wanted to develop meaningful insights and solutions from the users. In order to do so, I defined pain points for my design to address, developed a thought of personas to indicate my target audience, and gathered storyboards to show my users' journeys. The third phase – Develop – is addressed to the most viable solution to the problems (pain points) that I've defined in this phase.

Personas

I applied both the improvements from the competitive audit and the pain points from user interviews to create personas for Anthony and Lisa. These two persona profiles show frustrations and goals that users have mentioned during interview sessions or that I have found during the competitive audit.

Pain Points

1

Accessibility

2

Visual Design

3

Product

4

Process

Platforms for ordering food are not equipped with assistive technologies

Simple and minimalist design app might provide an easier platform to be used

Temperature feature, extra cutlery when order session, lack sugar/ lack ice, etc.

By giving them the register/ log in feature later, then we might build a good experience for the users.

Storyboards

JSteak has two different use case scenarios: Big Picture and Close Up Picture. In order to visualize these two scenarios, I put together storyboards for both Anthony and Lisa which also emphasize how JSteak would benefit them as users.

Phase 3 : Develop

For the Develop phase of the user-centered design process, I took the conclusions I drew from the Discover phase and transferred them into design ideas. First, I structured a site map which acts as information architecture of my website. Then, I sketched wireframe on a piece of paper and built it to digital wireframe using Figma. Finally, I created low-fidelity prototype and conducted usability study and received feedbacks.

Site Map

Paper and Digital Wireframe

I designed the wireframes using a pencil and a paper, then I marked the elements of each sketch that would be used in the initial digital wireframe. Finally, I combined it into one big design: Home Page Paper Wireframe.

After that, I turned the paper wireframe into digital wireframe, using Figma JSteak's Digital Wireframe.

Low - Fidelity Prototype

I incorporated these wireframes into a prototype which I later used in usability testing sessions.

The low-fidelity app prototype for JSteak was tested and can be viewed here.

Usability Study

In order to jump to usability study, I did some research by pointing out our project background, research goals, research questions, KPIs, methodology, participants, and scripts. After that, I did usability study with 5 participants in total, did note-taking, synthesized all the quantitative and qualitative data, and finally I did some observations which then turned them into themes and insights.

Observations from usability testing:

Create vegetarian information and add kid’s menu
Integrate our website with assistive technology
Provide imaginery menu and add temperature option
Provide rewards or perks for returning customers

Case Study Slide Deck

Please be free to see my case study slide in PDF.

Phase 4 : Deliver

In the final stage of the design process, I iterated on my previous low-fidelity prototype to mockups. Following this, I created a stikcer sheet, mockups, and high-fidelity prototype. Finally, I ensured the website to be a user-centered design which were created based on users' pain points.

Sticker Sheet

I developed and maintained a design system to show consistent experience. If I would like to redesign or redevelop the same website, I might not put extra effort to do it all over again. In my first journey of UX Design project, I built a sticker sheet as a part of design system.

Mockups

From digital wireframes to mockups can be viewed here.

High - Fidelity Prototype & Second Usability Study

The final high-fidelity prototype presented with consideration of visual elements, navigation, and interaction. It has met user needs for scroll bar feature as well as addition information about how to choose the steak’s temperature.

View Hi-Fi Prototype JSteak (Dekstop version) here.

1

Users need to adjust the language and currency

2

Users need additional information related to certain feature

Ordering Process

Responsive Device

With JSteak, I created a responsive and user-friendly online website. I opted this option to allow the website to resize and reformat automatically, depending on the device being used. I hope that these responsive website might lead to an optimum viewing experience.

Mobile Mockup can be viewed here. Hi-Fi Prototype JSteak (Mobile Version) can be viewed here.

Ordering Process

Going Forward

The shifting to more advanced technology has changed people’s habit of ordering the food they like. One of the most popular cuisines is steak. This JSteak website will impact customers to order easily by connecting online.

At the beginning of the project, I learned how to empathize with the users, define pain points, ideate design solutions, then started to build wireframes and low-fidelity prototypes. During this step, I learned how to conduct research plan and usability study. After that, I learned how to create high-fidelity prototype and considered accessibility in my project.

There are definitely still ways in which I can improve JSteak; I couldn't incorporate them all due to time constraints. However, I can definitely try to do so in the future!