Putting interior design in the hands of homeowners.
Creating a consumer facing three-dimensional bathroom design tool and generating six-figure revenue.
B&Q
Organisation: B&Q / Kingfisher Plc. / Accenture
My Role: Product Design Lead
The Team: 14 x Product Designers, 2 x Product Managers, Venture Lead, Business Analyst, 4 x Full-stack engineers, Tech Lead.
Time: 6 months
Framework: SAFe Agile
Who are B&Q?
B&Q are one of the UK’s most recognisable ‘DIY’ retailers with over 16,000 employees nationwide in 296 stores. Their £4 billion in revenue is generated through their network of stores and the DIY.com commerce platform.
2017 saw the introduction of Kingfisher Digital, a hub based in East London to expand the digital offering beyond transactional commerce. Through user interviews in-store and online, we established ‘The Fern’ - opportunities for new products to service user needs through B&Q’s online presence.
The Challenge
Through customer interviews carried out in B&Q stores, we established a persona that wasn’t directly serviced by B&Q’s existing offering. This persona was known as ‘DIFM’ or ‘Do It For Me’ and made up 70% of our interviewees. This customer wanted to be closely involved in the inspiration and design process, as well as selecting and purchasing items, but leave the installation to a professional.
At that time, B&Q only offered two options for someone with the above goals - either work with an in-store designer to create a bathroom design, or simply plan it via a shopping basket and select items in-store or via DIY.com
The Hypotheses and Objectives
By allowing the customer to complete their designs online and select fixtures using a friendly, simple yet powerful design tool, high-value transactions would be completed.
• Find a technical partner who could provide a realtime, web-based 3D API.
• Create an interactive design tool with regular user feedback.
• Connect B&Q’s entire product library with realtime product pricing and info.
• Launch MVP with limited features and iterate following feedback.
Research and Testing
Initial questionnaires were deployed via DIY.com and through in-store interviews in B&Q’s London stores. We asked customers what the reason for their visit was and established a significant number were at the beginning of a design journey, considering a refresh of their kitchen or bathroom.
As design and development progressed we partnered with Bunnyfoot for ethnographic research, making use of their interview rooms and testing space where we invited in-store customers to test paper/digital prototypes.
Outcomes
We appointed Digital Bridge (now Fixtuur) as a technical partner to integrate a web-based, interactive 3D environment in which our design tool would be based. This worked across platforms with impressive performance and scalable, connection dependent quality settings.
The concern from customers was the ease-of-use and many potential users were not only designing their bathroom for the first time, but were also not particularly computer literate. This meant in-product experience needed a clear UI and comprehensive on-boarding/assistance.
Competitor Analysis and Inspiration
Since there weren’t any direct competitors in this space at the time, we explored out-of-sector examples. This included design tools for footwear, for example. NikeID is a brilliantly simple tool for users to create a customised sneaker. Many car websites also had configurators that were simple to use with clear instructions. Whilst not as complex, these served as the ideal inspirations when considering how our UI might work.
Using Pinterest we collated boards of imagery and printed and pinned our favourites to the wall to help with creative immersion over the course of the design stage.
Design Phase: Journey mapping
As a highly interactive three-dimensional tool with almost limitless outcomes, there wasn’t a clear ‘critical path’ for a given user. Whilst checkout was the ultimate objective, it may be many minutes and even multiple sessions before a user had populated a basket. Early feedback suggested users were coming back to their designs multiple times over the course of days and weeks. This meant a save function along with a list of saved designs was fundamental.
We also tested the placement of the sign-up flow, finding that users preferred to sign-up for an account at the point of saving their designs.
Sketching and UI Concepts
Taking inspiration from the customisation tools in the reference stage, we started sketching interaction interfaces and UI elements. Once a journey was finalised we created UI concepts. Each team member created a set of design concepts (static and motion) and the best elements from each were selected to carry forward into the final design.
Final Designs
The Plan My Bathroom product was rolled out in two key stages. For the MVP, key functionality included drawing or selecting an initial room shape, populating it with items and the purchase journey. To establish customer appetite for further features we trialled features with a ‘coming soon’ dialog. We discovered adequate demand for a decoration feature which added paints and tiling to the design and purchase process.
Developed in line with the updating of B&Q’s brand guidelines for screen, the UI echoed interface components from DIY.com but with special consideration around motion, pacing and interaction. We knew that users were spending extended periods of time on the product so informed by the ‘Aesthetic-Usability Effect’ we factored in a pleasing visual design to enhance the overall user experience.
Technical Challenges
The main design related challenge throughout the development of Plan My Bathroom was the realtime 3D environment. This meant working closely with the engineering team and Digital Bridge to push the quality of the 3D engine to a point that the results were satisfactory but the remainder of the UI still ran smoothly. We tested internally on a large number of desktop and mobile devices.
As part of the design tool, users were able to render a photoreal version of their creations. This was impossible in a realtime setting and was handled off-line on external servers. Although we were able to minimise the time this took, it still involved a wait of up to 90 seconds (and a cost of almost £10 per render to B&Q) so was ultimately removed.
Design System
At the time of development, B&Q didn’t have a digital brand system or any related component library. As part of the design overhaul we partnered with engineering to create design system documentation which included information on component usage, downloads and code snippets.
Component names also matched those used by the developers to avoid the recreation of existing components and maximise re-use.
Measuring success
A number of stakeholders were sceptical that there was an opportunity to take such high-value projects online. The average basket cost at B&Q was just over £150. A typical bathroom project would often cost at least 25x more.
However, the initial excitement around customers being able to design their bathroom in their own time, at their own pace, in their own home led to huge success stories.
Although regarded as somewhat of a trial, shortly after the launch of Plan My Bathroom, Kingfisher Digital started work on Plan My Kitchen.