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 Reflective, E-Commerce Website

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 Reflective, E-Commerce Website

The Reflective's Old Home Page

The Problem

How might we clearly communicate the Reflective's value proposition, help build their community, and ultimately generate sales?

The Reflective, E-Commerce Website

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
The Reflective, E-Commerce Website

You can skip ahead to different sections by clicking on the navigation below

Discovery
The Reflective, E-Commerce Website

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

  1. Uncover usability problems in existing website

  2. Identify best practices, features, and patterns of similar e-commerce websites

Research Methodologies

  1. Competitive Analysis

  2. Features Inventory

  3. Heuristic Evaluation

  4. 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.

The Reflective, E-Commerce Website

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

The Reflective, E-Commerce Website

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

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce 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

  1. Find modest fashion inspiration and styling tips

  2. Attaining products to wear that express modest values

The Reflective, E-Commerce Website

A User Journey Map enabled us to empathize with the target user and understand when and where the points of friction occur.

Design
The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.

The Reflective, E-Commerce Website

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.