Mirror

• Responsive Website
• Logo Design & Branding

• UX/UI Designer

• 4 weeks

• Sketch
• Concepts
• Optima Sort
• Whimsical
• Adobe Illustrator
• InDesign
• Zeplin

OBJECTIVE

Mirror is a price conscious fast-fashion store that was founded in 1994. They are focused on affordable clothing for everyone, giving consumers the opportunity to change styles with the seasons, without breaking the bank. While they have had a successful brick-and-mortar business, with over 400 locations in 32 countries, they haven’t invested in the digital marketplace. The goal of this project is to provide research to develop a responsive digital storefront for Mirror. I want to find out what the consumers are looking for in an online storefront and what could set Mirror apart from its competitors.

This is a speculative project.

EMPATHIZE

Goal: Understand the user’s needs and frustrations when shopping for clothes online
Process: Market Research | Competitive Analysis | User Interviews

Market Research

The start of any serious project is research. I needed to understand more about the fashion industry and eCommerce, two things I had only a passing understanding of.

Learning about the existing market helped build a strong foundation for the rest of the project, because I had a better idea of the product I needed to build, and the people who would use it.

Fast fashion

• Target Market: Millenilals with disposable incomes
• Cost & Brand Experience are deciding factors when consumers choose brands
• Decrease production time, get fashion to people quickly
• Quick “Season” cycles (4-6 weeks, or 1 week “microseasons”)
• Moving high amounts of product: Zara ships 30,000 units to 1600 stores in 32 countries, per week

eCommerce trends

• 67% of Millennials (ages 23-38) and 56% of Gen X (ages 40-55) prefer shopping online to brick-and-mortar stores
• 48% of consumers overspend or make unplanned online purchases
• PayPal transactions are 70% higher conversion than non PayPal transactions
• 7 in 10 consumers prefer mobile websites to applications on mobile devices or tablets
• Millennials prefer chatbots over long phone queues for resolving customer service issues

Overall, I found that younger people were more likely to shop online for clothing. They also are more likely to overspend or make unplanned purchases. The fast fashion industry capitalizes on this by constantly changing their products and changing seasons.

Competitive Analysis

Once I had an idea of the fashion market and consumer behaviors, I needed to see what competitors were doing. I compared three direct competitors and two secondary competitors to see the strengths and weaknesses of their experiences. By laying out the different experiences of companies in this way, I was better able to see what industry standards were, and where Mirror could improve.

User interviews

With a stronger idea of the fashion industry and other competitors, I moved onto primary research through interviews. I interviewed people about their shopping habits, online and in person. I needed to learn how real people behaved and what they were thinking when they made decisions, so I could better understand their motivations. My goal was to find out about people's experiences, so I could turn those insights into design decisions.

Number of Participants: 7
Gender Breakdown: 3 men, 2 women, 2 non-binary people
Age: 21-54

Define

Goal: To define the user’s needs, goals, motivations and frustrations based on research findings
Process: Empathy Map | Persona | Storyboard

Empathy map

After my user interviews, I needed to analyze my findings. I did so by using an empathy map, a visual way to group the insights and discover patterns. I transcribed the notes and wrote them down onto color-coded sticky notes. I then placed them on the wall, sticking similar observations and notes together. These lead to several insights based on my interviews, which I used to create my user's needs, confident that they reflected the needs of real users.

insights

• People shop primarily because they have a gap in their existing closet
• People are likely to browse online, especially if the site is easy to navigate
• People feel judged for their shopping choices while browsing in store
• It is difficult to be sure of how clothes fit if you don’t try them on
  

NEEDS

• To fill a gap in their existing wardrobe
• Easily browsable website
• To feel accepted while shopping online
• Feel confident in the fit of clothes they buy

PERSONA

Once the user interview findings were synthesized, I created a user persona to give me someone to design for. Sonya is the primary user I was designing for, and helped ground the user research into a person for me to empathize with, instead of just a list of desires.

STORYBOARD

Now that I had a persona, and a person to design for, I wanted a way to visualize a user's experience shopping. To do this, I created a storyboard that walked through her emotions as she realizes she doesn't have a dress for a work event.

I sketched the scenes on my iPad, using Procreate. I then added text explaining the scenes of the story to make them more clear.

Ideate

Goal: Develop a logical information architecture and seamless user flows based on insights from research
Process: Card Sort | Sitemap | Task Flow | User Flow

Card sort

How a website is organized is paramount to a good user experience. To understand how people intuitively grouped products, I conducted a card sorting exercise using OptimaSort. Participants grouped various clothing items into categories, and then I compared the data. This information was used when I decided how to organize the shopping experience for Mirror.

Site map

Using the data from the card sorting exercise, I built a sitemap using Whimsical. The sitemap acts as a template for the pages that the site would include, and how they're related to one another. I needed to

Because no one in my card sort grouped clothes by gender, I chose to design a website that didn't have gender distinctions in clothing. Instead, I grouped clothes by their categories—pants, jackets, shirts, etc.

Task flow

After creating the sitemap, I needed to break down how a user would navigate between different pages. I used Whimsical to make a task flow for purchasing a piece of clothing. The task flow helped me solidify how the site was linked together, and different elements a user would need to complete their tasks.

User flow

After completing the task flow, I created a user flow. This breaks down the task even further. It also included decision points and the different flows . This made me think about how users would interact with pages differently, based on what they needed. The greatest challenge of this flow was organizing all the information in a way that made it easy to read.

Click on the user flow to view the full diagram.

Design

Goal: To develop a cohesive brand and UI for Mirror’s website.
Process: Sketches | Mid-Fidelity Wireframes | Responsive Wireframes | Branding

Sketches

Once I had an idea of the pages that needed to be designed, I started with sketches. I used Concepts on my iPad to create low-fidelity versions of the homepage. I sketched out three different potential layouts for the homepage.

The first was a fairly traditional layout, with a large hero image, and sliding galleries for showcasing products. The second had links for categories a user could browse through. The third had a sidebar navigation, and looked more like a product lookbook.

With these sketches, I wanted to visually see different layouts, and be able to compare them. I ended up choosing the first layout, and sticking with a more traditional eCommerce website format, because I wanted the site to feel familiar to users.

Mid fidelity wireframes

After I decided the look of the homepage, I created mid-fidelity wireframes to quickly design major pages of the site. I used greyscale and large shapes to get an idea of how content would look, and create a strong visual hierarchy for the rest of the design.

I ended up combining a few elements from the first two sketches for these wireframes. The final design combined both a large hero image and categories. Because my research indicated that people liked to browse when they were online, I focused on showcasing products and making it easier to get to different category pages.

Responsive wireframes

Once I was satisfied with the browser designs, I needed to translate the experience to tablet and mobile. I wanted to provide a fluid experience on all sizes. I did this by designing with grids in mind, and then rearranging and removing content to fit the smaller screens.

Once I was satisfied with the browser designs, I needed to translate the experience to tablet and mobile. I wanted to provide a fluid experience on all sizes. I did this by designing with grids in mind, and then rearranging and removing content to fit the smaller screens.

You can click this image to see the full size version of the wireframes for the home page and the product page.

Branding

After the website’s skeleton was built with the wireframes, it was time to start designing the UI. I started by defining brand attributes that I wanted the design to represent: simple, contemporary, pure, natural, stylish, tranquil, refreshing and welcoming. I started sketching various logos and then vectorizing them in Illustrator.

With the logo, I wanted to bring in an image of the natural world, and a less-obvious reflective surface. The 'O' in the word mark reflects a wavy pond, and the reflection within it. I chose Fifta Ligatures, a rounded sans-serif font with connected ligatures to provide a welcoming, stylish feel

I decided to use Fifta Ligatures as the display font for this project, to tie in the rest of the website with the logo itself. I paired it with Mr Eaves Modern Book for subheadings and body text; it's simpler, geometric design and relaxed spacing made it a contemporary and stylish choice.

For the color palette, I focused on muted colors that invoked nature, primarily relying on green for the brand color. Green is a color of growth and security. I chose it because it feels welcoming and natural.

The product imagery I chose was subtle and focused more on the clothes than the model's faces. I wanted a mix of models and simple backgrounds

Click the image below to see the full style tile.

Prototype & TEST

Goal: Bring the design into an interactive state and then test with users.
Process: High-Fidelity Wireframes | Invision Prototype | Usability Testing | Affinity Map | Prototype Iterations | UI Kit

HIGH FIDELITY WIREFRAMES

After the style was finalized and the wireframes complete, it was time to make high-fidelity wireframes. I used the style guide as a template to start building wireframes that would represent the final design. Most of my design decisions were already made with the mid fidelity wireframes, so these wireframes primarily added color and imagery to the mockups.

I focused on prototyping the main pages that I needed to test my userflow—browsing for a product and adding it to the cart. This was to keep my work manageable, and make sure creating the prototype was easier.

Click on the image for the full versions of the homepage and the product page.

INVISION PROTOTYPE

After the mockups were created, I imported them into Invision and connected the screens using hotspots to link them together. I kept my prototype simple, and didn't prototype many animations or anything fancy. This would be used to test the usability of Mirror’s website.

In order to keep user testing manageable, I only did a prototype for the browser version of the site. Going forward with the project, I would add prototypes for the tablet and mobile sizes, to ensure their experiences were just as easy for the users.

The prototype may be found here

USABILITY TESTING

I conducted usability testing to see how well users could complete a series of tasks, using moderated think-aloud testing. To do so, I had them call me on a service like Skype, so they could share their screen with me. I then asked them to talk through their process as they completed these tasks. I was taking notes, which I then would synthesize into an affinity map..

tasks

• Brows for a long sleeve shirt
• Add the long sleeve shirt to the cart

summary

• Number of Participants: 4
• Gender breakdown: 2 men, 1 woman, 1 gender non-conforming person
• Age: 24-38
•  Completion Rate: 100%
• Error Rate: 12.5%

AFFINITY MAP

The notes I took during usability testing was synthesized into an affinity map. Like the empathy map, this allowed me to view patterns and connections between the different user's tests.

Each color represents a different user test. This image shows the initial layout of the post-its, prior to moving everything into organized groups.

insights

• Balance between the header and content padding felt off balance
• People have different reasons for choosing to use the quickshop modal over viewing the product page
• The UI aligned with the brand adjectives I was attempting to convey
• Most users found the site well organized

design recommendations

• Adjust the padding between sections to make them more even
• Further develop both quickshop modals and product pages
• Keep major UI elements the same
• Keep the organization of the site the same

PROTOTYPE ITERATIONS

After analyzing the data from usability testing, and coming up with the design recommendations, I needed to implement them to improve the design. I didn't have a lot of major changes that needed to be made, so I adjusted some padding and spacing. I also made the footer more neutral grey.

UI KIT

The final step in this project was creating a UI kit, showcasing the elements used in the design. A UI kit would make it easier to work with a design team and have a source of truth for the project, as well as giving developers a final guide for the assets.

I took all of the icons, cards, forms and buttonsI had used throughout my project, and created some new states for buttons and dropdowns that might be necessary on other pages. I also laid out the grid sizes that I used for the project.

Click the image to view the full UI kit.

CONCLUSION

REFLECTION

This was the first project I took through all design stages, from start to finish. I learned valuable lessons about the design process, the importance of research, and the work it takes to create a finished product. I learned more about my inherent skills as a designer, and the places that I need to focus on and spend more time with. I also reaffirmed my belief that the most important aspect of a design is centering it around users. Learning how to research and synthesize that research into actionable decisions is an important part of the design process.

This project taught me a lot about my workflow and the ways that I work when solving problems.

NEXT STEPS

Moving forward with this design, I would build out other key pages for the website into high fidelity wireframes, including a more detailed checkout process. Then, I would return to usability testing to find any pain points in the design. I would test a broader range of people in usability testing to be the design is as effective as possible.

Once the browser site had been completed, I would then design and test tablet and mobile pages for the new pages..