1. empathizing.
mezze
responsive website
.png)
0. overview.
the brief
Mezze is a family-owned business that started in Lebanon and is now expanding into the United States. In the words of the clients, “Mezze is the example of persistence, grit and determination that marks every family business, even more, every Lebanese small business. It is a contemporary brand rooted in traditional recipes, homemade taste and utmost quality.”
Mezze is successful and well-known in Lebanon, but the client is aware that targeting the market in the US requires another strategy and another tactic. The client is considering implementing a marketing campaign to start the process of familiarizing the market with the brand.
problems
-
Mezze is new to the US, therefore the brand does not have a client base yet
-
Mezze has no online presence in the US yet
-
Mezze has no physical presence in stores yet
proposed solutions
-
A responsive website tailored to the local market
-
Content that appeals to those who are familiar with the Lebanese cuisine, as well as those who are not
-
Recipes on website to be updated monthly
my role
For this project, I was working on my own.
I fulfilled the following roles while conducting research, developing the brand, and designing the app:
-
User Experience (UX) Researcher
-
User Experience (UX) Designer
-
User Interface (UI) Designer
-
Interaction (IxD) Designer
-
Visual Designer
deliverables
-
Competitive Analysis
-
Interviews & Survey Results
-
Persona Development
-
Empathy Map
-
Project Goals
-
Feature Roadmap
-
Content Directory
-
Wireframes
-
UI Kit
-
Usability Testing & Analysis
-
High-Fidelity Interactive Prototype
project specs
-
date: June 2022
-
duration: 2 weeks
-
tools: Figma, Figjam, Illustrator, Whimsical
methodologies
Primary Research | Surveys
Participants:
-
Users who shop for food whether online or in store and/or
-
Users who like to try new foods and/or
-
Users who support small family-owned businesses
Secondary Research | Competitive Analysis
Brands:
-
Afia Foods
-
Kettle & Fire
-
Brew Tea Co.
-
Big Tree Farms
research goals & objectives
-
Understand what drives the buyers to buying a product
-
Define what turns a buyer away from completing the purchase of a product
-
Define what brings the buyer back to repeatedly purchasing a product
-
Understand factors that may stop a buyer from repeating an order
-
Evaluate the relationship between the brand history and the likelihood to buy from that brand
risks & assumptions
-
We assume that people are familiar with Lebanese food
-
We risk not finding people who like to buy frozen foods online
-
We risk not finding individuals who like to buy new brands without trying them first
-
We assume that people like to buy from small family-owned businesses
-
We assume that people are more likely to buy from a brand if they know its history/story
research summary
(3/9) - mentioned Trader Joe’s as their go-to brand
(3/9) - said that the novelty of the item attracts them to buy it
(3/9) - said that they rely on reviews to try a new brand
(4/9) - said that packaging plays a role in their decision to buy
(5/9) - said that the story behind the brand is not very important, but if headliners are obvious on the packaging then it would encourage them to buy (black-owned business, women-empowering...)
(5/9) - said that quality of ingredients draws them to the brand
(6/9) - said they are very likely to try a brand they do not know
(6/9) - mentioned that they have foreign/ethnic cuisine weekly
(6/9) - mentioned that buying food online scares them because of the quality in which the food would be delivered
(6/9) - said that if a new item is not available in store, they would need to try it before buying it online
(7/9) - said that they prefer to make food at home
findings
Shared goals:
-
Have healthy foods on the go
-
Be mindful about the environment when purchasing
-
Supporting a cause with the purchases
-
Have access to quality ethnic food products
Shared needs:
-
Products with quality ingredients
-
Brands that are trustworthy
-
Packaging that is environmentally friendly
-
Brands that are at an affordable price range
-
Novelty food items that are easy to prepare
-
Recommendations that they can rely on for new items
Shared pains:
-
Brands that change their prices after initial launch sale
-
Brands that do not have ingredients they are familiar with
-
Brands that use too much plastic in the packaging
-
Price range that is not affordable
-
No quality-price balance
-
Ordering food online is a gamble
meet our first persona, amer
-
age: 33
-
occupation: government worker
-
location: washington, dc
-
status: single
-
archetype: the melancholic expat
motivations
health
social
environmental
growth
financial
identity
personality
extrovert
sensing
thinking
judging
▪
▪
▪
▪
introvert
intuition
feeling
perceiving
tech knowledge
internet
software
apps
socials
▪
▪
▪
▪
goals
-
Have healthy foods on the go
-
Contribute to the healing of the planet
-
Find quality foods at affordable prices
-
Support a cause with purchases
needs
-
Food that reminds him of his mother’s cooking
-
Brands that are affordable but offer quality
-
Packaging that is appealing and attractive
-
Clear idea of the ingredients in a product
-
Packaging that is environmentally friendly
-
A guarantee of quality when ordering food online
frustrations
-
Purchasing online does not guarantee quality
-
Brands that overuse plastic in packaging
-
Quality Lebanese food products are expensive
meet our second persona, sarah
-
age: 46
-
occupation: stay-at-home mom
-
location: washington, dc
-
status: married
-
archetype: the culinary explorer
motivations
health
social
environmental
growth
financial
identity
personality
extrovert
sensing
thinking
judging
▪
▪
▪
▪
introvert
intuition
feeling
perceiving
tech knowledge
internet
software
apps
socials
▪
▪
▪
▪
goals
needs
-
Brands that offer novelty and quality
-
Packaging that is appealing and attractive
-
Clear idea of the ingredients in a product
-
Accessible recipes and pairing options
-
A guarantee of quality when ordering food online
frustrations
-
Purchasing online does not guarantee quality
-
Lack of transparency with brand's process or ingredients
-
Not always sure what to pair new items with
2. defining.
project goals
As a result of analyzing Business Goals, User Goals, and Technical Considerations, I came to the conclusion that some important shared goals are:
-
Establishing brand trust
-
Creating a returning client base
-
Products of high quality
-
Delivery services that preserve quality
-
Seamless and secure checkout process
.png)
product roadmap
Based on the interviews, the research, and the project goals, I put together a Feature Roadmap to outline what the MVP (minimum viable product) would look like, and what extra features can be added in the future or based on the team’s workload.
content directory
Since the information architecture of the site is fairly simple, I proceeded to create a content directory to outline and detail what each page will contain. For a closer look you can go here.
sketching
wireframing
-
Homepage
-
Products list page
-
Product details page
-
Shopping Bag page
-
About page
Note: Changes were made to the wireframes as the UI was further developed and testing was conducted. For a closer look, you can check out the wireframes here.
putting it all together,
and then some.
Mezze's UI Kit will be very important once we take the next step and move our designs to a live website.
The UI Kit has details about:
-
Colors
-
Typography
-
Navigation
-
Mezze Things
-
Buttons
-
Forms
4. prototyping.
.png)
.png)
.png)
.png)
.png)
5. testing.
testing goals & objectives
parameters
-
Test and validate the ease of use of the navigation, icons, buttons throughout the site.
-
Test and validate the ease of understanding of the flows.
-
Observe how the users interact with the functionalities.
-
Observe and make note of any hesitation, confusion, or feedback from the user.
-
There were six testers for this prototype
-
The participants were tasked with completing four tasks
-
The tests were not moderated, done through useberry.com
-
All testing sessions had screen and audio recordings
suggestions
(4/6) - rename "shop" to "products" for clarity
(4/6) - make icons of Values on mobile smaller
(3/6) - add photos of packaging to the homepage
(2/6) - make the icons' background white
(2/6) - remove the "sort by" since there are not many products yet
(2/6) - add reviews section to help consumers decide
(1/6) - add "total number of items in bag" to the bag
metrics
Test Completion Rate: 100%
6 out of 6 participants completed the test successfully
Error Free Rate: 100%
There were two flows that the participants were asked to complete: searching for an item and completing purchase, and accessing previous order details.
8 out of 8 participants successfully completed both tasks.
summary
Overall, the general sentiment was that the website was well designed and clean, with photos that are very inviting and makes the user want to buy the product.
6. planning.
next steps
The first steps of the website are solid and approved of. The client is working on gathering material such as photography and some copy for the website. As the new material arrives, I will be replacing the existing media and making amendments as needed.
more details
-
Replace photos of the product with packaging photos
-
Collect and add reviews to the product boxes as well as the product detail pages
-
Design and develop the Recipes page once the content is delivered by the client
-
Begin integration of the design into the client's chosen website hosting service
-
Run a set of usability tests before soft launch
-
Run another set of usability tests after soft launch
-
Account for and handle any bugs and malfunction
-
Update portfolio with new website!
.png)
.png)
