Building a Responsive Ecommerce Website

Additional Note

This was a project I completed during DesignLab’s UX Academy Certificate program. Mirror is a fictional clothing retailer but the design is original work based on real user research.

Research

While ecommerce is an extremely mature industry with well defined design patterns and interactions, it was still important to conduct research to further understand the competition, the consumers, and to validate assumptions.

To make sure that Mirror’s new site would look and feel like a modern day ecommerce website, I began my research with a competitive analysis. I focused on design patterns, color palettes, typography, tone, and style.

User Interviews

After identifying the common design patterns used throughout the competitions sites and how each brand positioned themselves to their customer demographic, I used the user interviews to help empathize and understand users pain points, needs and desires. This exercise helped further define the what would differentiate Mirror from the competition.

Interview Conclusions

• Online shopping is done for convenience, but if shipping/returns create a hassle then its no longer convenient.

• Online shoppers lack confidence that the items they purchase will fit if they are unfamiliar with that item.

• Consumers frequently shop with brands they trust, which stems from good customer service, easy and convenient return policies, a plethora of clothing choices and quality-made clothing.

• Shipping and Returns must be fast, easy and most importantly free.

• Price is extremely important when it the consumer is making purchase decisions. Sales greatly influence final purchases.

• An efficient checkout process helps consumers complete the purchase process.

• Users like wish they could shop by season or function. They want to shop for/see whole outfits and not individual pieces.

Information Architecture

Having gathered data from competitor research and user interviews, the next step was to consider how to organize the site. This was a critical step as an ecommerce site must be easily navigated to help users achieve their goals as well as the goals of the business. While my user interview conclusions directed me to organize the site in a non-conventional form, I wanted to see how other consumers preferred shop by using a card sorting exercise. The goal of this would be to validate or discourage a more non-conventional design.

Card Sorting

Sitemap

Based on my research, consumers desired a way to shop by activity/season. To differentiate Mirror from the competition and appeal consumers similar to my interviewees I added a Look Book page to the sitemap. This purpose of this page would be to showcase whole outfits based on activities and seasons.

Interaction Design

I mapped out a user flow to showcase potential customer interactions with the site to aid in designing the wireframes and prototype.

Key Design Decisions

• Contrary to some of my research results, I opted to follow existing design patterns to create a more functional ecommerce website, while considering how to mix in elements of shopping by season or activity throughout the site.

• To appease the consumers who prefer to shop by look, I added various elements throughout the website to promote that style of shopping. For example there is a “Shop the Look” section on the product page as well as “suggestions” on the

• Filtering options were a major necessity for consumers, so I focused on designing a robust filtering experience via an accordion menu.

• Consumers wanted more details regarding the description of the item, fit of the item and what size the model was wearing along with their dimensions. To accomplish this, I utilized a sliding menu to house all of these details. The sliding menu was chosen to reduce the amount of space the information would take up.

• Detailed reviews with sizes and images and additional information about the clothing and model were important elements for buyers to have more confidence when ordering an item, so I designed a robust reviews section with all of the pertinent details.

Desktop - Low Fidelity Wireframes

Mobile & Tablet - Low Fidelity Wireframes

Design

Since Mirror wanted a brand refresh, I started with a mood-board to generate ideas for the vibe of the site and then sketched multiple logo ideas. After the logo was finalized, I utilized the mood-board to construct a style tile complete with color and typography selections.

Logo Design

Visual Design Direction

High Fidelity Wireframes

Test & Iterate

Usability Tests

Iterations

Key Learnings + Next Steps

Key Learnings

Listen to the User Research & Validate Assumptions. Assumptions can jumpstart a project on a tight timeline, but you must validate those assumptions. One of my assumptions, which turned out to be incorrect was that consumers would want a personalized shopping experience. After conducting user interviews I found out that many shoppers would prefer to find items on their own.

Don’t reinvent the wheel when working within a mature industry. Although a limited sample size, three of the five interviewees mentioned how they wished they could shop based on categories / activities. While trying to listen and adapt to the customers desires, my initial designs focused on this concept. What I learned was that while the users I interviewed preferred a more unique shopping experience, the majority of users still expected a traditional ecommerce experience. Regardless of the pretty nature of my interface, it lacked functionality. As a designer, we have to remember we’re designing for the users and not ourselves. No matter how cool a product looks, if it’s not usable the product and business will fail.

Users will take many different paths to find the items that they are looking for. While building the initial prototype I planned for users to take one path to complete the required task. This led to testing errors because users wanted to utilize the search field and navigation in ways that I had no planned. Therefore, while doing user testing, I should’ve built out a more robust prototype to account for various user actions.

Next Steps

• Test → Conduct more usability tests based on the changes made during the first phase of iteration focusing on the size and spacing of elements on the site.

• Iterate → Make any necessary design changes based on the feedback from testing.

• Repeat (if necessary) → Repeat testing and iteration until the product/new feature is at a point where it’s ready to be shipped.

• Refine → Put the finishing touches on for launch.

Get in touch!