Year / Timeline | 2022, 4 weeks

Project | More Foods Mart

My Role | Website Design, UX / UI Design, Branding Identity

Platform | Desktop | Tablet | Mobile

Team Member | Dionne Mok ( Web Design ), Janice Chen (Logo Design)

ABOUT

What is More Foods Mart

More Foods Mart is an online / physical authenticity grocery store that provides customers with a wide range of Asian foods and household items. The web experience aims to create a seamless shopping experience for users by offering a clean and intuitive interface with a focus on ease of navigation and product discovery. 

View live site →

My Role

Website Designer
My role as a website designer for More Food Mart is to provide customers with an easy and convenient way to order groceries online. The website has been designed to appeal to a wide range of users, from busy professionals to families and from tech-savvy millennials to older generations.

The primary goal of UX/UIUI design is to make the shopping experience as effortless and intuitive as possible. The design is focused on guiding users through the different stages of the purchasing process, from browsing products to completing a transaction.


design-process-mfm-2-min

More Foods Mart

- You can visit morefoodsmart.com for the launched website -

 

mfm-animated-video-1

 

Step 1 : Branding aesthetic

First we interviewed the business owner with a branding workshop to get a deeper understanding of the company’s identity. And here is what we recived...

More Foods Mart (MFM) is a new local business in Vancouver, BC, with a mission to create a memorable and meaningful brand identity. We didn't just want a simple logo – we wanted a cohesive color palette and tone of voice that would set us apart and resonate with our target audience.

To ensure consistency between our branding and website design, we worked closely with another designer and the client to create a cohesive and suitable brand. 

Tone: informative, inspiring, and trustworthy

Voice: friendly, approachable, and authentic

The tone and voice of More Foods are designed to build trust, establish credibility, and foster a sense of loyalty and advocacy among its target audience.

moodborad-fin-mfm-min
branding-fin-mfm
New-Artboard-Timeline-1

 

Step 2: Identify the Challenges

As a UX designer assigned to the More Foods Mart e-commerce website, one of my biggest hurdles was to develop a user-friendly platform for a new business that lacked brand awareness and customer loyalty.

Furthermore, with a wide range of over 100 products to be presented on the website, I had to find an effective way to categorize and organize them for easy access by customers.

The added complexity of catering to a diverse audience with varying cultural backgrounds and preferences was another significant challenge, given that More Foods Mart is a local Vancouver-based business.

 

Step 3: Web Design Phase

In the web & mobile design phase, I first did user and market research looking for similar platforms or solutions to deliver insights. I then sketched the wireframes and a clear sitemap to allow users to find relevant content with a nice visual flow.

After feedback rounds, testing, and iterations, I finally decided what the UX design focuses on and applied the visual language, logo, imagery, and colors to the interface.

wireframe

 

UX design focus on...

Grouxp-114

Intuitive Navigation

The website's intuitive navigation system enables users to easily locate desired products with a simple menu and accurate search function.

Group-116

Clean and Simple Layout

The website's clean and simple layout enhances browsing and product discovery, emphasizing high-quality images and clear descriptions.

Group-115

User-Friendly Checkout

The checkout process is user-friendly, with a streamlined layout that guides users through transaction stages and allows for easy addition or removal of items from the cart.

Group-117

Mobile-Friendly Design

The website is fully responsive and optimized for mobile devices, ensuring that users can access the site and make purchases from their smartphones or tablets.

 

Step 4: Key Findings # 1

On the Google Analytics within the 3 months after the website offically launched, almost 60% of the users are interacting with the sales page when they first visit the website. 

Solution

- Optimize the homepage to provide quick and easy access to sales and promotions, such as highlighting sale items, adding a prominent call-to-action, or using a banner or slider to showcase current sales.

- Personalize the website experience by tailoring it to visitors' interests and preferences, potentially through the use of cookies or other tracking technologies to display content based on their browsing and purchasing history.

 

finding-1
finding-2

 

Step 4: Key Findings # 2

Research shows More Foods Mart's target audience wants to buy Asian foods and household items both online and in-store, including diverse customers with varying incomes. Many online users live in areas with limited Asian grocery access.

Solution

Since most online users reside in areas with minimal access to Asian grocery stores, it's important to make the website easy to navigate and user-friendly. Which involve creating clear categories for products, implementing a search bar, and providing relevant product recommendations.

Reflection

Insights

 

The More Foods Mart web design project was successful, with improved functionality and design. A clear menu and mobile optimization made product finding and checkout simpler. Prioritizing clean and simple usability and visual consistency, while instilling trust, is key to e-commerce design. 

Simple and Clean Website design

A simple and clean design  helped to improve the user experience, increase customer satisfaction, and attract new customers to the business. By providing a clear and professional image, easy navigation, and improved loading times, More Foods Mart can create a positive first impression with customers, which can help to build a strong brand reputation over time.

 

If you link my work, drop me a line to say hi .If you link my work, drop me a line to say hi .If you link my work, drop me a line to say hi .

OPEN MAILBOX
dcmok@yahoo.ca

CONNECT

Trying to become a better designer everyday !

head-dm

Trying to become a better

designer everyday !

head-dm

© 2022 Dionne Mok - Designed with love and effort