Deliverable #1: The Swatch Page

Task

Our swatch page lets customers order sample swatches so they have a better idea of the fabric and design of the piece of furniture they might order. Our conversion from swatch order to furniture order was the highest for sales, but our swatch ordering experience wasn't up to par with what our customers wanted.

Goal

Our goal was to make it easier for customers to order swatches by taking in their feedback and delivering something friendlier (with a focus on responsiveness for mobile).

Timeline

Design: 2 weeks

The product manager and I discuss the design. I go on to create a first round mock-up, get feedback, then delve deep into creating something for the UI Designer to perfect. Once I finish, I hand it off to our UI Designer, and they make the final visual tweaks to align it with the brand and finalize it for the developer.

Development: 2 weeks

This aspect is almost all taken on by the developer alone, with some questions here and there for clarification of certain interactions and requirements in the design. Our back and forth is done over Slack and some comments on our Trello board.

QA: 1 week

QA is an all hands task, the whole team opens up the test site and takes notes for the developer. Most improvements are recorded in Trello. I take the time to get as specific as possible with which classes and IDs to modify so the developer has an easier time making changes.

Mobile Browse

UX Round 1

UX Round 2

UI Final

Mobile Filter

UX Round 1

UX Round 2

UI Final

Desktop

UX Round 1

UX Round 2

UI Final

Features in the Backburner

Favourite Swatches: Saving swatches for later, one of the biggest requests, requires accounts. We discussed basing it on cookies, but we want users to be able to carry forward their mobile progress to desktop. We've decided to release our favourites feature once accounts are up and running.

Deliverable #2: Product Details Page (WIP)

Task

Our team was set out to create a custom experience for our furniture, keeping in mind the extensive number of customizations through size, fabric and legs. We decided to improve upon our current Product Details Page because we found users had a hard time using our customization options, especially on mobile.

Goal

To make a smooth customization experience that worked well on both desktop and mobile.

Timeline

Design: 2 Weeks

We spent two weeks fleshing out both the UX and UI design. Most of these two weeks were spent iterating upon the mobile design. After a few concepts, we came to a final decision on a sticky element + scroll that really solidified our shopping experience.

Development: 2 Weeks

Our developer did an amazing job of creating this page. We had some discussion during development to clear up specific aspects of functionality, but overall it was a smooth process.

QA: Ongoing

The developer and I made many adjustments pre and post release to ensure the page worked phenomenally. When it comes to mobile, the customization experience can be complicated because of the amount of contact that has to fit on the screen. We worked together to make many small tweaks that gave us the page we have today.

We made a recent decision to transition our entire platform, so though our page works there are some QA items that are in the back burner until our platform completes this transition.

​Mobile Sample

Desktop Sample