Bed Threads BYOB | made-by-michael

Build Your Own Bundle

Original, MVP, Final design

The original design requires the user to select one colour from the dropdown menu. With the launch of new colours as a focus for 2021, the dropdown list will continue to lengthen and require further scrolling.
By expanding the colours in the MVP, we are introducing gamification and fostering creativity whilst increasing the usability of the experience.

Original

MVP

Final design

Testing

Goals

The goal of this testing is to assess the usability of the BYOB experience on Mobile. We want to gather some initial insights to create assumptions, and then continue to validate these assumptions in follow up tests. At the end of testing, we will have gathered insights to make any necessary design and functionality improvements.

Method

The method for this usability testing is blind user sessions via userbrain.com & user interviews.

Insights

Top secret, sorry.

Market leading MVP

After the launch of the Bed Threads Build Your Own Bundle MVP, direct competitors used it as 'inspiration' for their experience. They did execute some features better than our MVP! Which allowed us to conduct blind usability testing, allowing us to enhance our experience

Screen Shot 2022-06-27 at 9.30.05 pm.png

Screen Shot 2022-06-27 at 9.28.41 pm.png

MVP review

After the launch of the MVP, I conducted a detailed review of the design to uncover areas of opportunity. I noticed that there was inconstancy with the mobile and desktop progress bar as well as other usability problems which were uncovered through Hot Jar, and usability testing.

Progress bar

As you can see by the below images of the progress bar, there are some inconsistencies across the mobile and desktop experience. Specifically, the sheets and the pillowcases this was one of the focuses of the re-design.

Mobile

Desktop

Progress bar ideations

As you can see by the below Ideations, designing a progress bar that moved linearly on desktop would not allow me to solve the above problem. Some ideations of the progress bar, the font was too small for a sub-heading, and some of the steps were too close together.

Problem solving

I needed to use my lateral thinking and creativity to solve this problem. I found a lot of inspiration in how Gmail, Wix, Minecraft and the settings for my monitor are laid out. You notice with the images below that they stack their options and move left to right... why does the progress bar need to move linearly?... it doesn't, It can progress vertically, and I can stack the options.

Desktop progress bar ideations

You can see with the below ideations that I was exploring where to place the signifier and the overall UI

Progress bar desktop

Ideations features mobile

Screen Shot 2022-04-08 at 2.03.30 pm.png

Select size ideations

Flow ideations

Screen Shot 2022-04-13 at 4.54.08 pm.png

Ideation and refinement of concept across mobile and desktop

Developer notes

File orgnisation

Screen Shot 2022-04-13 at 5.00.44 pm.png

Final design

Progress disclosure

Through testing, we noticed some users were getting "excited" about the colour options and missing steps. I utilised progressive disclosure to break down the larger steps into manageable tasks.

Mobile

Signifier allowing the user to visualise the completion or incompletion of steps.

3d render allows the user to visualise their combination

Primary CTA

Start over and save for later feauture

Colour swatches

In the summary step, the 3d render becomes smaller, allowing the user to review their items whilst still being able to visualise the bundle

Signifier highlighting completion or inculpation of a step

Ability to edit the child items

Summary

Desktop

The right-hand 'workspace' allows the user to have a more efficient workflow.

The inspiration pop-up allows the user to ensure their bundle will match their aesthetic by comparing the render and inspiration side by side, thus reducing the number of amended orders, and saving the business money.