Mitsuwa (Copy)

overview

Due to the pandemic, more people are ordering groceries online. Mitswua, a Japanese grocery store chain that has a few locations across the US currently only offers in-store shopping. The goal is to implement an e-commerce feature on the existing website while maintaining the brand integrity of high-quality products. 

process

Users want a convenient and quick way to order high-quality products

I conducted four user interviews with participants that have shopped at Mitsuwa before. My goal was to understand why they buy products at Mitsuwa, as opposed to other grocery stores nearby, and to also gain insight on what they liked and lacked from their previous experiences with shopping online.

comparative & competitive analysis

I conducted a competitive analysis on 3 other Asian grocery stores to evaluate their information architecture to get ideas on how the competitors structure the products. 

During the interviews, users mentioned that they frequently shop at Target and Amazon because of the quick checkout since their information is already saved in the system. I conducted a task analysis on the checkout flow of their websites so I could get inspiration and incorporate some of their processes into my design.

Amazon

1. Open Amazon website on browser.

2. Search for item in the search bar. 

3. Add item to cart. 

4. Click checkout.

5. Change shipping address and payment method.

6. Review items and choose shipping method. 

7. Place order.

open card sorting

110 cards | 10 participants 

I began card sorting by creating cards in Miro for around 110 products from Mituswa’s inventory and included the product images and names. I recruited 10 participants to conduct open card sorts and had them rearrange the cards into groups and create their own categories that they think best fit the products. I did open card sorting first to better understand how users would group the inventory, which would inform how I developed the information architecture for the website. 

Key Observations

• 70% of users organized the items with more detailed categories (16 - 28 groups)

• 30% of users organized the items with generalized categories (12 - 15 groups)

The participants took on average about 30 minutes to group similar items together and create categories.

closed card sorting

Based on my findings from the open card sort, I proceeded to conduct three closed card sorts using the categories I took from the open card sort. Since I did not want to clutter the secondary navigation on the main menu, I decided on categories that were more generalized and use those for the closed card sorts.

The closed card sorts went more quickly than the open sorts and took each participant on average of about 15 minutes to complete. The participants grouped each item similarly which told me the categories that I took from the open sort would be easily identifiable by users.

site map

Once I had the card sorting completed and determined the information architecture of the primary and secondary navigation, I put together a revised site map based on the data I gathered from the closed sort.

persona

From the persona, a problem statement was created:

Cathy needs an efficient way to order groceries for delivery because she wants to spend more time with her family.

user flow

From the persona and problem statement, the user flow for product discovery and checkout flow was developed.

sketches to wireframes

From here I was able to sketch out the flows and start to develop a set of low-fi wireframes to play with different ideas. I took inspiration from the other retailers that I had looked at during the competitive analysis. 

I iterated on my sketches and created mi-fi wireframes in Axure. Then, I started prototyping the wireframes together based on the user flow and sitemap.

Key features that I added:

• Mega Menu - lists the general categories

• Side Menu - breaks down the general categories into more specific categories on the shop page

• Related Items - suggest related products that users may be interested in

• Quick Add - allows users to add products into the cart without clicking into the product page

• Featured Products - lists popular and/or new products that customers purchase

usability test

4 participants | moderated | via Zoom

I gave the users a set of tasks from the product discovery to the checkout process.

1. Log in to your Mitsuwa account.

2. Add ingredients to make curry into your cart.

3. Checkout and set the delivery to Friday morning.

All of the users were able to navigate through the whole process and complete the tasks. However, there were a few issues that users had trouble with and were not able to complete the task on the first try.

• 50% of users were unsure that the product they added to the cart did in fact get added

• 50% of users had trouble locating the curry box mix on the first try

prototype

next steps

• Conduct more user interviews focusing on users who order groceries online to understand their pain points and behaviors 

• Conduct more card sorts to further flush out the categorization of the inventory since users had trouble locating the curry box mix

• Create a high-fidelity mockup with the recommended changes and conduct usability test 

• Build out the product pages more thoroughly to add more product details 

takeaways

This project helped me gain exposure to the full research and design methodologies. It was a great way for me to build on my skills in information architecture. Being able to easily navigate through a website is crucial for allowing users to perform their tasks with the least amount of effort; which in turn creates a pleasant experience for the user. I also learned more about myself as a UX designer. My biggest challenge I faced was learning to let go of perfection and to embrace the iterative learning process.