Bed Threads Product Page
Responsive_design_presentation_temp.jpg

Brief

Work end-to-end redesigning the Bed Threads home page utilising various forms of research, methodologies, best practices to help drive the Ideation and design.

Competitor analysis

Screen Shot 2022-03-23 at 10.42.42 am.png
Screen Shot 2022-03-23 at 10.42.51 am.png
Screen Shot 2022-03-23 at 10.43.01 am.png
  • Square PDP image brings more content higher up in page fold. Small breadcrumb allows for context & navigation

  • Very minimal product copy

  • Even as the exclusive BNPL, Afterpay messaging does not feature prominently on the page. It’s quite a subdued callout

  • ‘Buy it now' button links directly into Checkout 'Info’ page one.

  • Only offer one BNPL (affirm)

  • PDP image are landscape

  • Dedicated reviews page

  • On page Linen education supported with video asset

  • NEW callout about colour swatches

  • Use secondary and tertiary background colours to create hierarchy and break up the page

  • “On-page” bundling. Has options for duvet insert/ pillow

Screen Shot 2022-03-10 at 4.03.10 pm.png
Screen Shot 2022-03-10 at 4.03.35 pm.png
Screen Shot 2022-03-10 at 4.03.55 pm.png
Screen Shot 2022-03-23 at 10.44.49 am.png
Screen Shot 2022-03-23 at 10.45.04 am.png
Screen Shot 2022-03-23 at 10.45.29 am.png
  • Image with dimensions is featured in the gallery.

  • Sophisticated image gallery with 360º and VR feature

  • Order Swatch CTA

  • Detailed product specifications

  • Promotes styling advice as well as CS. CS agents are referred to as “stylists”

  • USP call out

  • Commonly asked questions on the PDP

  • Less focus on reviews

  • Mobile sticky add to cart is at the top of the page - is this to stay out of the viewport/ focus of the user?

HotJar Insights (original design)

​Heatmaps

  • Only 97% users scrolled below the fold, 75% scrolled to the swatches and only 50% of users scrolled past the size selector.

  • Most interacted with elements are the colour swatches (approx 60% of all on page taps), lifestyle image (14% of taps), “Read More” link (5%), Reviews <1%. This doesn’t include the sticky add to cart

 

Observed behaviour from session recordings:

  • A few users oscillated between BYOB and Bedding Sets. They had added a BYOB bundle added to their cart, had their cart open and were referencing the Bedding Set Page and click between swatches.

  • A few users tired to click the thumbnail item in checkout thinking that it is linked.

  • One user looked “confused”, cursor hovered over Bedding Sets, then Sheet Sets and back to bedding sets a few times. It seemed like they didn’t know which one to click.

Synthesised product page research 

​Product images

  • “In a February 2018 survey from Salsify, 60% of US digital shoppers said they needed to see an average of three or four images when shopping online. And another 13% said they needed five or more.“  Source link here

  • "Add context to your product. Merchandise shown in context are more memorable and will give a sense of how it will look like in the real world. Don’t sell your product. Sell the experience that your product offers." Source link here

Reviews

  • “according to brightlocal local consumer review survey 2015. “ 90% of 18- 34 year old consumers trust online reviews as much as personal recommendations”

  • "According to a study, 68% of consumers said that they are inclined to trust more when there are both bad and good reviews. 30% of consumers suspect inauthenticity when they don’t see anything negative." Source link here

User

  • "79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word." Source link here

Personas

persona 2 (2) 1.png
persona 1 (2) 1.png

Card sorting workshop

Conducting several workshops, from gathering stakeholder requirements to collecting data from various touchpoints.

Screen Shot 2022-03-23 at 1.14.35 pm.png
Screen Shot 2022-03-23 at 1.16.53 pm.png

Ideation Infomation architecture - Low Fidelity 

Scan 2021-10-18_15-25-26(13).jpg
Scan 2021-10-18_15-25-26(11).jpg
Scan 2021-10-18_15-25-26(12).jpg
Scan 2021-10-18_15-25-26(9).jpg
Scan 2021-10-18_15-25-26(10).jpg

Features - Low Fidelity ideation 

Scan 2021-10-18_15-25-26(7).jpg
Scan 2021-10-18_15-25-26(5).jpg
Scan 2021-10-18_15-25-26(3).jpg
Scan 2021-10-18_15-25-26(4).jpg
Scan 2021-10-18_15-25-26(8).jpg
Scan 2021-10-18_15-25-26(6).jpg
Scan 2021-10-18_15-25-26(1).jpg
Scan 2021-10-18_15-25-26(2).jpg

Mid fidelity features Ideation

After ideation of the features in Low fidelity, I then took the designs into Figma and ideated them out in mid/high fidelity. I like to ideate in this fidelity as it allows me to understand the overall experience and how the UI reflects the branding.  As a designer ideation is my most powerful tool.

 .png

Sticky add to cart - Mid/high fidelity ideation

8 (3).png

Methodologies

Throughout my practice, I leverage various methodologies allowing me to validate or in invalidate my ideas, doing this allows me to remove my bias and create features that are usable for the user.

 

In this case, I leverage mobile usability methodologies to increase the usability of the size select feature. By placing the pushing popup at the bottom of the viewport it allows for greater usability for this feature.

Frame 681.png
Frame 64 (10).png

Dev Hand over

Screen Shot 2022-04-12 at 12.01.03 pm.png
Frame 785.png

Jimmy Brings

RØDE Microphones

Zest