Sleep Number Digital Onboarding

    Preparing new bed owners for life changing sleep (sooner)

Client

Sleep Number
(In-House)

Timeframe

Mid 2021

Roles

UX Research
User Flows
Wireframing
Visual Design
Motion Design
Prototyping
QA & Accessibility Testing

Project Summary

A significant upgrade in the company’s backend order booking process unlocked the opportunity to surface key post-purchase action steps to the customer within seconds of them submitting their order—a vast improvement to the hours and sometimes days it had required in the past. Tapping into this new capability, we leveraged the customer’s momentum and excitement immediately after committing to a life changing purchase to surface action items on their next steps; including home delivery scheduling, registration of their smart bed companion app, and enrollment into the company’s insider program. Careful evaluation of competitor trends and analysis of industry research gave a strong head start, but the unique nature of our technical constraints and business objectives set this project up as somewhat of a trailblazing endeavor. Complexities aside, the goal was straightforward: get as many users as possible to complete their next steps as soon as they finished their purchase, integrate these actions items seamlessly into their existing purchase journey, and ensure it’s highly personalized to the exact circumstances of each individual customer.

 
 

 The Challenge

 

As a part of modernizing the post-purchase customer experience for online customers and matching the company’s well-guided onboarding process for those purchasing in-store, our team was tasked with creating a seamless transition from order submission into several high priority action items to prepare them for delivery of big ticket purchases. Historically hampered by technical logistics, the business-facing process of fully booking an order relied on a sequence of complex steps that slowed users from taking key actions, sometimes for multiple days beyond their actual online purchase. Scheduling product delivery, registering the app for controlling their smart bed, and enabling enrollment into the company’s loyalty program were all crucial activities a purchaser was blocked from until receiving an email prompting these next steps. This fragmented process resulted in many users failing to act on next steps and substantial customer service resources were devoted to customer follow-ups in order to complete final delivery and installation of the product. 

 

 The Solution

 

Careful evaluation of similar industry experiences and analysis of user experience research gave a strong head start, but the unique nature of our technical constraints and business objectives set this a project up to be somewhat of a trailblazing endeavor.

Mapping user flows for existing and ideal scenarios of completing onboarding activities gave us insight around new areas of opportunity. Plotting the choreography of omnichannel entry points, backend integrations, and nuances of user navigation gave us our immediate and future targets for best guiding customers.

Aligning to the agile vision for balancing an effective MVP with future scalability, we dialed in on the most impactful moment in the user journey at the order confirmation page and took a modular approach to support the highly personalized experience, considering the variety of possible user scenarios. Our plan also left to door open to resurfacing next steps at a later point for future iterations within a user’s account. 

 
 
 
Original User Flow
 
Updated User Flow
 
 

The ephemeral nature of an order confirmation page posed challenges in directing users through the complete set of activities without directing them away from a page that couldn’t be navigated back to. User research also indicated that customers had very specific goals at this point in the shopping journey: check to be sure all the submitted info is correct, be sure the price charged is what they expected, and in many cases they were uncomfortable leaving this page until receiving a confirmation email proving their line of communication to the company was successfully connected.

Ensuring a harmonious integration of this new onboarding module, all steps guided users through each flow within popover lightboxes to maintain their sense of place (or in some cases sending them off to a new tab for more technical tasks). This allowed us to quickly run them through various functions — historically found in disparate locations across multiple channels — with a format that felt unified and clearly guided the way they would experience in-person with a trained sales professional.

 
Confirmation – Focus List 1.png
Confirmation – Focus List 2.png
Confirmation – HD Modal – Loading 2.png
Confirmation – HD Modal – Step 1.png
Confirmation – HD Modal – Step 2.png
Confirmation – HD Modal – Step 3.png
Confirmation – HD Modal – Delivery Confirmed.png
Confirmation – Focus List 3.png
Confirmation – SIQ Modal – QR Code.png
Confirmation – Focus List 4.png
Confirmation – ICR Modal – Truncated T&C.png
 
Confirmation – SIQ Modal – App Store Links.png
 
Confirmation – HD Modal – Step 1.png
 
 
 
 
 

We had a predetermined set of onboarding steps existing for all possible purchase scenarios, at this point a ruleset was needed to show what content each step required before and after user completion, what criteria existed for when to display them, and how to determine the definition of done for each. This steps matrix clarified implementation logic and kept the team on the same page as a source of truth during our increasingly complex conversations while building out the feature. 

 
Next Steps – States and Criteria 2.png
 
 

In addition, there were interdependencies between some steps involving user authentication affecting the order in which user’s could choose to take action. These extra complications were addressed by studying the nuance of authenticated and guest checkout flows, which informed the mapping of divergent flows, ensuring no users experienced dead ends in completing their checklist.

 
 
 
 
 
Join InnerCircle – Use Case Flows B.png
 
Join InnerCircle – Use Case Flows C.png
 
 
Join InnerCircle – Use Case Flows A.png
 
 
 

With logic established, the groundwork was laid to fit the pieces together. Designs for existing feature flows were deconstructed and new approaches were explored. Ultimately visual design efforts were focused on a checklist pattern for presenting action items and much of the content for completing steps within popovers lifted heavily from established designs to carry a sense of continuity across the site.

Brand photography was trimmed and treated for the card aesthetic of each step to draw user attention and set the tone for each activity on desktop and tablet breakpoints. Mobile treatment opted for a simpler collapsible accordion pattern to minimize any friction that might prevent users from scrolling further to see their actual order confirmation info, which was noted as an important goal for customers in prior research.

 
 
Next Steps – Confirm Order – New User.png
Next Steps – HD Schedule – New User.png
Confirmation – HD Modal – Loading Screen 1.png
Confirmation – HD Modal – Loading Screen 2.png
Confirmation – HD Modal – Loading Screen 3.png
Confirmation – HD Modal – Loading Screen 4.png
Next Steps – HD Modal – Step 1.png
Next Steps – HD Modal – Step 2.png
Next Steps – HD Modal – Step 3.png
Next Steps – HD Modal – Confirmed.png
Next Steps – SleepIQ – New User.png
Next Steps – Create Account – New User.png
Next Steps – InnerCircle Unlocked – New User.png
Next Steps – IC Modal Terms – New User.png
Next Steps – InnerCircle Complete – New User.png
 

 The Reflection

 

After supporting the engineering team through several sprints of development and pushing our MVP for the new feature live to the site, I can look back on this as being one of the more technically complex projects of my career. Tracking ongoing conversations around user authentication and backend order processing intricacies with multiple engineering teams proved challenging at times, but following the thread enough to identify potential hangups in the experience helped me build a well-considered solution; thoughtful both in cases of user success and moments of system failure.

As the first iteration of the project settles into our permanent checkout experience for online customers, I look forward to learning the full impact it has on business goals and customer success over time. In the early stages of post-launch, I can reflect on this project as an experience of tapping deep into my strengths within technical design. I was stretched to digest robust internal processes unseen (and of no interest) to the end user in order to synthesize an experience that customers don’t need to think much about to use effectively. Walking away from this experience I can say my intuition for easily overlooked technical nuances is greatly sharpened, now knowing more confidently when to pause and dig deeper for understanding of complex systems.

 
 
 
image-asset.png

Up Next

SleepNumber.com:
Homepage Hero

UX/UI Design