Maido Website Redesign

Project Summary & Background

Maido is a Japanese goods store, based in the US. They are known primarily for their Japanese stationery, however they also have other goods, like food, toys, accessories, and home goods.

The goal of this redesign was to create a browsing and searching experience that is intuitive and organized well enough so that customers feel welcome to browse the site, or search for specific items. I found the design solutions by running a series of user surveys and tests, which then informed me what specific things needed to be redesigned to make the website more accessible.

Time: Three Weeks

Tools Used:

  • Figma

  • Optimal Workshop

  • Zoom

  • Maze.co

  • G Suite

My roles in this project included:

  • User Experience Researcher

  • User Experience Designer

  • Visual Designer

Double Diamond Design Process

For this redesign, I used the Double Diamond design process, which includes the following steps:

Discover: User behavior, and start the design process through user research, and the user’s mindset and perspective

Define: Idea generation based on research

Develop: Creating visuals and wireframes based on ideas

Deliver: User testing and design iterations

Using the Double Diamond Design Process helped me organize the research information because this process puts an '“…emphasis on the ‘“divergent”’ and ‘“convergent thinking”’, where first many ideas are created (in Discover and Define), before refining and narrowing down to the best idea (Develop and Deliver). This is happening twice in this model—once to confirm the problem definition and once to create the solution” - Maciej Lipiec from uxdesign.cc

*Note: image on the right from “Double diamond: A design process model” from wiki

Discover

Initial Research

As a part of the “Discovery” process, I conducted a user survey using Google Forms to try understand what users would find difficult about navigating the initial Maido website (seen below). There were a total of seven users that completed the survey, and here’s what I found:

*Screenshot of Maido’s home page, taken June 8th, 2022

When the users were shown the home page above, one of the questions that was asked was if the categories in the top navigation was clear enough for them to explore. Twenty percent of users said “yes”, while the other eighty percent said “no”.

After, the users were asked which categories they would be hesitant on selecting, eighty percent of users picked the category called “Feel Japan”, and forty percent picked “Munchies”.

User Interviews

To better understand what folks purchased at a store like Maido, I started conducting user research interviews to find the out the following:

  1. What specific items they would and consider purchasing at a Japanese goods store.

  2. What they value when looking at and purchasing items from a Japanese goods store.

  3. Is there a price difference when buying items from a Japanese goods store? If so; is the price worth it - and why.

From these interviews, I was able to determine that:

  1. When it comes to shopping at Japanese goods stores, all users prioritized shopping for stationery before anything else.

  2. Two of the three users said that besides stationery, they would look for “unique” goods, that would be hard to find elsewhere.

  3. All users said that Japanese goods stores are usually more expensive than your typical store, however the uniqueness and quality of the goods makes the price increase worth it.

Define

 

Defining the Problem

From the research conducted, I was able to define what the problem was. It was clear that some of the categories that were in the universal navigation weren’t well grouped. That, in turn, made it difficult for users to find what they were looking for, which could cost Maido some online sales. Making their categorization terms more clear could increase the number of visits to their site, which could lead to more sales.

I also concluded that users who love Japanese goods enjoy going to primarily browse in stores like Maido to look for high quality stationery goods. They would consider looking at other goods on their website, however (though the user surveys), I found that some were too hesitant because the names of the sections online aren’t descriptive enough for them to click on and browse through. To summarize, I came up with two “how might we” statements to better summarize and focus on what parts of the site needed fixing:

 

“How might we organize the site so that users feel comfortable browsing the site?”

“How might we make the website intuitive enough so that users can find exactly what they’re looking for?”

 
 

Develop

Site Map

To help develop the redesign, I conducted a card sort study using Optimal Workshop to see what categories users would come up with when given names of specific items. I knew from what I learned from my card sort activity that (compared to the original site) there were some group names that didn't make sense. Producing this site map gave me the opportunity to lay out where specific categories would go, which then in turn informed me of what the user flows should look like.

 

Personas

Since one of the main challenges of this site was to categorize their items so that it was intuitive to the users, I created two separate personas using Figma, to better reflect potential user’s needs. The Primary Persona (Lisa Tran) would use the Maido website to purchase stationery for her work, and the Secondary Persona (Mika Hashimoto) would use the site to purchase other things, like home goods and snacks for her mother who recently came from Japan. I based these two personas on my user interviews, as all interviewees expressed that they would primarily buy stationery at a place like Maido, while the other Japanese goods came second.

*Definition of Personas: Fictional characters created to represent a user type that might use a product. Personas

Primary Persona - Lisa: Lisa was based on the main thing that all users would primarily purchase, which is stationery.

Secondary Persona - Mika: Mika was based on the other things that the users said they would consider purchasing at a Japanese goods store.

 

Deliver

Low Fidelity Wireframes

Using Figma, I created these low fidelity wireframes are some of the initial sketches of what I thought the home page, category page, and product description page should look like. The categories up at the top are now different, to better reflect the categories that the users who performed the card sort produced.

These wireframes helped me map out what the high fidelity prototype should look like. During this process, however, I could also tell the the global navigation, combined with the site logo, search bar, contact information, and cart were too cluttered. In order to fix this I had to find a way to combine some categories (so that I would end up with seven instead of eight), and also had to organize the icons in a way that layered, so that everything would fit (this is shown the High Fidelity wireframe).

Low Fidelity Wireframe - Labeled

This is what I thought the homepage would initially look like (although this ended up being changed later).

High Fidelity Wireframes

From the low fidelity wireframes, I produced these high fidelity wireframes, which looks like the low fidelity prototype, however this iteration provides more details, like colored images of actual products. This was done so that when users test this version, they were able to interact with this site like a “real” website. Some users have never interacted with products that aren’t high fidelity, so performing user tests this way causes less confusion for the users, and gives me more genuine feedback.

High Fidelity Prototype - Labeled

The high fidelity looks very similar to the low fidelity wireframe, however I decided to change a few things:

  1. The search bar became a search icon instead to make the top navigation bar less cluttered

  2. The main part of the website actually shows more categories than “actual highlights” I thought this would be a better use of the space, especially from my users Lisa and Mica’s perspectives.

Usability Test Results

  • Once I developed some clickable low fidelity wireframes, I then performed virtual user tests using Maze.co, to see how intuitive the redesigned website was to use. I wanted to make sure that users were able to find what they were looking for, though multiple methods, like using the top navigation, and the search bar. The following were the parameters that determined how successful the users were at completing my test:

    • The total number of users who completed the tasks given (through direct or indirect means).

    • How long it took each participant to finish the tasks (<2 minutes per question would be considered a success).

    • The users responses to the questionnaire ares given at the end of the user test.

  • I had five users take my test, and the following were my user test results:

    • 100% of users completed five out of the six tasks given through a direct or indirect route.

    • Last task had 80% completion, but 20% of users exited out of the app.

    • In tasks 1-5, 100% of users completed the tasks under a minute.

    The following were the questions and the results:

    Question 1: How’d it go? Was it easy to complete the given tasks?

    Result: On a scale of 1-5 (1 being very difficult, and 5 being very easy)

    • Two users rated it a 4 out of 5.

    • Three users rated it a 5 out of 5 for difficulty.

    Question 2: On a scale of 1-5 (1 being non intuitive, and 5 being very intuitive), how intuitive was the organization of the website?

    Result:

    • 20% of users rated it 3 out of 5.

    • 20% of users rated it 4 out of 5.

    • Rest of the 60% of users rated it 5 out of 5.

Reflection

I am overall really happy with the results, although there are some caveats that I want to take into consideration:

  • Even though most of the users finished the tasks, at least on user exited out of the app completely. This is definitely something worth looking into, and maybe redesigning in the future.

  • The results for question number two (in the questionnaire) has me a little concerned, around 20% of users rated the intuitiveness of the website a 3 out of five, which is also something to look into. I would love to reconnect with those users and ask what about it was unintuitive to them.

For the project itself, here are the things I would do as next steps:

  1. Go back and retest the last task, to see what went wrong for some users.

  2. Perform another card sort, and see where more folks would organize items in specific categories.

  3. Have more people test the redesigned website.

  4. Build out the “About Us” page, and have a page for all the employees, so that users can learn more about the staff on a personal level.

  5. Overall, I had a lot of fun doing this project, although overall it was really challenging. I initially couldn’t find anything to fix about the website, until I performed an initial user survey. From there, I knew I almost had to redesign the entire website, which was definitely more work than I thought it would be. This project taught me that more redesigns/reiterations should be performed more throughout the process, so that the finally product will better reflect all of the insights obtained from the user tests.