Website Design + Rebranding
Mirror is a brick and mortar clothing retailer with over 400 stores in 32 countries. Mirror provides a wide array of fashionable clothing for men, women, and children of all ages. Mirror recognized the need for expansion into the digital space and wanted to tap into its online revenue potential.
Design a responsive e-commerce platform that will allow Mirror to increase revenue, attract new customers, and sell excess inventory. Give the company a face lift by designing a new logo that captures the essence of the brand.
I analyzed some of Mirror's competitors in the e-commerce retail industry. I uncovered the strengths and weaknesses of Mirror's direct competitors H&M, Urban Outfitters, and Topshop. In addition, I performed a competitive analysis on Asos and Amazon which are indirect competitors of Mirror.
In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I had speak with them directly. I sat down with two women and one man between 25 and 62 years old to ask them about their shopping experiences and habits.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.
Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:
Next, I used all of the qualitative data i gathered during the research process to create Lauren, my user persona. Lauren is an an ambitious 20-something year old professional in need of stylish well-made clothes at an affordable price.
Now that I had empathized with target users and identified their needs, I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common areas, I could decide what product features were necessary for the prototype.
I created a high-level list of site features to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
Next, I conducted an open card sort to get a sense of how users categorize clothing, shoes, and accessories. 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.I made the assumption that the standard e-commerce navigation system needed to be changed, however participants feedback revealed they were in fact happy with it. While there was confusion about where to place miscellaneous items, the categories used in the industry seem to be efficient and understandable for the user.
Based on response trends, I created a site map which laid out the structure and organization of the content on the site.
I completed a task flow and user flow to imagine the ways a user might navigate through the site to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.
I began the process of wireframing with sketches of variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasbile way. The sketch I chose served as a guide for my digital wireframes.
I created a mid-fidelity prototype of the desktop site in Sketch. I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design.
At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created responsive wireframes for Mirror's key pages and began to flesh them out.
I asked 5 participants to test out the prototype's usability. The participant pool was comprised of women between the ages of 18 and 65 who shop at least once per month. Three participants met me in person to complete the usability test, while two others did so remotely via skype. The participants were given three different scenarios, each with a task to complete.
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way of determine what needed to be changed immediately and what could be saved for later.
Overall, users navigated through the website with ease. Confusion most often stemmed from the fact that the prototype is not fully functional. Participants prefer to use a combination of the filters and sorting options when looking for a specific item, and they value having categories for occasions. Participants do not always use the filters in the way intended; perceptions about price, quality, and value influence how they search for an item.
At this point in the process, i began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Mirror brand: Fresh, modern, quality, affordable.
With these adjectives in mind, I created mood boards on Pinterest where I collected pins of typography, logos, and color schemes that aligned with my vision for Mirror.
I began sketching out ideas for a logo, aided by the inspiration I found on Pinterest. I wanted to play on the idea of symmetry and reflections.I settled on a classic monogram logo with a modern flair. As I explored different variations of the letter M, I hoped to come up with a logo that was memorable and unique but would not alienate users.
The result was two very different versions of an M- one that was modern, geometric, and abstract and another which was a modern take on a traditional serif letter. After revisiting the brand adjectives and reflecting on aesthetics , I decided to move forward with the former.
The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.
After several iterations of my low-fidelity prototype, I fleshed out the details of each page with images, typography, navigation menus, etc.
While the usability test feedback was mostly positive, the prototype is not perfect. I plan on fleshing out the rest of the pages of the prototype, especially the shopping cart and filter features. I plan to continue the iterative cycle of testing and updating the prototype. I will use Zeplin to hand off the design to the developer team when I have made all improvements to the prototype.