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)
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.
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.
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.
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.
UX design focus on...
The website's intuitive navigation system enables users to easily locate desired products with a simple menu and accurate search function.
Clean and Simple Layout
The website's clean and simple layout enhances browsing and product discovery, emphasizing high-quality images and clear descriptions.
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.
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.
- 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.
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.
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.
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.
Trying to become a better designer everyday !
Trying to become a better
designer everyday !
© 2022 Dionne Mok - Designed with love and effort