QUEST LOG

My team set out to design a responsive web dashboard with the goal of providing users an all-in-one destination for their wardrobe management. I was responsible for the visual, UI, and UX design of the final product. I consolidated a new design system for Finery, and created subsequent components while maintaining the brand identity.

The current Finery website once a user logs in.

On the existing website, users can create "looks" or outfits by using Finery's importing technology to generate a clothing library. Users can also browse featured wardrobes belonging to famous celebrities and fashion icons, shop for new clothes or add them to their wishlist, and schedule looks in their calendar. This is about wardrobe management made easy.

Pieces to the Puzzle

In constructing a responsive web dashboard, it was important to consider the context of the component usage, the environment of the dashboard itself, and most of all understanding space constraints (viewports, placements above the fold). Although the space for the dashboard was limited, we knew the design could be conceptually adaptive. We wanted to respect the visibility of each section without diminishing their importance. This principle informed the final design choices we made.

Since getting a sense of layout for each component was crucial, we tested different combinations of sizes with high-level mocks.

Discussion around the right combination of features to include happened at multiple stages. The initial components Finery wanted us to work with included a calendar, sales and return alerts, and a referrals section. This was a more shopping-centric experience that seemed to lack cohesive functionality for users or a theme that was consistent with what Finery's mission was.

FINAL ARRANGEMENTS

We worked with Finery to rethink the dashboard to come up with a wardrobe management experience that made more sense for the users. In the final version, we retained the calendar function to allow users to schedule their looks, and replaced the other features with wardrobe, looks, and inspiration components. This ultimate combination of features would help users confidently manage their wardrobe and garner inspiration for new looks.

BOILING IT DOWN TO A FEW

In order to align our dashboard designs with the Finery brand, I led a smaller team through an interface audit of their existing website. Although the inventory revealed design inconsistencies we itched to reduce, our focus remained on extracting the essence of the Finery brand to use with the dashboard and defining a new design system for them.

Screenshot of a small part of the inventory audit, revealing quite a number of options for button styles.

We poached parts of the existing styles to simplify into one system. To match the new visual style we were defining, I created new iconography, components, and a general style guide to serve as the foundation.

ENTER: THE GRID

Working with the grid required an iterative process. I constantly tested how the designs looked with and without the grids, putting mocks side by side. This back and forth process was crucial in order to assess spatial and dimensional harmony.

My goal was to respect clean margins and remain cautious with density to reduce the feeling of clutter on the dashboard. White space was a crucial tool, and its usage provided a poetic reflection of the fashion world.

Components created with respect to the grid. We live in a wonderful, 8 bit world.

Multiple selection

One point of iteration was around allowing users to select multiple pieces from their wardrobe to add into their looks or schedule into their calendars. Dissatisfied with the initial idea involving separate flows and buttons, we came up with a design that allowed users to choose items irrespective of the number, while ensuring their understanding of what actions could be triggered following selection.

With this flow, the selection button encompasses any number of selections to be made.

The benefit of this design is that users aren’t taken away from the home screen until they are ready to perform an action with the items they have selected. This helps distinguish between the default view for browsing and favoriting items, and the selection view for actioning them. I imagine that a  user attempting to try this out for the first time would appreciate this simplicity more.

ORGANIZATION = MENTAL AND DESIGNING AGILITY

Although the scope changed mid-process, our prior discussions were still readily primed in our minds. This helped us pivot faster, with fresh ideas. We tweaked our existing layout style while also adapting the conceptual design of the new component sections.

Additionally, working with a design system allowed for a more organized approach in the high fidelity stage and ensured future guidelines for Finery to work with. Not only was it easier for our components to share the same visual language, mocking up the final designs required little more effort than considering the padding between.

Stay tuned for news on metrics!