EMBER RESTAURANT RESPONSIVE WEBSITE DESIGN

oliveux.com

PROJECT OVERVIEW

My role: UX designer designing an website for Ember BBQ Restaurant  from conception to delivery using Adobe XD.

Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

RESEARCH

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy adults who don’t have time to cook meals. 

This user group confirmed initial assumptions about Ember’s  customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included customization frustrations and menu inconsistencies that made it difficult for users to order from the restaurants website.

USER RESEARCH:

PAIN POINTS

USER JOURNEY MAP

PERSONA

START THE DESIGNING

SITEMAP

Lack of ease and customizability were a few primary pain points from the users, so I utilized that knowledge to create a sitemap. 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy

PAPER WIREFRAMES

Next, I sketched out paper wireframes for the website screen, keeping the user pain points about customization and up to date menus in mind. 

The homescreen paper wireframe variations to the right focus on easy and quick user flow.

PAPER WIREFRAMES SCREEN SIZE VARIATION

Because Ember BBQ Restaurant customers have access to the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

DIGITAL WIREFRAMES

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button locations and visual element placement on the homepage was a key part of my strategy. 

DIGITAL WIREFRAME SCREEN SIZE VARIATIONS

LOW-FIDELITY PROTOTYPE

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.  At this point, I had received feedback on my design from users about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

View Ember BBQ Restaurant Low-fidelity prototype

USABILITY STUDY: DIGITAL WIREFRAMES 

Study Type: Unmoderated Usability Study

Location: United States, Remote

Participant: 5 Participants

Length: 10 minutes

USABILITY STUDY: FINDINGS

• Tracker: At the end of the checkout process, the user did not completely understand the tracker.

• Menu: Users were a bit confused about clicking the order button first as opposed to a menu button in the homescreen

REFINING THE DESIGN

MOCKUPS

To make the ordering flow even easier and clearer for users, I changed the main call to action button on the homescreen from  “Order”  to “Menu.”

Based on the insights from the usability study, I made changes to improve the site’s tracker. The change I made was adding color and words to the center of the tracker bar. This allowed users to better understand what the changes in color meant and where they were in the post ordering process.

MOCKUPS ORIGINAL SCREEN SIZE

MOCKUPS: SCREEN SIZE VARIATIONS

I included consideration for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users have the smoothest experience. 

HIGH-FIDELITY PROTOTYPE

My high fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study, as well as several changes made after the usability study, as well as several changes suggested by members of my team.

View my Ember BBQ Restaurants: High-fidelity prototype

ACCESSIBILITY CONSIDERATIONS

IMPACT

One quote from peer feedback:

“It was pretty self explanatory! I loved the pictures, I loved colors behind it, the food looks really enticing, and so does the website itself overall, I think it was really good! There wasn’t anything that I necessarily disliked. It was quick and easy so that’s always a plus.”

— Participant C

LET’S CONNECT!

Thank you for your time reviewing my work on the Ember BBQ Restaurant website! If you’d like to see more or get in touch, my contact information is provided below.

Email: omassaquoi14@gmail.com

Website: oliveux.com