Mirror
A fashion business taken online.
Project Overview
Problem:
Mirror, a well-established fashion brand, has been operating successfully for the past 25 years with physical stores only. Due to the limitations of their brick-and-mortar presence, the brand was unable to reach out to a wider customer base. Therefore, they were looking to venture into the online market to expand their business and cater to the needs of their customers who prefer to shop online. How can we design a user-friendly online platform that retains the brand identity and delivers an exceptional customer experience?
Solution:
End to end responsive web design.
My Role:
Sole UX Designer
Branding, Prototyping, Usability Testing
My Tools:
Figma, Figjam, Miro, Optimal Workshop
UX Research
Driven by the desire to understand user pain points and preferences, I conducted a series of in-depth interviews with avid online shoppers. Their valuable feedback and insights served as a guiding force in the development of this website, inspiring key features and shaping the UI and visual design. By leveraging user-centric design principles, this platform was designed to deliver a seamless and engaging user experience, tailored to meet the needs of our target audience.
Key UX Interview Takeaways:
Users are motivated by efficiency, simplicity, personalization, exploration, and convenience when it comes to the design and navigation of a site
Overcomplicated checkouts & shipping times can make or break a purchase
Users like certain aspects of both in person and online shopping, use it for different things, and like the option for both
Users look for sales, banners, featured items and social media to advertisement as a way that informs their online shopping process
In the competitive landscape of e-commerce, it was crucial to identify the strengths and weaknesses of both direct and secondary competitors to gain a comprehensive understanding of how to position a popular brand for success. By conducting a thorough analysis, the key takeaways were centered on two main questions: how can we visually differentiate ourselves and elevate an already thriving brand? These insights were instrumental in shaping the design direction, informing strategic decisions, and ultimately, ensuring that the platform stands out in a crowded market.
MEET JULIA, OUR USER PERSONA
Business Goals, User Goals & Technical Considerations
By developing a detailed and visually-driven outline of our goals and considerations, we were able to lay a strong foundation for our strategy to reach the Minimum Viable Product (MVP) stage. This exercise enabled us to anticipate potential challenges and develop contingency plans, ensuring that we stay on track towards achieving our goals. With a clear and well-defined strategy in place, we were able to move forward with confidence, knowing that every decision we make is aligned with our ultimate objectives.
Task & User Flows
At the core of any successful e-commerce business lies the ultimate goal of driving user engagement, ultimately resulting in a successful purchase. To achieve this goal, the user and task flows were meticulously designed to support the user journey and encourage meaningful engagement. By incorporating features such as wishlists and personalized recommendations, we were able to keep users engaged and encourage them to return to the platform. This approach not only drives conversion but also fosters a strong and loyal customer base, ensuring sustained success for the business.
Card Sorting. Mapping. Sketching.
Crafting a well-organized information architecture for the website posed a challenging task. To simplify the process, I initiated a user card sorting activity to gain a comprehensive understanding of their sorting preferences, thus reducing the number of clicks required to complete tasks and ensuring a seamless user experience. I analyzed competitor site maps to identify industry best practices and potential areas for enhancement. Combining these insights, I developed a site map that adhered to the brand's requirements and provided a strong foundation for the design process. Starting with initial sketches, I explored a range of design concepts and home screens before finalizing the digitization of the wireframes. The result is a highly usable and visually engaging website that has been optimized for maximum user satisfaction.
Site Mapping
Sketching
Wireframes
By converting my wireframes into a digital format and incorporating a lo-fi mode, I was able to breathe life into my ideas beyond the research phase. While the process of wireframe production was time-consuming, it was pivotal in honing and enhancing the ultimate designs. Soliciting feedback from fellow designers also played a significant role in elevating the responsiveness of the designs.
Branding & Visual Design
For Mirror's branding and visual design, my goal was to create a stunning and bold visual identity that would set the brand apart from its competitors. Through my research, I discovered that many users find online shopping to be stressful and overwhelming. To alleviate these feelings, I chose a color palette that would create a sense of calmness and relaxation throughout the design, while still standing out from the competition. In contrast to the typical blues, blacks, and reds used by competitors, I sought inspiration from the lavender plant, which features beautiful purple flowers and a green stem. Lavender is known for its calming properties and has been used in traditional herbal medicine for centuries. Drawing from this inspiration, I crafted a visual identity that reflects the plant's natural beauty and therapeutic benefits, creating a unique and memorable branding experience that resonates with users.
The Visual Experience
Usability Testing
Test Objectives:
Test the ease of navigation and flow of overall design
Test methods users use to search/browse items
Test flow of users filtering/sorting items in order to find items
Test the ease and use of efficiency of the check out flow
Observe hesitations, confusion error, challenges for completing tasks
Test Subject:
High-Fidelity Prototype V.1 of Mirror desktop site
Participants: 3
Ages: 23-31
Participant Biases: Previous research participants, experienced online shopper
Final Prototype
Successes, Challenges & Next Steps
Throughout the design process, I gained valuable insights and experiences that shaped my approach and helped me deliver a strong outcome. I was fortunate to have research participants who provided detailed and insightful feedback, which helped me understand the user pain points and develop a design that addresses them. While conducting research on competitors and organizing UX interview results was challenging, it helped me identify unique opportunities to stand out in the market. I am particularly proud of the color palette and design that I created, which incorporates calming elements inspired by the lavender plant.
Usability testing was critical in refining my design and improving user experience. I received valuable feedback that helped me make necessary adjustments and iterate on the prototype. However, I did face some challenges during the design process, particularly in building the prototype with my limited knowledge in the beginning.
Looking ahead, I plan to make further adjustments to the design and wording based on feedback from usability testing. I will continue to gather feedback and refine the site until it meets the brand's and user's needs. Overall, this project has been a valuable learning experience that has equipped me with new skills and insights for future UX design projects.