FINERY
Ux, UI, Visual Design
New feature development and dashboard design
Company:
Finery is a wardrobe management system that imports users' purchases from their email and store accounts to allow them to organize their wardrobe and plan outfits.
Role:
Design Lead -- I led a team of 5 designers and worked directly with the head of marketing to meet business goals. My personal design focus was the calendar feature.
Objective:
User engagement has been dropping off over time. Design a responsive web dashboard to keep users engaged and increase the frequency of the platform's key action -- look creation.
Background
Current Finery user homepage
let's get personal
Finery offers a wealth of features, overwhelming their users and leaving their key function (creating looks) to be lost in the noise.
To highlight this core functionality and increase engagement, our team set the following goals:
Create a personalized dashboard for all of a user's content.
Design an outfit calendar feature to enable users to schedule looks.
Document a design system to ensure the seamless integration of the new dashboard.
Design
new dashboard, who dis?
This project had the benefit of an existing userbase. We knew there existed two basic segments we were designing for:
The Wardrober
Links their email/store accounts & creates looks from their own wardrobe and wishlist.
The Wishlister
Does not link their accounts & uses Finery for inspiration. Creates looks from wishlist.
Finery email account connection
Filling the feeds
As the new hub for Finery's users, we wanted to house all of the users' content - including their wardrobe, their wishlist, their looks, bookmarked looks, and inspirations.
Wardrobers need practical planning: to create and schedule looks from their wardrobe.
Wishlisters need aspirational planning: to schedule their wishlist, saved looks and inspirations.
Creating three feed themes (items, looks, inspiration) ensured both users had content in each feed with which to engage.
Cooking up the look book
It is necessary to talk specifically about the item feed. Users are able to schedule content from any of the three feeds, but look creation happens only in the item feed.
Currently on Finery, look creation is fragmented between the wardrobe page and the wishlist page. This means you have to navigate to different pages to find your items and create a new look.
To build a more streamlined experience, we built look creation directly into the dashboard. Multiple select allows users to choose their items from their wardrobe and/or wishlist in one go.
After selecting their items to create a look, users can then either:
Edit & save look...done!
Schedule look onto the calendar
Get it on the calendar
The calendar component is a new feature designed to give users greater agency in planning their outfits.
Initially, we were viewing the dashboard as a 'snapshot,' and had planned to show the outfits upcoming five days into the future.
BUT, user testing revealed some concerns:
“What if I want to see what I wore last week so I don’t repeat?”
“How do I plan farther out for an upcoming trip or event?”
Valid points. So, as Ross famously said, 'PIVOT!'
Initial component sketches of the outfit planner
I ran another design studio sketching session, and we landed on three display options: month, week, and day. This makes it easier to get varying levels of detail, and to quickly preview days in the future.
The calendar was my personal design focus, so I took our sketches and translated them into lo-fi screens:
As week is the default view, I first tried to jam too many details into the screen (see the low-fidelity mobile screen above). After usability testing on mobile, I reality-checked myself and reserved event details for the Day view.
For the Month view on desktop I took advantage of the extra real estate and incorporated look previews.
The calendar feature was designed to give more flexibility in their outfit schedule. Now users will be able to plan for trips and events, even far out into the future.
Design System
refining finery
Finery, having had features continuously added since its conception in 2016, has an expansive range of components.
I wanted to ensure that this project matched Finery's look and feel, but also wanted to create a design system in order to make the entire platform more cohesive. The team performed a component audit, combing the entire site, and then created the following design system:
Wrap Up
Calendar consideration
I have a new appreciation for calendars. Visualizing the same information on three views (on desktop vs. mobile) required a lot of thought -- why would a user opt to use one view over the other...what information do they expect?
Some of the decisions were predetermined by usability (e.g. images would be too small on the mobile month calendar) and the rest I determined through iteration and user testing...tried and true.
Client Feedback:
“She was a top notch designer and project manager who delivered thoughtful, innovative solutions for our user. Her team kept our business objectives at the forefront of every design decision”
Want to learn more about this project?