ROLE
UX Designer
WEBSITE
Overview
The Reflective is a Modest Fashion website that aims to welcome and build a community of modest fashion enthusiasts. They monetize their website by offering a marketplace and blog of modest fashion options that include affiliate links to external shops.
Project Brief
I was brought onto this project as a freelance UX Designer, working with an organization called Make it MVP. Its mission is to create meaningful viable products by bringing companies, designers, and developers together.
The Reflective website had originally been focused on their newsletter and blog but have expanded their offerings to include an affiliate links marketplace. Due to its shift in business, The Reflective needs to redesign its website to align with its new offerings.
The Problem
How might we clearly communicate the Reflective's value proposition, help build their community, and ultimately generate sales?
Users cannot clearly understand what the website offers and the unorganized information architecture with a complicated user interface made it difficult to navigate and view information. Conversion and usability opportunities much to capitalized on.
The Solution
A complete redesign of the website, focusing 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, and Wishlist
What success looks like
My Responsibilities:
While every member of the team helped each other out to some extent, I took ownership of the following:
Competitive Analysis & Feature Inventory
User Journey Map
Sketches (Home, About, Shop, Signup, Product)
Wireframes (Home, Signup)
High Fidelity Screens (Home, SignUp)
Interactive Prototype
Design team from top left: Elliott Boswell, Phuong Tran, Surbhi Chelawat, Christina Manikus, Jeremy Cowan, Nabila Hisbaron
Traci Levine, the founder of Make It MVP, participated in every meeting and provided advice as a product manager. Our design team met weekly with the founder, marketing, and development teams in order to receive stakeholder buy-in before moving ahead with the next task.
Research 🔍
The first phase of the project was to learn more about the business. We were introduced to stakeholders during our first meeting. By reviewing the Brand Deck with the founder - Liza Sakhaie, and marketing lead - Danielle Immerman, we became familiar with the mission, goals, brand, and values of The Reflective.
Analytics Review
I began by digging into the historical data, surfacing user pain points and barriers to conversion. The drop-off rate on the pages is close to 50%, hypothetically due to a lack of understanding at a glance of what the site offers or due to a distracting design.
Competitive Analysis & Feature Inventory
I led competitive analysis and feature inventory to evaluate competitors' modesty and polish, aligning with The Reflective's goals. For the detailed analysis with screenshots, Click here
Key Takeaways
Enhance navigation by optimizing filter, sort, and the top navigation bar
Collecting user preferences by implementing account, wishlist, and bookmark functionality in order to guide content creation
Build community by clearly communicating the value proposition, making blog posts shareable, and adding a comment section to blogs
Interviews
We conducted 6 interviews and all participants were modern women between the ages of 20-40.
Objective: Identify usability problems and gauge user sentiments on the current website.
Testing Methods: Moderated (Via Zoom)
Key Questions:
What adjectives or feelings does the website give the user?
Does the user understand what the website is about and for?
Can users easily find and buy the clothing they want?
Personas
A New User and an Existing User Persona were created based on our user interviews and affinity mapping workshop.
Information Architecture
Design
To harness our collective creative potential, each team member cerated sketches for every page. Screen division occurred for both wireframes and high-fidelity screens, with my focus on crafting the Home and Login/Signup pages, while also offering constructive feedback on others.
Done in grayscale, this step was to visualize the hierarchy of the pages. It was in this step that I proposed to add more visual elements in the blog section to let users know about different blog categories.
In the next step, when we had the stakeholder's buy-in, we worked on creating Mid-Fi wireframes so they could visualize what the page will look like with fonts, color, and actual copy.
I 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. As the project progressed, I presented the initial design draft based on the mid-fidelity wireframes to the founder, eliciting valuable feedback. Each iteration saw refinement as I gained a deeper understanding of the visual direction envisioned by the client, resulting in progressively improved versions.
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.
Learnings
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
Efficiently communicate design changes. Early alignment with the founder helped identify constraints and goals.
Document preferences as stakeholders may switch between ideas.
Receive honest, constructive feedback during weekly design critique sessions. As a team, we discussed our decision-making process, refined our prototypes, and explored new ideas.
Set communication and response expectations - some team members were not responsive on Slack for days at a time
Final Thoughts
In conclusion, our designs focused on meeting the modest fashion shopping and inspiration needs of our users. It is aligned to e-commerce best practices while communicating the value proposition of The Reflective and building a community around them.
We have handed over the specifications to the development team and have been in communication with them as they work on the site.