Responsive E-Commerce Website

Client: Mirror This is a fictional company and speculative project
Timeline: 4 weeks
Team: Self-directed with feedback from mentor and peers
Deliverables: Responsive website, responsive mobile wireframes and branding
Role: UX Design / UI Design
Tools: Sketch, InVision, Photoshop

Problem: Mirror is a successful clothing store that has expanded to 32 countries with over 400 stores since 1994. The company believes that clothing should be accessible to everyone, in a variety of styles and at affordable prices. Due to a demand for online services and a need to sell remaining inventory in warehouses, Mirror has decided it’s time to launch a brand new online store and to revamp its outdated brand.

Objective: To design an e-commerce website for Mirror customers, update Mirror’s logo and brand and create an intuitive and efficient shopping experience for users

Empathize

Research Goals

• Discover the needs of shoppers online experience

  • What does the online shopper need in order to complete their purchase both physically and psychologically? 

• Uncover the expectations of online customers

  • Where are the positive and negative aspects of the online shopping experience and where do our users expect to find them?

• Understand what makes the online shopping experience great 

  • How might we build value to the online shopping experience that will bring delight to our users?

Market Research

Competitive Analysis

Comparing Mirrors direct and indirect competition, I found what strengths to focus on and what weaknesses I might avoid. For example Target has intuitive and easy to use site wide navigation but unattractive and obstructive imagery while H&M had good use of discount banners but lacked in site navigation.

1 on 1 User Interviews

Walking around Brooklyn, I found five participants who answered questions read from a script. The participants included two females and three males ranging from the ages of 25 - 40, all confirming purchasing habits for clothing online. Three of the five purchased clothing online with some regularity while two participants (men aged 37 and 40) did not.

I read through the data I had collected and synthesized my observations into an empathy map

With these insights, I was able to identify patterns that illuminate optimal choices. Uncovering motivations like express checkout or emailed discounts, and frustrations like size variances and overwhelming options and clutter.

empathy map

From the insights gained by out empathy map, we were able to build a Hannah, my persona. Because my interview sample size was so limited, Hannah has many if not all the goals needs and frustrations I discovered. At this point in my process I am still teasing out the ideas and need to keep my eye on the big picture, someone like Hannah can remind me that its not about complexity, but style and utility.

persona

Using my persona, I put together a storyboard; a unique and likely narrative that distills her experience. Once again I found myself seeing Hannah as a beacon of simplicity. She doesn’t care for mold breaking websites when shopping for clothes and blames the brand itself when the site delivers a less than satisfactory experience. In order for Mirror to compete with the other big brands, it will need to get the basics right.

storyboard

Define

Project Goals

• Diverse Inventory

• Quick Payment Methods and Guest Checkout

• Discounts and Offers

• Responsive on all Devices

• Cost Efficient and Easy to Update

• Provide Analytics

Bing Bong Boom.

Mirrors business goals coincide with user goals, which is helpful for me to internalize. With that in mind I can feel confident that what is good for the user, may very well be good for Mirror’s bottom line.

feature roadmap

My roadmap didn’t deviate too much from what I think one would expect from any modern eCommerce site with a large inventory. My research revealed that a virtual fitting room is something people find very useful. However, before I go and implement unique site features, just getting the basics done is the priority and more unique features like a digital fitting room can come later.

card sorting

I have my assumptions about how a clothing brand would organize their inventory into categories, but this is a great opportunity to gain insights from users. Let’s get some card sorting done.

It is important to me that I talk to real people face to face as often as I can, fortunately I was able to run my sort, IRL.

While there were some overlapping categories in the literal sense; shoes, shorts, tops, bottoms. What is far more interesting here is that three of the four participants created outfits; or the goal of building an outfit and two of the four participants ​simultaneously​ created personas along with those outfits. This could greatly enhance the design of the landing page, presenting outfits and characters users identify with upon reaching Mirrors site.

sitemap

My card sorting was a huge help when it came down to building the sitemap. When I was first presented with Mirror’s inventory, I was a bit overwhelmed and spent a decent amount of time looking at how the direct competition organized things, but after gaining some much needed user insight, building the sitemap was a breeze.

Ideate

task flow & user flow

mid fidelity wireframes

For my mid fidelity wireframes I focused on the flow from browsing to payment. In my research, I found that color and size were an important part of the decision to make a purchase online and I wanted to have those options feel at home next to the product. Imagine the tag on the inside of a nice jacket, you know the tag that tells you the material, the washing method and all that. I was hoping to achieve that same aesthetic with the placement of my elements on the product page!

Can’t forget some responsive wireframes too

Branding

logo design

Mirrors logo had to be universal and uncomplicated. The brand is meant to appeal to a large demographic of various ages and people who are looking for inexpensive yet stylish clothing. The logo needs to be stylish, but in a “I woke up like this” kind of way so I stayed away from the obvious imagery of mirrors and mirrored images and instead leaned in on a low key, bold typography that would fit well on a T-Shirt or hat!

Style Tile

Mirror needs to present itself as affordable without appearing cheap and stylish without appearing exclusive. The branding required desirable trendy colors with mass appeal, hard edges and modern ferocity. To achieve this, I focused on the idea of a hip fashion magazine, and used that concept as a jump off point to inform the typography, imagery and colors.

high fidelity wireframes

Settling into my high fidelity wireframes with lots of discount banners and rectangles. I didn’t deviate very much, if at all from my mid fidelity wireframes and I was generally pleased with the results however I did eventually redesign the footer.

ui kit

Prototype

high fidelity prototype

With the style tile in place and the wireframes looking good, I used my initial user flow to create a prototype within invision. This prototype would allow users to complete a task in various ways, giving me vital information of where my users find frustrations or delight.

Test

Usability Testing

With the prototype ready, my laptop and some nervous energy I roamed NYC till I found my usability testers. The tests were recorded and are available in audio format here.

Josh, 40

Josh completed the task the fastest. He had trouble except a moment where he read “tops” as an unclickable headline with “shirts” as the body text.

Takeaway: Its possible that the mega menu is not clear enough regarding category, subcategory organization

Finding areas of improvement based on the usability testing was my next goal. In order to figure out which improvements to prioritize, I organized my findings into an affinity map so that I could see where the trends and patterns are. Once I had everything visually laid out, it was easier to see what needed to be done next.

affinity map

Reflection

Building a website for Mirror was a relatively straightforward project because many features have well-established design patterns. Therefore, I gained much experience in researching best practices and determining which solutions were best based on user needs. Additionally, since many people have used e-commerce websites before, user expectations are more concrete, which makes it even more important for the website to reflect common e-commerce design patterns. As I learned from this project, usability testing can be a big help in discovering areas that are inconsistent with user expectations.

Next Steps

Prototype other features based on the persona’s user needs

• Identify areas of improvement through user feedback

• Design the UI for mobile and tablet screens

• Continue organizing design deliverables for handoff