Z Lounge Outfit Builder

An interactive outfit builder for Z SUPPLY customers to visually create their complete outfit set.

TIMELINE:
3 Weeks

TEAM:
Z SUPPLY Developers

MY ROLE:
Product Designer

TOOLS:
Adobe XD, Adobe Photoshop, Basecamp

THE NEED:

Encourage users to purchase a matched set from Z SUPPLY’s Lounge collection instead of just an individual item.

01. THE PROCESS

02. IDEATION + GOALS

As the sole Product Designer on this project, I had to conceptualize a way for users to better interact with Z Lounge, the company’s best promoting category that would best fit the marketing goals in place.

THE BUSINESS OBJECTIVES:

A selling tool for customers to buy a matched set as oppose
to a singular top.

For example, we wanted the user to purchase a matching top to
a bottom for a loungewear outfit as oppose to just the bottom.

THE USER OBJECTIVES:

Higher engagement and wow-factor: users would interact more with the Z SUPPLY website with gamification. This experience gives users a visual tool for the customizations they make.

INSPIRATION:

No Plans NYC PJ Customizer —

Pros:

  • On brand

  • Variety

Cons:

  • Inclusion of dresses in the “Tops” section makes the builder messy when it overlaps when paired with any bottoms.

  • All of the products featured in the PJ Customizer were out of stock

Outdoor Voices OV Kits —

Pros:

  • On brand

  • Compartmentalized

  • Size guide

Cons:

  • Not much variety in apparel style to mix and match with

  • The customization is within the colors

  • Individual price of items not specified in builder

TASK FLOW:

01 —
Matched Set only:

1. Select top and size
2. Select bottom and size
3. Skip Complements
4. Skip Accessories
5. Review + Add to Cart

02 —
Entire Outfit Build:

1. Select top and size
2. Select bottom and size
3. Add Complements
4. Add Accessories
5. Review + Add to Cart

LOW-FIDELITY:

*included option to skip adding accessories and complements (cardigans and robes)

Step 1: Build your set

Step 2: Add accessories

Step 3: Complement the look

Step 4: Review and add to cart

03. ITERATION

After presenting the low-fidelity prototype, I’ve received positive feedback on including the other steps of adding accessories and complements as well as how the UX of the build. But, my UI needed finessing.

MID-FIDELITY:

For the next iteration, I opted for a cleaner look by replacing the boxes for the steps panel with singular dividers.
I matched the UI iconography and font of the builder to the look of the general site for an evergreen look.

04. HANDOFF + TESTING

After getting the approval with the visuals and interaction of the prototype, I handed off the wireframes and key UI element specifications to the development team.

Z LOUNGE BUILDER:

KEY TAKEAWAYS

This was truly a fun project to work on! I’ve always been fascinated with tools (even games) that allowed me to customize my look. I grew up using Polyvore to collage outfits and create inspiration on their site, so creating this brought back a lot of nostalgia.

Working across departments — Working with the dev team was a very eye-opening experience as a designer. I’ll definitely carry more thought of how my design goes into development and how to best translate how I see it visually to how it actually appears and works.