Go Vegan Website

A website for a vegan restaurant that allows customers to order food delivery in Maputo.

UI DesignUX DesignCertification Project

The project at a glance

Designing and building the ordering experience

A personal project connecting research, interaction design and frontend implementation for a fictional vegan restaurant in Maputo.

UX Research
Interaction Design
Frontend

View demo Jump to engineering

Scope: UX research, interaction and visual design, and frontend implementation.
Status: Personal project demo
Starting point: UX study: January 2021. Frontend implementation developed afterwards.

The problem

Make it easier to choose dishes, understand portion sizes and review a customised food order.

The boundaries

A client-side demo with local menu data and simulated account and payment steps. The research explores a fictional restaurant.

Project Overview

Location: Maputo, Mozambique
Date: January, 2021
Role: UX Designer
Why: Certification Project

About the project: This project originated from my specialization in User Experience Design (UX) completed at the California Institute of Arts through the Coursera platform. The main objective was to create an innovative solution that made it easy to order food delivery from a fictional restaurant, using solid UX principles. Although the restaurant does not exist in the country, during the research phase of the project, I employed a wide variety of UX practices to bring this initiative to life.
The challenge: Develop a website for a vegan restaurant in Maputo, with the aim of driving sales growth, whilst retaining and attracting a loyal customer base.
Success criteria: The design goal was to make choosing portions and reviewing an order understandable, using prototype feedback to identify what needed refinement.

About the restaurant

Go Vegan Restaurantserves delicious and healthy plant-based food without compromising on taste or satisfaction, aiming to inspire and delight guests towards vegan diets.

What I did

InterviewsSurveysPOVHMWMoodboardSitemapWireframesHigh Fidelity Prototypes

RESEARCH

Understanding the problem

Interviews

After receiving information about customer (stakeholder) needs, resource requirements, and content requirements for certification, I was able to conduct interviews with four vegan diet enthusiasts.

The aim was to understand their interest in ordering vegan food and identify their main frustrations with food delivery services.

Customer needs (Stakeholder):

Sell food online that will be delivered
Provide an order customization system
Ensure consistency in the food to be delivered
Ensure there is a flexible payment method

User needs:

Find out if the restaurant delivers to their area
To order food online
Contact the restaurant for any complaints/suggestions about their order
Be able to track the order

See my research plan

User comments

I would love to be able to order vegan food online with ease and convenience. Sometimes practicality is key for me.

Anita Carlos

It would be important for me to have a direct communication channel with the restaurant, in case something goes wrong with my order or if I have any suggestions to improve the service.

Tânia Sitoe

The ability to track my order in real time gives me peace of mind. I like knowing when my food will arrive.

Lourenço Bila

Survey Results

I then conducted a comprehensive survey and managed to obtain a total of 15 meaningful responses. The active participation of the interviewees allowed me to collect valuable insights and crucial data that will contribute to the development of the project.

Pie chart that displays data collected on the gender distribution of participants in the research phase, highlighting that 53% are female.

Frequency of restaurant meals or food delivery: every day, 3 people; two to three times a week, 7; two to three times a month, 2; once a month, 2; cooks at home, 1.

Pie chart that shows data collected about users' professions and highlights that 40% of people work for a company

Diet preference by age. Ages 18–24: 2 people prefer vegan and 1 pescatarian; 25–34: 5 vegan and 1 vegetarian; 35–44: 1 vegan and 3 vegetarian; 45–54: 1 vegetarian; 55–64: 1 vegan.

RESEARCH ANALYSIS

User Persona

After the comprehensive research phase, I developed a representative user persona. Based on the knowledge gained about the target audience, their goals and needs, the user persona was created to encapsulate the main audience segments. This approach allows for precise focus on solving the most significant problems, addressing the essential needs of the user groups most relevant to the project

DEFINE

Point of View (POV)

To define the problem I needed to solve, I created point of view (POV) statements that allowed me to ideate in a targeted way with clear goals and How Might We questions to guide me through the ideation process. These statements and questions were generated based on the knowledge and needs I identified during the research phase.

Table that illustrates the different points of view that allowed me to design in a targeted way with clear objectives and questions about how we could (How Might We) guide me in the ideation process.

Project Goals

After creating viewpoint statements and formulating the 'How Might We' questions, I conducted brainstorming sessions for each question. Based on the ideas generated, I compiled a list of key project objectives, which will play a key role in guiding decisions about which features to include on the site.

The Venn diagram highlights, on the left, the customer's needs, on the right, the user's needs, and in the center, the needs shared by both entities.

IDEATION

Sitemap

After defining the problems to be solved, the next stage of the project consisted of creating a detailed site map. The site map was crucial in helping to logically organize the structure of the site, ensuring that the user experience is intuitive and efficient. This step was essential to define the navigation flow and user interactions.

PROTOTYPING

Wireframes

After completing the sitemap, the next step involved creating wireframes. Wireframes are detailed sketches that outline the structure and layout of the platform's pages, allowing a concrete visualization of the future user interface. This approach was crucial for defining the layout of elements, navigation and functionalities, ensuring that the design meets user requirements.

GoVegan wireframe montage: account creation, dish selection, order summary, contact and confirmation. — View full image

Moodboard

As part of the creative process, I developed a moodboard. This moodboard served as an essential visual tool to explore and communicate the desired aesthetic and visual identity of the project.

Using the context of a vegan restaurant, I tried to highlight the importance of healthy and sustainable food, incorporating the following essential elements:

Natural and Vibrant Colors

Shades of deep greens, earth and pastel tones to represent the freshness of the ingredients and the connection with nature.

Natural and Organic Elements

Images of fresh vegetables, vibrant fruits and other natural elements to convey the authenticity and quality of the ingredients used

Minimalist and Elegant Style

Clean, minimalist design to emphasize the purity and simplicity of vegan foods

Visual styles and components

The process step involved the creation of the visual identity. This step consisted of developing the appearance, style and visual elements that would represent GoVegan in a distinct and attractive way. Visual identity is essential for conveying the brand's personality and establishing a visual connection with the target audience, ensuring a coherent and memorable experience for users.

High Fidelity Prototypes

We then moved on to creating high-fidelity prototypes. This phase involved the construction of detailed and interactive visual representations of the user interface (UI), which accurately reproduce the functionalities and final design of the project. High-fidelity prototypes provide a tangible and realistic representation of the experience users will have when interacting with the site, allowing for a more accurate assessment and identification of possible improvements.

GoVegan high-fidelity interfaces: contact, FAQs, order details, dishes, review and order history. — View full image

Responsive Design

Subsequently, I developed the mockups for mobile devices, ensuring that the design was responsive and offered a consistent and optimized experience across different platforms and screen sizes.

Mobile versions of GoVegan pages and the prototype steps for account creation, order details, dish selection, review and payment. — View full image

Live Prototype

Then I created an interactive prototype for real-time user testing, allowing me to evaluate usability and user experience in a practical and iterative way.

Explore the ordering flow in the interactive prototype. You can also open it directly in Figma.

Open in Figma

TESTS

Testing the Designs

I used the interactive prototypes during the testing phase, allowing users to interact and experience the process of placing food orders on the website. Before testing, I prepared a usability test plan to guide the focus and objectives of testing. I asked the 4 users to provide feedback, assigning ratings from 1 to 5 for the following criteria: ease of use, aesthetics and convenience.

An exploratory study with four people using the interactive prototype, carried out before the React implementation. The ratings describe that sample and that version of the design.

Table showing test results from the go vegan case study

Observations and Refinement

During the testing phase, I noticed that the representation of dish quantities in percentages was not so clear to users. In terms of convenience, they preferred units or grams, as they conveyed a clearer and more direct understanding of the quantities of dishes

I found it a little confusing at first when I saw the quantities expressed as a percentage. I would prefer to see quantities in grams or units as this would give me a clearer understanding of portions

Anita Carlos

CONCLUSION

Final Considerations

The clearest lesson was to question how quantities were presented. The prototype sessions exposed a problem with percentages; the later frontend expresses portions as explicit units and uses the same data to calculate cart totals.

The outcome is a researched design and a coded frontend demo. The four-person prototype study informed the interaction, while component tests exercise interface behaviour. Evaluating the complete coded flow with users remains a separate step.

Preview

Frontend engineering

Carry the UX decision into the data model

React and TypeScript structure the demo around reusable controls, an order flow and shared cart state. The unit of a portion stays explicit from the menu to the total.

UX decision → frontend

The same decision, from prototype to code

Observation
Percentages raised questions
Prototype participants wanted grams or units to understand their portions.
Decision
Make the unit explicit
Each dish has a unit, a base portion and a price, carried into the interface.
Implementation
Calculate from the same data
Each line total uses quantity × price ÷ base portion. Selection, summary and review share the same basket.

From observation to interface

The decisions behind the work

Make portions understandable
Observation
In the four prototype usability sessions, quantities expressed as percentages were confusing. Participants preferred grams or units.
Decision
Show a concrete unit beside the quantity and price: grams, plates or units, according to the dish.
What this led to
The React demo carries these units through food selection, the order summary and review. Prices are calculated from the quantity and the dish’s base portion.
See the portion-size refinement
Keep one basket across the steps
Observation
Food selection, review and payment all display the same order, while the review also allows changes.
Decision
Store cart items and delivery details in Redux Toolkit. The step components read and update that shared state.
What this led to
Changing a quantity or removing a dish updates the same basket used by the summary, rather than maintaining a separate copy for each screen.
Explore the implementation

A typed portion model
Each dish defines its unit, base quantity and price. This makes the display label and the price calculation depend on the same menu data.
Source code: A typed portion model. Opens in a new tab.
Shared cart state
A Redux Toolkit slice handles adding, updating and removing dishes, calculates each line total and stores delivery details.
Source code: Shared cart state. Opens in a new tab.
Validation close to the input
React Hook Form requires a quantity and checks the minimum portion for that dish. The input label and validation message include the unit.
Source code: Validation close to the input. Opens in a new tab.
Component tests
Vitest and React Testing Library tests exercise field errors, menu prices and units, and simulated account forms. These are separate from the prototype usability sessions.
Source code: Component tests. Opens in a new tab.

The demo’s scope

The basket is kept in memory and resets on reload. Account and payment interactions are simulated in the browser. The project demonstrates the frontend flow rather than a live ordering operation.

Other work

All selected work