Easy to use responsive ecommerce website 

How to make the mobile version of the site easy to navigate so that the purchasing process would take the minimum amount of time?


Discovery

Project overview

The client, a large clothing retailer Shine,  needs a responsive website from scratch that would speak to its diverse customers. It should have easy navigation and a good filtering system, at least by color, size. The company’s goals are to increase sales, retain customers and get rid of unsold inventory. The initial challenge for me is that Shine is fictional as this project is part of Desinglab’s UX Academy, and there are not many details about this business. So I asked myself who would shop at a website that sells “good quality affordable clothing” for men, women and children?

Finding Shoppers

I researched the online shopping trends and found out that 71 percent of all women and almost half of men shop for clothing online, more than any other category of goods. People between 25 and 44 account for 34.7 percent of all digital buyers. Since the people in this age group are more likely to have small children, I thought it was safe to assume that many of the online clothing shoppers are parents, more likely mothers, who are buying things not only for themselves, but for kids as well. This narrowed down the group of buyers and I went on to find out about their shopping habits.

User research

The goal of the initial user interviews was to find out what creates the best and the worst online shopping experience.

Research Objectives 

1. Determine why people would shop at a retailer’s website

2.     Understand what constitutes the best shopping experience that creates loyal customers. 

3.     Find out what are the most common pain points of the online shopping experience

4.     Understand how shopping online  fits in people’s life

Participants

I recruited 5 participants who were parents, in the 24-44 age group, four females and one male, they all had median income. We talked about their shopping habits, their recent experiences and they also showed me how they look for an item online.

 The insights

  1. Shopping online is more of a chore than pleasant pastime, they want to be done with it fast.

  2. Users shop on their mobile phone more often.

  3. Shoppers want to see immediately where they can look for certain items.

  4. Users are frustrated when they get too many or irrelevant search results because there are not enough filters.

  5. Study participants said they are reluctant to shop at site where information about shipping fees and dates is not clear straight away.

  6. Users shop online when they know the size and the fit, or when they can understand their size from the description, the model’s size.

  7. Modal windows with sign up requests or advertising frustrate users, but banners are ok.

  8. Users do not want to fill in too many forms when they are checking out.

 Persona

Based on the user interviews I was able to create the persona.

 Competitive research

  • $ 16.2 bn sales in 2020

    Zara’s production model allows it to react faster on trends, but its supply chain creates problems with enough inventory in its 2,270 stores.

    The company said it is focusing on creating in-store experiences such as AR- enabled windows. Users criticized its website however as confusing because of its unusual navigation.

  • $20.1 bln sales in 2020

    The company’s inventory is large and diverse, it often offers items cheaper than its direct competitors.

    H&M was criticized for the lack of sustainability in its production, now it has a special section on its website highlighting its efforts. Users said the website has very good navigation. The company has 5,000 stores worldwide.

  • $15 bln sales in 2020 (parent company)

    The company has been haunted by the image of being the cheaper version of Gap for years. It is trying to distinguish itself from the parent company.

    The users like the variety of sizes it offers, as well as discounts. They find the navigation easy, yet they say they are overwhelmed with the search results that often show irrelevant items. The company has 3,000 stores.

 Creating the Website’s architecture

I wondered what would the best way to show the wide range of retailer’s merchandise? I collected the titles of the most common items that appear in each collection and organized open-ended card sorting through Optimal workshop. The participants had to group items in categories and give a title to the category. They were instructed that they can create as many categories as they want. The participants said that the biggest challenge for them was placing what they characterized as office outfits. They wanted to have them in sections according to the type of clothing, but also wanted to be able to find outfits for work easily.

 Defining

How can we help users buy easier and faster?

After collecting all the information I sat down to think how we might make the mobile version of the website easy to use? 

Users said that they were comfortable using the menu icon on the phone, but I thought what if there was something that could even make it easier for them to shop than going through the menu. My research showed that users buy things online when they know the brand, its quality, and are  usually looking for a specific thing, so clear navigation that would take them should be the focus of the front page. It should also offer different variants of how to search so that people with different preferences could do it easily.

Site map

The site map can be viewed in the Figma file

Task Flow

I recreated a typical task flow that my persona would follow. Amy needs to buy leggings or pants for her daughter who is growing very fast. She has a few minutes after she finished her lunch before she is to get back to her work.

Designing

Page layout

When I was making sketches I was keeping in mind that the users needed to be able to navigate the page fast. I started doing mobile and web-versions simultaneously. I gave lots of consideration to where I should put the banner with information about shipping and whether I should use carousels because the combination of swiping and scrolling may be inconvenient to users. I was also concerned that if users had to go though several pages of search results to get to the desired item and they had bad signal, that would cause pages load longer and frustrate users.

Logo and colors. 

The company didn’t have any preference regarding the color palette or its logo. I went on to ask myself and other people what the word shine can be associated with. The most frequent responses included “shine like a star,” “sunshine.” So I incorporated the star in the logo and sunshine in the color palette.

Testing the prototype

The prototype was tested by five people, two of them matching the persona description. Their task was to purchase a white office blouse. It was a moderated test that they all completed under 10 minutes. Each of the participants started the search according to their preferred way - two clicked on women section, two went to the menu button, and one used search.

 Analyzing the test results

The test showed that all participants were able to complete the task and said the navigation was clear to them. I created an affinity map that allowed to see the following insights.

Participants said they needed more filters, especially the ones for material and price.

  1. Participants want a way to see the pictures in more details

  2. Participants need more detailed information about the sizes.

  3. Participants want to see reviews sooner

  4. Participants would not read large descriptions of the text

  5. Mobile version of “Women” page should have the list of categories higher

 Changes made to the design

Besides conducting the prototype test, I conducted an A/B testing of the colors and design elements of the front page. Although the ray of sunshine seemed like an interesting and eye-catching element of the design, I had to let it go because too much yellow had an impact on how the users perceived the colors of the outfits that were viewed. I also made the following changes to the design.

  1. Added heart icon representing the list of liked items to the top navigation and changed the way the titles are shown on the pictures. The first version in on the left, and the iterated version in on the right.

2. I added additional filters.

3. Most changes were made to the page showing an item. The description was made shorter because users said they are unlikely to read lots of text. The information about the materials and sizes was made into a separate section. ‘You may also like section was turned into a carousel because users said they wanted to get to reviews faster.

The details of the project can be seen in this Figma file

 Summary of the project

My assignment ended with the creation of the iterated versions of the pages. If that project continued, I would design and test several flows, for example, sign-up and check-out ones, or had users do other types of tasks. I would do the tests with low-fidelity prototypes, to focus more on the structure of the pages. While I would be doing it, I would consult with developers so that we could see if there are any limitations that would not allow us to implement the design.

This project showed me how the initial interviews with users impact the overall process of the project. As I worked on the project, I made a list of questions I should have asked users during the first interviews.