Crystal Cafe Website Design

Crystal Cafe Website Design

concept project

Role: UX Designer

Date: August 2023 - September 2023

Team: Candace Roberts

Project Overview

Crystal Cafe is a local cafe offering delicious food and refreshing beverages in a relaxing / comfortable environment. They use fresh ingredients in their food and also offer recipe cards of what they use to make their food. Crystal Cafe knows there are people who have allergies to certain ingredients, dietary restrictions, or follow a specific lifestyle. They make sure they provide many option for everyone to enjoy ordering from them.


Project Goal

Design a website for Crystal Cafe that allows users to view nutritional information and ingredients of their menu items without sacrificing taste or pleasure.

User Research

I conducted interviews to better understand the users and their needs with the website I’m designing. The primary user group identified through the research are adults who experience challenges when finding food that meets their lifestyle, whether they have food allergies, diabetic, or want a healthier lifestyle.

This user group confirmed that they have problems finding food choices that meets the needs of themselves or others. While some users have a much simpler eating plan they follow, others seem to follow a stricter plan that eliminate certain food groups that many individuals enjoy daily.


Pain Points

Here are the major pain points I was able to penpoint in my research from the target audience.


Defining a target user & problem statement

Problem Statement

Rebecca Love is a Graphic Design intern that developed diabetes who needs to limited the amount of carbs or added sugars she intake because she wants to be able to manage her diabetes more while also enjoying more food options in the future.

Design Iterations


Sitemap

My goal was to indicate how the homepage would operate if it was a real website. I wanted to show what options were available if anyone were to interact with the options.


Paper Wireframes

I wanted to take inspiration from other website layout and make the ordering process easy for users to use. I later combined the parts that I liked to make a desirable home page.

Paper wireframe screen size variation(s)

Because users today look at many website on a variety of different devices, I wanted to work on designs for additional screen sizes to make sure the website would be fully responsive.


Digital Wireframes

While designing the digital wireframes I began to redesign how the homepage of the website would improve the user’s experience.

I wanted the users to be able to interact with the homepage and provide different ways for them to begin ordering their items.


Digital Wireframes Screen Size Variations

Desktop

Mobile


Low-Fidelity Prototype

The low-fidelity prototype connected the primary flow of viewing nutrition, customizing, and ordering menu item from a cafe.


Usability Study: Findings

  1. Screen Size

    • While viewing the website, users will have a hard time viewing the content as a whole because of the screen size.

  2. Back Arrows

    • Users find that the back arrows were not needed since the product is on a website instead of an app. 

  3. Nutrition Info

    • Users found that the nutritional information for the menu items were too small on the screen.

Mockups

With the help form the usability study I made some improvements to the screen size (blue dotted line). Users explained that the endless scrolling wasted the user’s time where they could use it elsewhere.

Mockups

Since users decided that the “back arrow” was unnecessary, I decided to make the menu page more interactable by making the words above the ordering page clickable. I also made sure to increase the size of the nutritional information so users can see them better.


Mockups: Original Screen Size

Mockups: Screen Size Variations

Mobile

Desktop


High-Fidelity Prototype

The final high-fidelity prototype follows the same user flow as the lo-fi prototype with updated designs. Some designs were influenced by the usability studies.


Accessibility Considerations

The accessibility considerations I applied to the design:

  1. Made the color scheme dark so users with visual impairment could easily see the design and read the options. 

  2. Allow users to search up menu options from the search engine without having to scroll.

  3. Use pictures of the menu items so users know what they are ordering.

Takeaways

Impact:

The website makes users feel like Crystal Cafe knows who their target audiences are by letting them know important information about the food they are ordering. They also like how the design provides a more interactive website and that images are shown for all products.

What I Learned:

I learned that any small step can lead to a beautiful masterpiece, though you will need to put in hours of work to do so. I know that in order to make sure your design is actually ready to submit, you must focus on the users’ needs before anything else.


Next Steps

Here are the next steps I will implement:

  1. Conduct another round of usability studies on the new website design.

  2. Conduct more user research to determine if any additional features are needed for future updates.

Previous
Previous

Crystal Cafe App Design

Next
Next

Comfort Space Design