V-Mart Case Study
Project length: June 5 - June 26 (Roughly 3 weeks)
Position: UX Researcher & UI Designer
Project Objective: Design and create a responsive website for an online Vietnamese grocery store.
Programs used: Figma, Optimal Workshop, Google Office
Introduction
Background
As a child of Vietnamese immigrants, I’ve realized the effects that diaspora has had on our people. I’ve seen Vietnamese individuals and families scattered all across the country, Some people have had to relocate to rural areas where there aren’t any Vietnamese markets around for miles. As a result, they’ve had to assimilate in their new homes, but the longing for their food and culture has not faded.
Problem
I wanted to find a way for people to experience Vietnamese food either for the first time or once again. Whether someone lives in a rural or urban area, Vietnamese markets are not overly common. It can be hard to find certain foods and ingredients. How can I design a responsive site for users of all ages to be able to use and order Vietnamese groceries to their convenience?
Research Goal
I’m certain that due to the pandemic, people have been more inclined to order groceries online. I’m looking to discover which sites are most commonly used, any desired flows, or any complications, frustrations, or slowdowns someone may have had when ordering groceries online.
Research Findings
I set out to do some research. What were some companies that were commonly used? Are there companies out there that are similar to V-Mart?
I learned that there were companies out there that were Korean specific or Japanese specific.
I learned that there is indeed a niche or a need for V-Mart. I just needed to find out what worked well and what didn’t work amongst these competitors.
Using the information that I gathered, I could implement them into my designs.
User Interviews
I then sought out to interview people whose experience and familiarity could improve and enhance V-Mart’s status. Here are a few things that I learned:
- The common companies like Amazon Fresh or InstaCart do not have a lot of Asian specific items. Their selection of Asian groceries are very general and minimal, which can be very discouraging for certain people.
- There is just as much of a need for those in rural areas as those in urban areas. People living in rural areas don’t have access to Asian supermarkets or they are either too far away and lowly stocked. Those living in urban areas are often busy working and don’t have time to shop, or their markets are also lowly stocked.
- Shipping fees or delivery fees can be discouraging sometimes, especially when you pay a high fee, but the delivery came out wrong or the condition that the item in was poor.
Creating a Persona
Once I gathered all the information, I started working on a persona. I’d like you to meet Billy!
Project Goals
At this stage of the project, I needed to identify the user, business, and tech goals. Using a Venn diagram, we established the common thread amongst the three.
Feature Roadmap
I observed and analyzed each of the competitor’s sites to note which features were a MUST-HAVE and compiled them into a list.
Most sites operated in the e-Commerce style of websites.
Sites consisted of recommending the user to make an account, favoriting items, and high quality images of the product.
There were some sites that had too much information overload so I wanted to steer away from that.
Sitemap
Next up was to design the sitemap. I asked myself, what would the simplest navigation bar look like? I broke it down to the barebones of most navigations bar and was able to create the following.
Creating User Flows
I then needed to establish what would be the main flows for this website. I noted that when a user is visiting a website, they either have something specific in mind that they are going to purchase, or they are going to browse until they find something of their liking.
The first flow I created was if a customer used the search bar and entered key words to find their specific item.
The second flow I created was the different possibilities if a customer were to browse and then eventually find an item.
Low Fidelity Wireframes
The next task was to create a set of low fidelity wireframes for both desktop and mobile. I used Figma to create the barebones of what I was envisioning.
UI Design Elements
Once I had the low fidelity wireframes, I needed to build upon my foundation with UI elements.
I wanted to implement colors like red and yellow because those are the colors of Vietnam. I used black, white, and gray as tertiary colors.
As for the logo, I wanted a font that had an Asian aesthetic. I stumbled upon the “gang of three” font and ultimately decided that it was the best fit for this site.
The icon set that I chose was simple and minimal. Originally, I wanted the icons just to have a black outline, but looking at it again, I felt that it needed color.
Testing
Once I incorporated the UI elements into the low fidelity wireframes, I officially had an initial draft of my hi fidelity wireframes. It was time to test. I created a test that consisted of 2 tasks. I recruited 5 participants that were within the demographic of my persona and observed as they carried out their assigned tasks.
- All 5 of the participants were able to complete the 2 assigned tasks on both the desktop and mobile site.
- Some feedback and suggestions were given, which I applied in the iterations phase of the project.
Iterations
The general feedback was helpful and positive. Not a lot of iterations needed to be made. As seen below, I made changes such as:
Adjusting font size
Removing the thick black outline that consisted throughout the pages.
Using a lighter gray outline for a softer touch.
Condensing the footer into 2 sections.
Final Product
Reflection
All in all, this was a very enjoyable project for me. I am very thankful for the feedback I received. I do feel like this site could be useful for not only Vietnamese people, but also people that are interested in Vietnamese culture and cuisine. I am constantly learning as both a UI and UX designer and this project has given me more confidence that I can bring with me on my designer path.