3D kitchen planner ·

3D kitchen planner ·

3D kitchen planner ·

3D kitchen planner ·

Accelerated time-on-task by 58%

Accelerated time-on-task by 58%

Accelerated time-on-task by 58%

Accelerated time-on-task by 58%

Solo project · Used Figma, Rive & Useberry

Solo project · Used Figma, Rive & Useberry

Solo project · Used Figma, Rive & Useberry

Solo project · Used Figma, Rive & Useberry

a 3D kitchen planner on a televsion mockup
a 3D kitchen planner on a televsion mockup
a 3D kitchen planner on a televsion mockup
a 3D kitchen planner on a televsion mockup

Introduction


Wren Kitchens, a kitchen retailer with 7,000 employees, £1b annual sales¹, shipping 2,000 kitchens a week² with 109 showrooms in the UK and 10 in the US³. “Kitchen Sales Designers” sit in those showrooms, and comprise most of Wren's 3D kitchen planner user base.




Introduction /

The problem


Kitchen sales designers are hindered by time-consuming administrative tasks and an inefficient 3D planner, leading to reduced selling time and fewer secured leads.




Introduction /

The solution


A 3D kitchen planner that balances speed, content, and features to equip sales reps for efficiently meeting customer needs, allowing them to focus on selling.




Introduction /

The business & user needs


Scalability

The UI needed to accommodate upcoming features to the 3D planner, such as changing the outside scene.


Reduce friction and time-on-task

Salespeople needed to go from a blank kitchen render to a fully furnished one as efficiently as possible.


Style surfaces, add props and render a kitchen image

To furnish a kitchen completely, salespeople must proficiently perform these three tasks to meet the customer's design criteria.

an in-person image of a salesperson and a customer planning out their kitchen design

A typical design appointment setup (old 3D kitchen planner)

an in-person image of a salesperson and a customer planning out their kitchen design

A typical design appointment setup (old 3D kitchen planner)

an in-person image of a salesperson and a customer planning out their kitchen design

A typical design appointment setup (old 3D kitchen planner)

Introduction /

Pain points

Leveraging stakeholder insights, design reviews, research, and initial testing with 5 relevant participants. Four pain points suggested a cumulative negative impact on time-on-task.

Very few button labels

A lack of clear labelling leads to confusion and hinders users from understanding a button's purpose and function.

Cumbersome navigation

Fitting all navigational elements into a single box increased cognitive load and reduced interface scalability.

Unclear icons

Most icons aren't universal. Therefore, the lack of labels and inappropriate icon use added user confusion.

Time-poor workflow

Salespeople were generally time-poor due to administrative duties. Overall, this meant less time selling.

Introduction /

Pain points

Leveraging stakeholder insights, design reviews, research, and initial testing with 5 relevant participants. Four pain points suggested a cumulative negative impact on time-on-task.

Very few button labels

A lack of clear labelling leads to confusion and hinders users from understanding a button's purpose and function.

Cumbersome navigation

Fitting all navigational elements into a single box increased cognitive load and reduced interface scalability.

Unclear icons

Most icons aren't universal. Therefore, the lack of labels and inappropriate icon use added user confusion.

Time-poor workflow

Salespeople were generally time-poor due to administrative duties. Overall, this meant less time selling.

Introduction /

Pain points

Leveraging stakeholder insights, design reviews, research, and initial testing with 5 relevant participants. Four pain points suggested a cumulative negative impact on time-on-task.

Very few button labels

A lack of clear labelling leads to confusion and hinders users from understanding a button's purpose and function.

Cumbersome navigation

Fitting all navigational elements into a single box increased cognitive load and reduced interface scalability.

Unclear icons

Most icons aren't universal. Therefore, the lack of labels and inappropriate icon use added user confusion.

Time-poor workflow

Salespeople were generally time-poor due to administrative duties. Overall, this meant less time selling.

a collage of UI elements found in the old 3D kitchen planner

A closer look at the old 3D kitchen planner's UI elements

a collage of UI elements found in the old 3D kitchen planner

A closer look at the old 3D kitchen planner's UI elements

a collage of UI elements found in the old 3D kitchen planner

A closer look at the old 3D kitchen planner's UI elements

Research


The following methods/outcomes were chosen for the discovery phase, to uncover the context, needs, problem areas etc. Limited availability of Kitchen Sales Designers still yielded sufficient methods for informed design decisions.




Research /

Stakeholder insights


"Reps are less likely to require in depth features since they prioritise speed and they have another tool for a detailed plan of a kitchen. The 3D planner is just for styling, propping and renders (so far)."

— Gabrielle, Kitchen Sales Designer


"Styling usually doesn’t need to be accurate as the programs purpose is to show what the customer’s kitchen could look like"

— Sam, Business Analyst


"Very few reps use the custom colour options and most of them don't like scrolling to find what they need"

— Sam, Business Analyst




Research /

Training insights


Insufficient guidance

The 3D planner was seen as a secondary tool in training, leading to insufficient guidance on tasks like styling, propping, and rendering.


Discoverability issues

People spent a long time trying to find specific props.


Heuristic methods

Some people didn’t know how to move around the kitchen, some also completed tasks more through trial and error.



— Training presentation for a Kitchen Sales designer

a large, unorganised collage of all the research materials in FigJam

All research produced from discovery phase

a large, unorganised collage of all the research materials in FigJam

All research produced from discovery phase

a large, unorganised collage of all the research materials in FigJam

All research produced from discovery phase

Research /

Desk research




Research / Desk research /

Kitchen Sales Designer job reviews


General issues

High staff turnover, hard to manage workloads, "very clicky" working environment, 2D/3D planner slow and sluggish.⁴


3D planner feedback

People mostly viewed the 3D planner positively, despite some mentioning bugs, slowness, and a competitor's superior system.⁵




Research / Desk research /

Salesperson findings


'Reps only spend around 1/3 of their time selling and pitching to customers. The rest is searching for/creating content and admin.'

— Docurated⁶


'The time spent actually selling and servicing clients is shown positively to influence salesperson performance.'

— Journal of Business & Industrial Marketing⁷


'Salesperson responsiveness is found to have a positive relationship with customer satisfaction.'

— Industrial Marketing Management⁸

a smaller collage of all the desk research in FigJam

All desk research collected

a smaller collage of all the desk research in FigJam

All desk research collected

a smaller collage of all the desk research in FigJam

All desk research collected

a smaller collage of all the desk research in FigJam

All desk research collected

Research /

Old 3D planner testing


Based on research and issue ranking, tracking time-on-task is crucial due to its impact on lead generation and training cost reduction. Testing the original 3D planner for this key metric also revealed potential usability issues.




Research / Old 3D planner testing /

Unmoderated testing


Due to user unavailability, an unmoderated usability test was conducted with 5 random users with similar attributes to a 'Kitchen Sales Designer'. Four tasks were given to the participants, these are the results:

Time-on-task results

Averages from 5 participants

Change colour

1m 16s

Change texture

24s

Add a prop

20s

Render image

13s

Time-on-task results

Averages from 5 participants

Change colour

1m 16s

Change texture

24s

Add a prop

20s

Render image

13s

Time-on-task results

Averages from 5 participants

Change colour

1m 16s

Change texture

24s

Add a prop

20s

Render image

13s

"In order to change the wall colour I first clicked on the 3D wall"

— Participant when changing wall colour


"Not completely sure what each icon represented"

— Participant when adding a prop


"Some tooltips when hovering might help, also add text clues as well as pictorial ones"

— Participant when asked about improving navigation




Research / Old 3D planner testing /

Moderated testing


A 3D design industry expert was consulted for moderated testing. Although they're not part of the target audience, they were chosen to provide more detailed feedback (due to their familiarity with 3D tools).


"It would be great if the camera guidelines changed colour when taking a picture to enhance confirmation"

— Judy, Industrial Designer


"The magnifying glass icon seems unrelated to altering the kitchen view to the outside"

— Judy, Industrial Designer

a screenshot of the click tracking results in useberry

Click tracking of old 3D planner for change colour task

a screenshot of the click tracking results in useberry

Click tracking of old 3D planner for change colour task

a screenshot of the click tracking results in useberry

Click tracking of old 3D planner for change colour task

Ideation


To cover all angles, different ideas were rapidly devised and tested, their direction was inspired by all the previous research.

a large collage of all the rapid prototypes created for initial testing of the new design
a large collage of all the rapid prototypes created for initial testing of the new design
a large collage of all the rapid prototypes created for initial testing of the new design

Ideation /

Rapid prototype feedback


To address every aspect, I rapidly devised and tested different ideas that were inspired by the old 3D kitchen planner's findings.


What worked

The main feedback received confirmed the strategy of optimising speed works. Simplified functionality, layout and flows helped to achieve this.


"I like that all the tabs are visible and you can easily browse between them."

— Gabrielle, Kitchen Sales Designer


What didn't work

As expected, using traditional methods of display menus through accordions didn't work since it takes an extra click to view all the options a user would need to access.


"I don't think Option B would work as well, as you have to click on the menu and look to find the right tab you want with no icons"

— Gabrielle, Kitchen Sales Designer

a side by side view of emails sent and recieved from stakeholders which includes their feedback

One of the various emails exchanged during testing

a side by side view of emails sent and recieved from stakeholders which includes their feedback

One of the various emails exchanged during testing

a side by side view of emails sent and recieved from stakeholders which includes their feedback

One of the various emails exchanged during testing

Ideation /

User interface (UI)


Given the numerous planner categories, iconography took precedence in UI design due to its rapid human recognition.⁹ Also, creating distinct and pertinent icons for each category increased design time.


The remaining interface followed Wren's style guidelines, seamlessly incorporating a basic typography scale, colours, and spacing with minor adjustments.

a collage of all the useri interface icons made custom for this project

All custom iconography for the new 3D planner

a collage of all the useri interface icons made custom for this project

All custom iconography for the new 3D planner

a collage of all the useri interface icons made custom for this project

All custom iconography for the new 3D planner

Ideation / User interface (UI) /

Testing high-fidelity designs (version 1)


Early 3D planner testing revealed a trend: around half of the participants naturally clicked the wall to change its colour. Despite labelling the main buttons, this behaviour persisted, indicating limited impact from changing the label.


"I struggled to find the specific place I needed because 'render' is a bit of a strange name for what, in this study, feels more like a screenshot"

— Participant when finding the render button


"The camera style corners helped me determine it was a photo"

— Participant when taking a photo render

Time-on-task results

Version 0 – Version 1

Change colour

39s

-49%

Change texture

13s

-46%

Add a prop

15s

-25%

Render image

18s

+38%

Time-on-task results

Version 0 – Version 1

Change colour

39s

-49%

Change texture

13s

-46%

Add a prop

15s

-25%

Render image

18s

+38%

Time-on-task results

Version 0 – Version 1

Change colour

39s

-49%

Change texture

13s

-46%

Add a prop

15s

-25%

Render image

18s

+38%

a two by two grid of the 3D kitchen planner redesigns (version 1)

Four main screens used for testing (version 1)

a two by two grid of the 3D kitchen planner redesigns (version 1)

Four main screens used for testing (version 1)

a two by two grid of the 3D kitchen planner redesigns (version 1)

Four main screens used for testing (version 1)

Ideation / User interface (UI) /

Testing high-fidelity designs (version 2)


Excluding unrelated technical issues, the second 3D planner version received positive feedback in both observation and communication. This success resulted from adjustments to labelling, hierarchy and interaction behaviour.


"It was easy and efficient, the icons were clear and the tools were useful."

— A participant when asked about their overall experience

Time-on-task results

Version 1 – Version 2

Change colour

23s

-41%

Change texture

11s

-15%

Add a prop

13s

-13%

Render image

8s

-56%

Time-on-task results

Version 1 – Version 2

Change colour

23s

-41%

Change texture

11s

-15%

Add a prop

13s

-13%

Render image

8s

-56%

Time-on-task results

Version 1 – Version 2

Change colour

23s

-41%

Change texture

11s

-15%

Add a prop

13s

-13%

Render image

8s

-56%

Final designs


A multitude of design decisions went into this 3D kitchen planner redesign. From tooltips and labelling to interaction behaviour and hierarchy. Via all of the testing done, these changes seemed to have the biggest impact:

Adding labels to most elements

Using widely recognised terminology

Allowing multiple interactive paths to the same endpoint

Reducing visual clutter and unnecessary features

the 3D kitchen planner user interface with anything open, style button is in a hover state showing its tooltip
the style tab open in the 3D kitchen planner. it shows a variety of customisation options with the wall selected
the props tab open in the 3D kitchen planner, a 3D kettle is placed and selected on the kitchen worktop
the capture mode is active on the 3D kitchen planner. it shows the capture image button hovered with a tooltip. along with the render queue dropdown showing a render is in progress

Final designs /

Animating details


While system resources prioritised the 3D aspect of the planner, minimal animation was added where necessary. For instance, adding a prop by clicking (instead of dragging) triggers an entrance animation, ensuring attention without distraction.

Reflection & results




Reflection & results /

What did I find challenging?


Introducing new ideas

Retaining old design prevents user alienation. Yet, ineffective elements shouldn't persist unchanged; conveying this idea was hard.


Finding the right balance

Prioritising speed drove the design, yet striking the ideal speed to content/ability balance posed a challenge.


Restricting feature creep

Balancing empowerment and impressing users with new features while avoiding cognitive overload proved difficult.




Reflection & results /

What would I have done differently?


Be less restrictive

At first, I restricted my ideation to minimise negative reactions to change. Now, I see that this limited my creative potential.


Observe more

Familiar user feedback can hide true opinions. In the future, I will emphasise honesty and observe more for better testing results.




Reflection & results /

Final results


While the project didn't launch, it's still valuable to highlight the potential impact of the redesign. Though precise business effects are challenging to gauge, earlier research strongly suggests enhanced sales performance. Furthermore, a more user-friendly interface could lower training expenses and time spent on the 3D planner.

Time-on-task results

Version 0 – Version 2

Change colour

23s

-70%

Change texture

11s

-54%

Add a prop

13s

-35%

Render image

8s

-38%

Time-on-task results

Version 0 – Version 2

Change colour

23s

-70%

Change texture

11s

-54%

Add a prop

13s

-35%

Render image

8s

-38%

Time-on-task results

Version 0 – Version 2

Change colour

23s

-70%

Change texture

11s

-54%

Add a prop

13s

-35%

Render image

8s

-38%

Combined average time-on-task results

Version 0

33s

Version 2

14s

-58%