MIRROR Clothing co.
OVERVIEW
Mirror is a clothing store that started in 1994. They target an audience that is looking for inexpensive clothing for any occasion. They have reasonable quality clothing at a low price, and make all types of clothing accessible so that people can afford to change styles often. They are a brick and mortar store looking to transition to have an on-line presence. When making this jump, it is important to have a successful website and logo redesign that attracts to all of their potential customers.
CHALLENGE:
Mirror needs to have their logo redesigned and to create an e-commerce website to take their store and their concept worldwide.
SOLUTION:
Research Plan
Secondary Research
ROLE:
UXUI Designer + Researcher
SCOPE:
New logo and branding, responsive e-commerce website
DURATIONS:
4 weeks
TOOLS:
Sketch, Invision, Pencil, and Paper
PROCESS
This process is iterative. Throughout the process, there are many places where changes can be made and improvements introduced. Even though it is iterative, there is a definite flow from understanding the needs and desires through to the final product, touching base with potential customers and getting feedback throughout the process.
1. Empathize
he goal of this phase is to empathize with the user’s needs, goals, motivations and frustrations, the desires of the customer, and what to survey the competition.
Market Research
Competitive Analysis
Empathy Map
User Persona
2. Define
The goal of this phase was to define what the final product should contain. There are many possible ways to sort information, and many possible features. This phase decides which ways data is displayed, and which features should be included.
Project Goals
Feature Roadmap
Card Sorting
Site Map
3.Ideate
In the ideation phase, the goal is to provide a set of realistic ideas about what the final product will look and act like. These steps begin with more rough drafts, and are increasingly polished as ideas are accepted or rejected.
Task flow
User flow
Branding
UI requirements
Responsive UI design
UI kit
Wireframe
4. Prototype
In the prototyping phase, a responsive UI design and a high fidelity mockup are made and turned into a prototype. A test plan is developed, the prototype is tested. The results of user testing of the prototype are put together in an affinity map, and the final design is revised to give a final tested design,
High Fidelity Mockup
Prototype
Usability Testing
Affinity Map
Revision
EMPATHIZE
Empathizing is understanding both the business aspects, and the customers. Empathizing permits the development of products that are useful to the customers and valuable to the business. Empathizing is done by conducting secondary and primary research on the business and the customers.
MARKET RESEARCH
Clothing is an industry where many stores were slow to go on-line. Reasons for this delay are: Clothing is sold by touch. Different fabrics have different feel. Sizing from different manufacturers is different, so customers must try on clothing to get the “right” fit. Customers often return purchases, so return shipping costs are a concern.
Trends
Creating new websites
Going online
Fast shipping
Free returns
In person shopping decreasing
Pain points
Change from in person to online
Customers cannot feel clothing
Increased costs of shipping and returns
Customer frustration with fit
COMPETITOR ANALYSIS
Analysis of direct and indirect competitors revealed the strengths and weaknesses of these organizations. Knowing the strengths and weaknesses of the competition allows a design based on the industry trends and best practices, yet solving problems that the competitors have not solved. I conducted secondary research using clothing industry trade publications, reviews, and analysis of the competitors’ websites, and summarized for direct, and indirect competitors.
PROVISIONAL PERSONAS
Provisional personas were created from the information collected from interviews with customers, or potential customers. The provisional personas include data from discussions and are meant to represent the opinions and thoughts of real customers. Having more than one provisional persona allows to select final characteristics for a composite final persona.
CUSTOMER RESEARCH
Customer research is direct research determining the goals, motivations, and pain points of customers. Primary research on customers provides compelling specific data on the wants and needs of customers. I prepared a script containing 11 questions asking about online shopping experiences, interviewed 3 prospective customers, recorded these interviews.
EMPATHY MAP
This empathy map reports the areas of agreement from the customers interviewed. The empathy map shows insights into the pain points that customers experience. I transcribed notes from the customer interviews, wrote the major comments on post-it notes, and arranged them in groups representing insights that they gave me into the customer’s on-line clothing shopping experiences.
DEFINE
The definition phase of the project is to determine what needs to be done, and how these needs should be met. Based on research, the definition portion of the project defines the features and functions of the final product.
PERSONA
The final persona has is a human face that can be used to pose questions in development. This is important, since the final persona is constructed from user interviews, it represents the reality of the users and customers. The final persona is created from initial customer research, and the goals, motivations, frustrations and needs are taken from customer research.
PROJECT GOALS
This is a Venn diagram showing the intersections of the goals from the three primary stakeholders in the project, the business, customers, and technical requirements of the website. The goals in areas with the highest amount of overlap between stakeholders are those which should be most highly prioritized for implementation in the site. I gathered the user and technical goals from secondary research into the clothing and online sales industries, and determined the customer goals from the customer interviews, I then placed these goals in a Venn diagram.
Ideate
Ideation is the phase of the project where the features and functions of the website are identified, and the structure of the site is formed. The ideation phase creates the structures that will make the website work. I brainstormed useful features, and placed these on a prioritized roadmap, conducted a card sorting exercise to see how the customers viewed the products that are sold, created a site map, task and user flow diagrams, and a logo, board, style tile, and UI kits.
FEATURE ROADMAP
The feature roadmap is a list of the features, with a brief description the research that supports the feature, prioritized by their relevance to the project goals. These features include those that must be included in the site, some which may be included, and those that may be included at a future date. I created this list from brainstorming, and examining the best practices and trends in the industry, and prioritized them according to whether they addressed the project goals.
CARD SORTING
These are the results of a card sorting exercise that I conducted to see how Mirror customers think about their products. This allows the products to be arranged in categories that make sense to the customers, and to create views and pages that resonate with the users. In this exercise, customers are asked to group products together in ways that make sense to them, and to create categories for their groups.
SITE MAP
The site map is a way of arranging the functions and features of the site. This is required to begin a list of all of the pages and features that must be designed. To create this, I examined the features roadmap, and incorporated features into pages in a structure that represents the current trends of the industry and the competitors.
TASK AND USER FLOWS
The task and user flow diagrams are flow charts depicting the minimal path to complete important tasks, and the path that the user must take to accomplish these tasks. These provide a guideline for designing and placing the features and functions, in order to ensure the least amount of user frustration. I created these by identifying important tasks, and the features required to accomplish these, then arranging them according to current industry and competitor standards.
MOOD BOARD
The mood board provides information about the mood of the website. The mood of the website should reflect the mood of the brand. I chose a color palette and other mood items to match the brand identity of Mirror, and selected items from design websites, best practices from competitors and other resources for the fashion industry..
BRAND LOGO
This is a sheet of drafts of a brand logo for Mirror. The brand logo must be clear, scalable, accessible, and should communicate the brand identity. The brand logo becomes an important part of the brand in the the eyes of users. I tried to think what the brand represents created several drafts at different scales, and asked users to provide input into their favorite logos.
BRAND STYLE TILE AND UI KIT
This is a collection of the style, the logo, color palette, and fonts that will make up the new style. This is like a visual snapshot of a style guide, and the UI kit is a collection of the user interface items that will be used in the site. The style and UI are what makes up most of the visual impact of the website. To make these, I researched the industry and competitors and selected components that represented the brand identity and are also the current industry and competitor standards.
PROTOTYPE
The prototype phase includes steps of creating several types of wireframes, making these wireframes into a clickable prototype, testing that prototype, and making improvements. This is the place where the design of the website is visually expressed, and becomes a testable design. I created wireframes, ranging from simple sketches, to mid fidelity wireframes with boxes representing images and text, then made them into a prototype, created a test plan and tested the prototype, then
WIREFRAME SKETCHES
This low fidelity set of wireframes are sketches of how the website will look. Low fidelity wireframes are important, since they are a quick check of the visual arrangement of features and functions, and they are easy to alter if they must be corrected. I sketched these wireframes with pen and ink, and used the competitor and other industry site standards to arrange images in a logical, accessible manner.
MID FIDELITY RESPONSIVE WIREFRAMES
These responsive mid fidelity wireframes are wireframes with placeholders instead of images, text blocks, functions and features, and are designed in a variety of screen sizes. Mid fidelity wireframes permit the evaluation of the layout of a site, without the distraction of images text and colors, and the use of three screen sizes demonstrates how the site will be coded to display on desktop, tablet and phone formats. I created these by starting with a grid layout and applied placeholder items to create a modern, useful website.
HIGH FIDELITY WIREFRAMES AND PROTOTYPES
Below are high fidelity wireframes that are populated with images, text and features that represent the mood, style, and UI kit guidance. The high fidelity wireframes show how the website will look, which the prototype allows users to experience using the website to perform necessary tasks.. I created the wireframe by adding public domain images and creating dummy text in the style and mood of the site, and applying icons and other functions from the UI kit, and making the wireframes live using a prototyping tool.
USABILITY TESTING AND FINDINGS
I created a usability test plan, implemented this test plan, and documented the results. Testing is important to ensure that there are no unexpected errors or omissions in the site, and that the site works in an intuitive manner for users. I created a test plan to recruit users who were representative of the demographics of the Mirror customers, tested them using moderated “think out loud” testing on Zoom or Skype, and recorded their comments and actions, and created transcripts of this testing.
AFFINITY MAP
The affinity map is a visual representation of areas where insights are gained from multiple users testing the prototype. These insights are important to identify pain points with the prototype that are experienced by more than one user, which must them be addressed. The comments and actions from testing transcripts were written on post-it notes, and these were arranged in logical insights, which were summarized, with pain points and recommendations made.
REVISIONS
This is the revised high fidelity wireframe. This is an improved wireframe that should be close to a final version to be handed off to a development team. The recommendations from user testing and the affinity map were implemented on the high fidelity wireframe with a new prototype being created from these improved wireframes.
CONCLUSIONS
Customer feedback was used to create the look and feel of the website and branding.
Customer data was used to create a final persona.
This persona may be used to prioritize work and define progress.
The Mood Board, Brand Style Tile, Logo, and UI Kit should be useful when developing a brand guideline..
The prototype has been tested, and was well received by users. Other important pages from the site map need to be created.
The site is responsive to desktop, notepad and telephone sizes.
The UI kit and Mood Board should help carry responsiveness through to the rest of the pages.
There will need to be continuous development, testing and maintenance of the site, and as additional pages and functions are developed and added, it will be necessary to conduct additional testing.
NEXT STEPS
Additional pages should be designed, as shown in the site map.
The additional pages should be prototyped and tested.
Real product images and text should be substituted and the prototype reviewed or tested again, to make sure there are no surprises.
Following final testing of a “real” prototype, coding development can be finalized to make making the site functional..
A brand guideline, should be created to help guide future content development.
A calendar should be made to schedule routine updates, new product drops, and to integrate the online presence with social media and other marketing.