The Reflective's Old Home Page
Overview
Timeline
Sep-Dec 2021
My Role
UX Designer
Context
Audit and redesign of a Modest Fashion e-commerce website
Background
I was brought onto this project as a freelance UX Designer, working with an organization called Make it MVP. Its mission is to bring companies, designers, and developers together to make meaningful viable products.
The company we worked with, The Reflective, is a website catering to modest fashion enthusiasts. The Reflective offers a safe community in which to explore what dressing Modestly means to the user. The website had originally been focused on their newsletter and blog but have expanded their offerings to include an affiliate links marketplace. After shifting its business focus to the marketplace, The Reflective needs a website redesign to align with its new offerings.
The Design Team
Clockwise from top left:
Elliot Boswell - Lead UX Designer
Phuong Tran - UX Designer
Surbhi Chelawat - UX Designer
Nabila Hisbaron - UX Designer
Jeremy Cowan - UX Designer
Christina Manikus - UX Designer
Traci Levine, the founder of Make It MVP acted as a product manager for this project, sitting in on every meeting and advising our process. We used Airtable to manage our sprints and Slack to communicate.
The Problem
How might we clearly communicate the Reflective's value proposition, help build their community, and ultimately generate sales?
Our Team's Redesign of the Home Page
The Solution
A complete redesign of the website, focussing on improved usability, clear communication of the value proposition, and alignment to the mission, brand, and goals.
Our team redesigned the following pages of The Reflective's website to better serve the business goals and overall user experience
Home
About Us
Blog
Shop
Login/Sign Up
Wishlist
While everyone in the team ended up helping each other out to some extent, I was responsible and took ownership for the following:
Competitive Analysis
Feature Inventory
User Journey Map
Sketches (Home, Blog, About, Shop, Product)
Wireframes (Home, Blog)
Design System
High Fidelity Screens (Home, Blog)
Interactive Prototype (Home, Blog)
Process
You can skip ahead to different sections by clicking on the navigation below
Discovery
The Contents overview of The Reflective's Brand Deck
In our first meeting, we were introduced to the stakeholders. We familiarized ourselves with The Reflective's mission, goals, brand, and values by reviewing the Brand Deck together with the founder, Liza, and marketing lead, Danielle.
Research Goals
Uncover usability problems in existing website
Identify best practices, features, and patterns of similar e-commerce websites
Research Methodologies
Competitive Analysis
Features Inventory
Heuristic Evaluation
User Interviews
I led the completion of the competitive analysis and feature inventory. Our design team met with the founder, marketing, and development on a weekly basis to get stakeholder buy-in before moving on to the next task.
We plotted the competition to show where they fall according to how Modest they are and how much Editorial Polish they possess, two factors The Reflective aims to convey
This Feature Inventory comparing relevant features helped us pinpoint opportunities
Collecting user preferences data to guide content creation by implementing user account, wishlist, and bookmarking capabilities
Increasing ease of navigation by the optimizing filter, sort, and top navigation bar
Building community by clearly communicating the value proposition, making blog posts shareable, including a comment section in blogs
Home Page with Heuristic Usability Evaluation Notes
The Heuristic Evaluation confirmed many of our findings from the competitive analysis and feature inventory.
By following e-commerce best practices and common patterns, The Reflective will increase usability and the overall user experience of their website.
A New User and an Existing User Persona were created based on our user interviews and affinity mapping workshop.
The 6 interviews included a usability test of the current website. They further underlined the issues that the competitive analysis and heuristic evaluation had uncovered. Along with data from an existing user survey provided by The Reflective, we held an affinity map workshop as a team to synthesize the findings.
Jobs To Be Done
Find modest fashion inspiration and styling tips
Attaining products to wear that express modest values
A User Journey Map enabled us to empathize with the target user and understand when and where the points of friction occur.
Design
Style Tiles inspired by images provided by The Reflective Marketing team helped to inform the theme of our design system.
The Reflective team reviewed each tile and selected the Purple color scheme with a mix and different fonts.
To harness the full power of our collective creativity, everyone came up with sketches for each page. We divided the screens for the wireframes and high-fidelity screens. I took ownership of the Blog pages while advising and providing feedback for the other pages.
Low Fidelity Wireframes
Done in grayscale, this step was to visualize the hierarchy of the pages. It was in this step that I proposed the idea to add a comment section to the blog posts as I had seen on many competitor's sites to help users feel a sense of belonging, connect with each other, and achieve The Reflective's goal of building community.
It was in this step that I proposed the idea to add a comment section to the blog posts as I had seen on many competitor's sites to help users feel a sense of belonging, connect with each other, and achieve The Reflective's goal of building community.
Middle Fidelity Wireframes
In this step, color and copy were added to show how they would look together on the pages. I opted for the neutral color style for the photo-heavy blog posts - to place emphasis on colors in the photos and the purple color style for the text-heavy blog posts.
While translating the low-fi grayscale wireframes, I also decided to include images in the "Explore Blog Categories" to give users a visual preview of what each category is about.
High Fidelity Screens
We constructed the high fidelity screens with mostly images actually found on The Reflective's site as well as images provided to us from their marketing team. In this step, we experienced scope creep, as the number of pages actually needed was realized. The blog as a whole needed its own landing page, as did each blog category.
I proposed the addition of another top navigation bar for the blog section in order for users to navigate more easily. This is a pattern I had seen on Sheerluxe, a competitor and inspiration to The Reflective.
I redesigned the drop-down menu with ease of navigation in mind, I also included a promotional space to show users new items they might be interested in.
Final Designs
Conclusion
My Contributions
Testimonials section - leverages social proof and creates a sense of community
Commenting capability on blogs - leverages social proof and creates a sense of community
Targeted content writing - clearly communicates the value proposition
Keeping the team focused on goals - recognizing individual biases and reiterating the goals of improving user experience, building community, and increasing conversion/subscription sign-ups
Translating Fashion industry jargon The Reflective's team used to our design team and product manager
Learnings
Domain knowledge matters - I spent a large portion of meetings translating what The Reflective's team meant when they were describing the visual identity and personality of the company in fashion terms
Overcommunication is best - founders should be looped in as frequently as needed - in this case, the mood board/style tiles should have been done as a comprehensive workshop with the entire team and stakeholders
Documentation is important as stakeholders may switch their preferences back and forth from different ideas
Time is crucial - staying on track in meetings, prioritization of tasks and, summarizing meetings are all important to be efficient and effective within the constraints
Set communication and response expectations - some team members were not responsive on Slack for days at a time
Final Thoughts
Overall, our designs aimed to achieve the user goals of fulfilling their modest fashion shopping and inspiration needs, aligning to e-commerce best practices while aiming to achieve The Reflective's business goals of communicating their value proposition and building their community base. Our design team has handed off the specs to the development team and we have been in communication while they work on developing the site.