Creating a responsive website for a retail store.

The Challenge:
Create a new logo and an ecommerce responsive website where Modas can sell their products online.

Goals & Objectives
Rebrand company with an updated logo and visual system. Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others.

View Prototype

Modas

Modas started back in 1994 as a clothing store targeting an audience looking for affordable yet fashionable clothing. Even though they’ve had great success with their many retail stores (400 locations), their e-commerce store has not seen that same success due to an outdated website with only information about locations, promotions, and a bit of background about the company.

Role

User Research, Strategy, Interaction Design, UI Design, Prototyping, Usability Testing

Tools

Sketch, Figma, Adobe Illustrator, InVision, OptimalSort, Zeplin

Timeline

2 Weeks | 80 Hours

1. Empathize

To be able to really understand all the different views, behaviors, pains and joys of e-commerce users we first have to empathize with them. In order to be able to able to do that, I first had to understand the e-commerce market and uncover what needs and frustrations the target user might have.

Market & Industry Research

I began by completing a market analysis as well as a competitive analysis. I collected all of Modas’s main competitors and then moved into looking at similar retail companies that run successful and profitable e-commerce websites. I finished by building out some provisional personas from the research gathered and by attempting to understand the shopping habits of those users.

Interviews

To better understand the pain points and goals of those who shop for clothing online, I developed an interview script and conducted user interviews with participants who fell within the provisional persona profiles I’d established. Due to the current state of our country’s emergency (COVID-19), I conducted most of the interviews remotely while practicing safe distancing with those in-person. Through the research, I was able to identify some needs, pain points, and motivations of these shoppers that were really helpful.

  • Number of interviews: 7 total (5 women, 2 men)
  • Age: 18–53
  • Interview duration: 15–20 minutes
  • Customers shop online at least twice a year
  • Shopped online for clothing within the last 30 days

Key Findings

  • Users need an easy to navigate website (filtering options and smart search)
  • Users need a good variety of clothing options
  • Users need size variety
  • Users need models that showcase different body types (not just one size model)
  • Users need alternative ways of paying (PayPal)
  • Users want free shipping and returns
  • Users want reliable reviews
  • Users want a way of finding the appropriate size fit (size chart)
  • Users care about personal security against fraud

Persona Development

After gathering all of the qualitative data from the research process, I decided to work on creating a user persona to help me identify with the users on a personal level. Alexis is the primary persona that emerged as a composite of my research findings.

Alexis is a young adult professional that loves to follow current fashion trends and values clothes that are good quality while still being affordable for everyone.

Empathy Map

I then created an empathy map made up of observations and statements from my user interviews as well as my primary persona. Doing so allowed me to gain empathy with the user and helped find patterns and key insights about their day-to-day experiences in relation to their purchasing decisions


2. Define

Research Plan

After all the research in the “Empathize” phase, I was able to collect a lot of useful data. I wanted to seek insight into what the user needs were as well as those of the stakeholders of the company. I then moved on into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations.

Project Strategy

With the project goals in focus, I created a product feature roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. It was important to learn a little bit about what the industry standards were for features in this space before moving forward. I performed an in-depth competitive analysis of features, products and services provided for all the direct competitors as well as the indirect ones.

Card Sorting

With the project goals established, I conducted an open card sort to get a sense of how users categorize clothing, shoes, and accessories. Using Optimal Workshop, I asked them to arrange 30 clothing items into categories of their choosing to get a sense for how users talk and think about clothing. After the conduction of the card sorting exercise, all the participants created a total of 37 categories with a median of 6 categories each. The Similarity Matrix below shows the results of the online sort and provides a quick visual read into how participants grouped cards together most frequently.

Key Findings

  • Participants mostly categorized items based on type of clothing and gender.
  • Another trend was the similarity of sorting for occasions. (Formal, Professional, Casual)
  • Three or more of the participants (out of six) created a similar pattern when sorting items into categories.

3. Ideate

Site Map

Based on the card sorting exercise and interview findings I was able to categorize my groupings effectively into a site map. The goal was to move forward with a navigation process that would be easy and familiar for the user to use.

Interaction Design & Testing

Before moving the design phase, I identified the main flow that the user will follow by creating a task and user flow. I started creating the user flow by thinking of an experience my primary persona might encounter when shopping online. I then mapped out the whole process from receiving an email to the flow throughout the site to achieve the goal. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.


Sketching

Based on the site map created as well as the user flow, I began with some quick hand-sketched concepts for the Modas home page. I wanted to make sure that I included all the key findings that have come out of my research and card sorting results.

Wireframing & Responsive Design

After solidifying a few ideas, I took the next step and created a few wireframes based on some initial UI product requirements I established. The goal was to focus on the buying process, from where the user arrives to the homepage to find a product they would like to purchase all the way to the checkout. I began wireframing some key pages informed by my user flow. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created three different responsive layouts for the home page utilizing a grid system for the desktop, tablet and mobile option.

Logo Design

One of the design goals for Modas was to have a fresh new brand and logo that spoke their brand message and values: having clothing accessible for everyone with good prices and a variety of styles. Modas brand is modern, clean, inviting, and confident. By staying true to these key adjectives of the brand, different logo variations were created and narrowed down to final and used version. I explored many different options but found that a simplistic route of using a modern typeface reflected better with our target audience.


Style Guide and UI Kit

Once the logo was created, I moved on to design a well-labeled and easy to understand UI Kit. I decided to go with a brand color that uses black and some tints & shades of the main color. There will be two secondary colors that could be used around the site for accents purposes but not as the main color.



4. Prototype & Testing

High Fidelity Wireframes

After creating the mid-fidelity wireframes for multiple pages, I created and frequently updated higher-fidelity wireframes with the UI patterns and components used in the UI Kit.

Usability Testing

My next step was to create a clickable prototype using inVision. I focused on creating three different scenarios that a user might go through, each with a task to complete. Before conducting the testing, I set to create a usability testing plan and checklist that included all of the information and goals I was looking to achieve. I recruited participants that fit the personas that I’ve been using throughout the design process.

Test Objectives

  • Observe how participants navigate throughout the new site to accomplish their goal
  • Test and see if participants get to the end of their tasks using different methods
  • Test to see if the website is user-friendly and easy to navigate
  • Identify any points of confusion for the whole process of purchasing an item
  • Get feedback from participants on the site’s usability

Tasks

  • Find a blue dress on sale (under $75), browse through the photos and add it to your cart and continue to checkout.
  • Apply filters (colors, price, size) and then select the vintage jeans that fit your budget (under $75).
  • Favorite the top you like and sign up for a new account.

View the prototype on InVision.

A total of 5 participants were able to complete this usability test, 3 women and 2 men. The participants range from ages 21 to 53 and they all shop online for clothes at least twice a year. 4 out of 5 tests were conducted virtually using Zoom and its screen sharing service, while the last one was done in person.

Key Insights

100%

of participants navigated throughout the site successfully

100%

of participants understood how to find a specific product > add it to the cart > continue to checkout

60%

of participants liked that the filters populate automatically when selected

60%

of participants used megamenu in main navigation first to explore other pages

Pain Points

  • 100% of participants did not think to hover over product photo section of jeans in the main navigations megamenu
  • Too many option styles for clothes
  • More female imagery throughout site than male
  • Initially didn’t realize there was more content in homepage under the fold

Affinity Map

To synthesize the results and observations of the testing, I created an affinity map as a way of interpreting and prioritizing my findings. I was able to find out where the pain points of the users were stemming from and what could be further improved. The affinity map to the left visualizes these results.

Priority Revisions

After completing the usability testing and affinity map, I went back and made revisions to top pain points the participants shared. (The final prototypes are shown earlier on this page)

Next Steps

With more time, I’d like to iterate further and develop more pages until I build a full site design. Once prototype testings are completed, I will use Zeplin to hand off the design to the developer team when I have made all improvements to the prototype.

Project Takeaways

Lessons Learned

I’ve learned the importance of the UX design process from beginning to end in a fast-paced way. From completing user research, information architecture, interaction design, user interface design, and iteration to implementation. I discovered the importance of user-centered design and how to make a better product through user insight and understanding.

What I Would Have Done Differently

After completing my mid-fidelity wireframes, I originally wanted to complete a round of prototype testing using those screens. I wasn’t able to gather all the participants needed for testing without hindering the turnaround time of this project. Instead, I decided to hold on and test for usability when I finished my high-fidelity wireframes. Looking back, I would’ve found those user pain points earlier and it would’ve saved time when it came to creating higher-fidelity wireframes.

Let's make something great!

Contact Me