What's it all about
Duration: 4 Weeks
Role : UX Researcher / UI Designer
School Project
Freshbites is a restaurant based on Toronto. Their primary audience are those who wants customizable, health-conscious meals at a budget-friendly price.
However, the website design lacked the essential features. The menu, presented as images, lacks interactivity and information, lacks images of food and descriptions, making browsing challenging.
Long story short.
The problem we tried to tackle
The user faces challenges in existing website due to non-interactive picture menus, poor content, and a lack of aesthetic appeal. It limits content to one page, lacks information architecture, and orders food from a third party website. User experience is greatly impacted by these problems, requiring a complete redesign and improvement.
What we want to achieve
Redesign existing website to enhance visual appeal.
Improve website functionality to help users easily order food.
Introduce various pathways to help users navigate and access pages more efficiently
This is how we revamped the website
Enhanced the website’s appearance, added interactive menus, and improved content quality.
Addressed problem of not having information architecture, and allowing user to order food within website which would greatly improve the user experience.
The Exploration Journey
What we found out first
Started by analyzing the existing website.
Identified three main issues: non-interactive picture menus, poor content and aesthetics, and limited content with no information architecture.
Voice of users
Conducted interviews with current users of the website to understand pain points and preferences.
Gathered insights on the challenges faced, such as difficulty navigating the menu and dissatisfaction with the overall user experience.
Conducted current state usability test.
What the rivals are upto
Identified successful design patterns and functionalities, user-friendly features and effective content presentation.
Extracted best practices that could be applied to enhance the user experience.
Here’s what we mapped out
One of the major problems identified during the current state usability test was that participants faced difficulties navigating through the website. To address this issue, we decided to improve the information architecture as follows
How we organized contents
We conducted a card sorting exercise with five potential users, which helped us understand how they group information and form categories. This served as the basis for building the information architecture.
Putting it altogether
Developed a finalized information architecture (IA) based on the card sorting results and incorporating best practices.
Prioritized user-friendly navigation to address the lack of a proper navigation bar on the existing site.
Organized content logically, making it easier for users to find information and navigate the menu.
Visualizing user path
If we implement the above navigation system, the user would follow the below shown path to reach their goal (here, buy a customised salad).
● This user flow diagram helps visualize the journey users take through the website.
● Highlighted key interactions, decision points, and the flow from menu exploration to placing an order
Meet Sarah, our tech-savvy Foodie
From sketches to solutions
Doodling our main ideas before fleshing out the details.
● The ideation phase kicked off with the creation of paper prototypes. This hands-on approach allowed for quick ideation and iteration, understanding of the potential user interface.
● Key functionalities and layout elements were sketched on paper, enabling a rapid exploration of design concepts and user flow scenarios.
Simple, no-fuss wireframes—just basic to outline our concepts.
● At this stage, we focused on refining the layout, organizing information, and planning how users would interact with the design.
● Based on paper prototypes, we made low fidelity wireframes which converted our ideas into a digital outline, forming the basic structure for the website redesign.
Welcome to the design guide, where all the design elements come together for a seamless experience.
Colors and fonts, folks—this is the magic that gave our design its flair.
From here on out, you’re seeing the design with my personal touch.
We chose green as our main color because it symbolizes freshness, health and calm, which all match our restaurant's vibe. But, I've updated the shade of that green color to match my personal preference.Using shades of green on the website aims to make visitors feel refreshed and connected to our focus on fresh and healthy food and making our site welcoming and cozy for everyone.
For the typography, I chose Urbanist for its simplicity and minimalism, perfectly complementing the clean, modern look we aim for in our website redesign. Its sleek lines and contemporary feel enhance readability, ensuring a smooth browsing experience on any device. Urbanist's versatility helps us maintain a professional and elegant appearance while effectively delivering essential information.
UI Kit Elements
The Grand Finale
Let's start with a side-by-side look
Ready for the grand tour? Let’s dive in and see how it all unfolded!
Alright, folks, here’s the scoop—let’s take a page-by-page journey through the design. I’ll walk you through each screen, showing you how every detail comes together to create a seamless experience.
Pocket-Sized Design: Exploring the Mobile UI
The top insights and takeaways from what we’ve done
Here’s what we battled through
Enhancing the current website's UI by addressing issues like the lack of online ordering and poor navigation.
Creating the information architecture (IA) due to the limited amount of navigation content available.
Creating user journey for the website redesign due to the limited availability of real user data.
Maintaining cohesive design while collaborating as a team.
Here’s what I discovered along the way.
Collaborative working towards common goal of delivering an effective project.
Facilitating cohesive teamwork to meet our shared project objectives was a significant challenge.
The absence of a design system in the initial stages resulted in disparate and non-cohesive design outputs
Prototypes
