Mirror Apparel

A responsive e-commerce apparel site for a modern society

Role: UX Research, UX Design, UI Design, Branding, Usability Testing
Project Timeline: 10 Weeks
Tools: Figma, Adobe Illustrator, Adobe XD

The Challenge

Become a global leader in e-commerce

The majority of clothing purchases happen online. While successful in the offline retail space, Mirror has been slow to adapt to the e-commerce space. Mirror has a solid brand identity, but their brand has struggled to gain traction with the younger generation of shoppers.

Discovery

Identifying the competition, trends & new opportunities

Research is the foundation of human centered design. Creating a methodology that allowed me to comprehensively understand the client, products and consumer informed my design approach and allowed me to create an experience that resonated with the client and inspired their customers.

In order to design the right solution, I needed to understand who I was designing for. I conducted a competitive analysis to understand the current market trends and evaluate opportunities in the e-commerce clothing industry. I also did a literature review and conducted one-on-one interviews with online shoppers to understand their challenges and goals when shopping online. ​

 Interaction Design

Task and userflow creation

I envisioned how users could easily and consistently accomplish their goals. Looking at the potential paths available to accomplish tasks allowed me to construct a site that made the decision process and navigation options simple and minimized the possibility of confusion or frustration for the user.

 Branding & UI Design

Establishing the design system

Mirror was looking to refresh their brand, so I created a new visual identity for them that could translate well on any medium. My research pointed to a style that was clean, simple, elegant and fun keeping the customer engaged.

MIRROR UI KIT_Portfolio presentation.png

 Responsive Wireframes

Framework for an excellent user experience

I produced low-fidelity wireframes showcasing how different pages and elements would appear.
With the initial blueprints in place I was able to help my stakeholders focus on a page's key
purpose and functionality. I then translated my low-fidelity wireframes into high-fidelity wireframes
which I used for my prototype.

 

Prototyping & Testing

Usability testing

I recruited participants across multiple demographics and ran a series of moderated remote and in-person usability tests using a prototype I created in Adobe XD.

 

The Solution

A responsive e-commerce site

Recreate the Mirror brand identity to be inclusive and accessible to the younger generation of online shoppers.

Develop a responsive e-commerce site that is intuitive and easy to use.