Case Study

Role

User Research | UI/UX Designer

Duration

April 2023 - May 2023 (3 weeks)

Overview

I redesigned Sole Ristorante Italiano's website to make it quick and easy for their customers to find something to eat.

Discover

What's the Problem?

The owners of Sole Ristorante Italiano expressed their desire to revamp their website with the intention of attracting more customers and giving the site an updated feel. However, they were uncertain about the most effective approach to achieve this goal.

User Interviews

After engaging in discussions with the stakeholders and gaining valuable insights into their requirements, I made the decision to initiate the discovery phase by conducting a series of user interviews. The primary objective of these interviews was to gain an understanding of the specific purposes for which users utilize a restaurant's website.

Research Goal

The goal of this research is to identify the main reasons why users visit restaurant websites and motivates users to order online or visit the restaurant.

Research Objectives

• Understand users' primary goals.
• Identify pain points and usability issues.
• Determine important content and features.
• Gather feedback on the current website design.

Participants

• 5 users were interviewed
• Age range from 23-54
• Eats out at least twice a month

Research Questions

• What are the main reasons why you visit restaurant websites?
• What deters people from ordering food at a restaurant after visiting its website?
• What motivates people from ordering food at a restaurant after visiting its website?
• What features or content do you find most valuable on a restaurant website? and why?

Click here for Interview Guide

Key Insights: User Interviews

All interviewees expressed their strong desire to easily access a clear and concise menu.

A majority of interviewees mentioned that they’d like to be able to order ahead online or book a reservation online.

80% of interviewee’s mentioned that they wanted to see high quality photos of the restaurant’s food

60% of interviewee’s mentioned that they wanted to see dietary information about the dishes.

Define

Empathy map

With the insights I gained from user interviews I created a empathy map to understand my users' emotions and actions, ensuring a human-centric design approach.

Objectives

After building a greater understanding of my user's needs and stakeholder's needs I set some pragmatic goals that would define the scope of the project and ensure all parties would align.

User Goals

  • Nutritional information access for informed dietary choices.
  • High-quality content for restaurant decision-making.
  • Easy accessibility to key details (ambiance, location, price range).
  • Mobile access for on-the-go convenience.

Business Goals

  • Boost customer engagement and foster loyalty.
  • Establish a unique value proposition to differentiate from competitors.
  • Increase restaurant traffic and drive sales.
  • Enhance brand recognition and raise awareness.

Technical Considerations

  • Scalability: Handle large user volumes and data, scaling up as needed to meet growing demand.
  • Security: Prioritize strong data protection measures.
  • Time constraints: Create features within specified time limits.
  • Performance: Ensure overall product performance optimization.
  • Accessibility: Design for inclusivity.
  • GoDaddy website builder: Utilize GoDaddy as the development platform.

User Persona

With clear goals established, I developed a user persona based on thorough user research. This persona serves as my primary focus, guiding the design process to ensure a user-centered approach.

POV/HMW Statement

With clear goals established, I developed a user persona based on thorough user research. This persona serves as my primary focus, guiding the design process to ensure a user-centered approach.

Develop

Brainstorming

I brainstormed a wide range of abstract ideas to solve the problem, then narrowed down and focused on the most promising ones that align with the "how-might-we" statement.

Going Wide

In the beginning stage of my brainstorming process, I intentionally examined a diverse array of ideas without worrying about their practicality, with the goal of thoroughly exploring all possibilities.

Narrowing Down

After considering the diverse range of ideas, I refined my selection to focus on eight concepts that closely aligned with the goals I set.

Possible Solutions

Following the process of narrowing down the ideas, I carefully assessed their feasibility and compatibility with the GoDaddy website builder to determine if they fell within the project's scope.

Selected Solutions

After selecting possible solutions I narrowed down and wanted to make sure that the selected solutions align with the "how-might-we" statement and stakeholder needs.

How do these solve the HMW statement?

Feature Set

Following my brainstorming session, I reviewed the selected ideas with my mentor and prioritized them to ensure they remained within the project scope.

Deliver

Refinement

After understanding the design requirements, I created low-fidelity wireframes to rapidly iterate and refine my ideas. Subsequently, I advanced to mid-fidelity wireframes, incorporating more context and refining design patterns. These iterations paved the way for a high-fidelity prototype that was ready to test.

About Us Page

Menu Page

Landing Page

Usability Testings

I conducted a round of usability testing via Zoom, having the user's walk me through the process of completing each task.

Testing Goals

Our goal is to gather data that quantifies effectiveness, and ease-of-use.

Metrics

I requested users to rate their confidence level (on a scale of 1-5) regarding the restaurant's menu offering an item that could cater to their specific dietary needs.

Participants

• 5 users were tested
• Age range from 23-54
• Eats out at least twice a month

User Insight: Usability Testing

All interviewees expressed their satisfaction with the sub-menu feature, which greatly facilitated the process of finding menu sections effortlessly.

A significant majority of interviewees expressed their desire to have the ability to filter the menu according to specific dietary needs.

A notable 60% of the interviewees expressed their appreciation for the ability to view nutritional information by clicking on menu items.

Addressing User's Concerns

During user testing, it became apparent that users found it inconvenient to locate dishes that met specific dietary restrictions. To address this issue, I implemented a filter function on the menu, allowing users to easily find dishes that align with their dietary needs.

From Testing to High-Fidelity

After completing the refinement stage, I finalized the user interface elements and prepared both desktop and mobile prototypes for presentation.

Mobile Web Prototype

I took a mobile first approach to this project to ensure that the features would be responsive. Next to this is a video shows the filtering function of the mobile site.

  • The dietary filter function instills confidence that everyone in their party can find something to eat.
  • From the previous website design, I made the menu more efficient to navigate through with a sub menu.

Desktop Web Prototype

Here is a desktop prototype demonstrating the content by navigating through its pages.

  • We intend to integrate third-party businesses like DoorDash to enable the "Order Now" function.
  • The "Our Story" page provides a comprehensive background on the chef's accolades, expertise, and experiences, emphasizing the commitment to delivering high-quality food to our customers.

Final Takeaways

Major learnings

Throughout this project, I had the opportunity to acquire valuable real-world experience by navigating various challenges such as engaging with stakeholders and overcoming technical and budgetary limitations. As Sole, a small upscale restaurant, depended on GoDaddy's website builder as a cost-effective solution for hosting and constructing their website, I needed to familiarize myself with the technical constraints associated with the platform. Additionally, I had the responsibility of aligning the stakeholders' interests with the requirements of the end-users, ensuring that the website catered to the needs and preferences of Sole's target audience.

What would I have done differently?

Conducted user research earlier in the project to involve stakeholders in the process and ensure their understanding of user perspectives from the beginning.