Case Study of Responsive Ecommerce Website
PROJECT BACKGROUND: Mirror is successful brick and mortar clothing retailer with over 400 stores in 32 countries. They offer wide variety of affordable and good quality clothing for men, women and kids of all ages. The company has acknowledged the fact that they need to have online presence in order to compete with existing market and to increase their sales.
THE CHALLENGE: Design a competitive responsive website for an established clothing store to increase its sales, attract new customers and to clear out remainder inventory. Give company a new look and feel by rebranding existing logo and visual system.
ROLE: UX+UI Designer (Research, Interaction design, Visual design)
CLIENT: Mirror
Tools Used: Secondary research: MARKET ANALYSIS, competitor analysis, PRIMARY RESEARCH: user interviews.
SECONDARY RESEARCH
I started my research with market analysis to familiarize myself with retail and e-commerce system. I gathered information from articles, research based on in-store and online shopping to determine industry standards and user’s expectations. After that I conducted competitive analysis to understand and identify success and weaknesses of mirror’s direct competitors (Macy’s, Nordstrom and H&M) and indirect competitors (Amazon and Target). I also created provisional personas to began thinking about who might make up mirror's customer base.
PRIMARY RESEARCH
To better understand user’s needs, goals and pain points and to test my assumptions, I conducted user interviews with 4 participants who had experience with online shopping, 3 female and 1 male all ages between 25-45 years old. I asked them questions about their shopping experience, opinions and preferences.
Assumptions that I hoped to prove or disapprove were:
Tools Used: empathy map, USER PERSONA, STORYBOARD
EMPATHY MAP
After completing interviews I gathered and organised all information to look for insights. I wrote down responses on sticky notes and mapped them out in doing, hearing, seeing, thinking, feeling and pains. This method allowed me to discover trends and patterns from which I constructed insights.
PERSONA
I created my user persona Emma using all the qualitative data that I gathered during my research process. Emma represent one ideal archetypical user of mirror. Emma is mother of 2 kids working full time. She love conveniency of online shopping but she don’t want to compromise on quality of product.
Tools Used: Project road map, Feature matrix, online card sort, Site map
PROJECT GOALS
After empathizing with target users and identifying their needs, goals and pains, I moved on to next step which was defining. I mapped a Venn diagram with user and business goals and technical considerations. From this, I identified shared goals of the project which were beneficial for both user and business.
FEATURE MATRIX:
With the project goals established, I created high level list of features presented in order of priority in terms of development, business and user goals and are supported by research.
To view Product Feature Matrix, Click here
CARD SORT:
Next, I conducted online card sort exercise. I created 30 card and chose the method hybrid in which participants can choose categories provided or make their own category. This exercise give me valuable information about users expectations and preferences and it also helped me in making decisions on how to categorize and subcategorize items in mirror’s website.
SITE MAP
Based on the results of the card sort and keeping in mind user needs and goals, I created site map that outline the relationship of content on mirror’s website.
Tools Used: TASK FLOW, uSER FLOW, SKETCHING, WIREFRAMES, PROTOTYPES
Task Flow & User Flow:
Once the site structure was established, I moved into ideation phase. I created userflow to think through different path user might take to complete their task.
WIREFRAMING
Before moving into digitally sketching wireframes, I began with hand sketching of mirror’s home page. This helped me in creating different options and deciding which option would best meet business and user goals.
After establishing UI requirements of key pages, I created mid-fidelity wireframes to show more refined structure of the site.
RESPONSIVE WIREFRAMES
After that I created responsive wireframes to ensure that users get consistent shopping experience through any device.
Tools Used: MOODBOARD, STYLEGUIDE, HI-FIDELITY WIREFRAMES, PROTOTYPE, UI KITS
MOODBOARD
Because mirror was looking for rebranding its logo and visual system, so I began by defining brand attributes.
Modern / fresh / Relaxing / Inviting
With these adjectives in mind, I began collecting inspirations and created a mood board on pinterest.
LOGO
After making moodboard I began sketching logo. I played with idea of reflection and symmetry and also with different typefaces. I settled on modern and uncomplicated “mirror” name in front with the impression of rectangular mirror behind it.
STYLEGUIDE AND UI KIT
After establishing design direction, I created style guide which helps in visualizing the idea and to communicate the design concept.
UI kit was created to document the design patterns and components and to ensure consistent application of elements across the product. Both style guide and UI kits are constantly changing as the product evolves.
HIGH-FIDELITY WIREFRAMES
After several iterations on low-fidelity wireframes, I put details on each page (images, typography, buttons, icons etc) and then make a prototype on invision for usability testing.
Tools Used: USABILITY TESTING, AFFINITY MAP, HI-FIDELITY WIREFRAMES ITERATION
USABILITY TEST
I conductive usability test with five participants. 4 female and 1 male. All tests were done in person while I observed the users closely. I read them the script and gave them scenarios 1 by 1.
Tasks:
1. Shop for women tops and add them to your cart.
2. After adding the top to your cart, go to women’s new arrival collection.
3. Save the product you are viewing in product page and navigate to category page to find more products.
At the end I asked them few questions about overall look and feel of website and about their experience with the website. All the participants completed their task successfully.
AFFINITY MAP
After testing my prototype I created affinity map to organize responses and observations. This helped me in checking for patterns and driving insights, from which I constructed design recommendations. I listed out design recommendation in the order of high priority to low priority.
Overall users were able to navigate through the site efficiently. Some confusions occurred but that was because of limited functionality of the prototype. Based on usability test I made following revisions in design.
PROJECT TAKEAWAYS
In this project I faced the challenge to give mirror strong look and feel that leave permanent impression on users mind but also I had to follow the convention to make shopping experience smooth and natural.
NEXT STEPS
Next steps for this project is to conduct usability test with updated prototype and determine if usability issues have been resolved.