MIRROR UX & BRAND DESIGN
Project OverviewHow might we design an engaging and relevant site to
enter the competitive fast fashion e-commerce market?
enter the competitive fast fashion e-commerce market?
Role: Designer
Platforms: Desktop, Tablet, Mobile
Tools: Sketch, InVision, Marvel, Adobe CS
The scope of this project was designed to get Mirror, a chain of brick and mortar stores positioned to enter the competitive market of e-commerce fast fashion for the family.
In addition to responsive site design, Mirror also needed an identity rebrand as well to reflect a modern, spirited customer.
RESPONSIVE WEBSITE
To design a responsive e-commerce site that’s easy to use and allowscustomers to browse through products and filter by size, color, style, etc.
DESIGN PROCESS: RESEARCH!
Research began by identifying current trends and competitors in the
industry, and to investigate a wide range of online shopping experiences
while taking note of features, frustrations, and moments for delight.
Following that was a competitive analysis that documented similar outlets with a similar target base. From there, I was able to create several provisional persona to help better understand the range of needs a user may have.
Then, I conducted 1-1 interviews with potential users to gain
insight on shopping scenarios, needs, frustrations, and desires.
EXPLORE: COMPETITIVE ANALYSIS
A competitive analysis gives me a funnel in which to study real-life examples with a critical and mindful eye. When completing this one for the Mirror project I took note of both site content and design features and function as they relate to the user experience. Beyond this summarized table are insights to take away for potential design elements, features, and experiences that make a site visit memorable.
SYNTHESIZE
Persona: Meet Moni Santos, a young professional who’s resourceful
with an eye for unique looks and knows how to get them at a great price.
![]()
![]()
![]()
![]()
![]()
![]()
Use < and > to scroll between images.
![Responsive lo-fi wireframes]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
brand assets and UI kit guidelines were developed.
to see the design system in greater detail.
![]()
Check out the prototype here
![]()
![]()
with an eye for unique looks and knows how to get them at a great price.
EMPATHY MAP
Understanding Moni
INTERACTION DESIGN
By mapping out three user flows based on common scenarios, I could quickly visualize the screens and interactions needed in order to implement new features. In addition, it highlighted the different experiences a user can have.
WIREFRAMES
With responsive lo-fi frames, I started to build the look and feel.Use < and > to scroll between images.
BRANDING
Along with developing the Dot Mirror logo/brand mark,brand assets and UI kit guidelines were developed.
to see the design system in greater detail.
TESTING THE PROTOTYPE
Along with the hifi screens, I built a prototype built for testing it all out.Check out the prototype here
