UNDERBELLY-Responsive web design

PROJECT OVERVIEW

My Role

UX Designer for Underbelly Ramen website design.

My Responsibilities

Conducting research and interviews, creating paper and digital wireframes, low and high-fidelity prototyping, conducting usability studies, iterating on designs.

PROBLEM

Design a new website to help users order takeaway from the Underbelly restaurants since there is no such current function on the Underbelly website. We need to find out if the main user experience of ordering food quickly is easy for users to complete.

goal

Figure out if users can complete core tasks of ordering food for pickup using the website.  

STARTING THE DESIGN

Sitemap, PAPER WIREFRAMES, Digital wireframes, LO-FI PROTOTYPE

Sitemap — to understand and improve the website navigation for users to be able to complete their tasks.

Digital Wireframes

Moving from paper to computer to realize button placement and help navigate solutions to user pain points for viewing the different menus from each location as they decide which location to choose for ordering takeaway.

Digital Wireframes

I included multiple screen size variations to optimize the user experience as they browse from their phone or tablet if they are on the go and not in front of a desktop.

USABILITY STUDY-Research

Similar to my app design for the same company I conducted a moderated research study of five participants varying in age who order out a minimum of one night a week and live in the metropolitan or suburban areas of San Diego. Users were able to checkout but some users would like to place an order for a later pickup time. Most users found the sample menu page to be confusing and not understanding why it was an option. When users used the Search function they were able to find results but had no idea from which location the item was found out.

Research questions trying to answer

How long does it take for a user to place an order?

  • Are users able to use the Search function?

  • Are there any places where the users get confused? 

  • Are users able to customize order items?

INSIGHTS

  1. Based on the theme that: most users found the sample menu page to be confusing and pointless, an insight is: to delete the entire page directly and just create separate links to the direct menus

  2. Based on the theme that: some users would like the option for ordering in advance to pick up an order at a specified time, an insight is: Underbelly should provide an order for a set pickup time option.

  3. Based on the theme that: When users read the search results they are not sure which restaurant the items are available from, an insight is: to add an ‘available here’ next to or under each item from the search result so the user knows where they can find it at. (Or create separate sections for each location?).

  4. Based on the theme that: Users tried clicking on the Underbelly logo in the footer expecting to be taken to the homepage an insight is: Participants want to be able to navigate to the homepage when they click on the Underbelly logo (text or icon).

MOCKUP of Underbelly Desktop Website—Based on the usability study I removed the Sample Menu page to streamline the users experience. I also added the location under the menu item on the Search Results so users can see where they can find each item at.

Mobile size mockup variation to show a responsive web design for different size screens.

High Fidelity Prototype CLICK IMAGE for link to prototype.

TAKEAWAYS

What I learned:

Designing for a website you have significantly more space to add information and get creative with the different layout designs and use of white space. Adapting the website to smaller screen sizes took more creative thought and time creating hamburger menus and overlays to showcase only the important information.

Next

For the next ideation I would add links to the different locations under the menu items on the Search Results page to improve user experience for a faster more efficient way to order an item on the Results page.