An Interactive Commerce Display to Encourage Environmental Awareness
Timeline: 1 month
Role: UI/UX designer (Team of 4)
Tools: Figma
Task
Design an interface for BWT’s* upcoming showroom to showcase their range of domestic products and highlight the environmental impact of their purchase.
*BWT is an Austrian manufacturing company for water treatment systems.
Goal
An easy-to-follow user experience that utilizes interactive elements and strategically upsells products for a bundle.
User Stories
My official to-do list
A list of user stories was provided by the product owner of this project:
As a user I want to create my personal bundle out of Table Water Filter Jug, Cartridge and Bottles.
As a user I want to decide if I want to have a bottle in my bundle or not.
As a user I would like to know details about each product and its technologies/features.
As a user I want to see on each stage what is the value I have in the shopping cart. The more cartridges i put in my shopping cart the more discount I get.
As a user I want to see on an impressive way how many single use plastic bottles i save with the cartridges i have selected.
As a user I can print a picking list.
Designing for large interfaces
I looked at kiosk UI designs for inspiration and as a reference for determining the suitable scale and navigation styles. I quickly saw a pattern in simple UI styling with fun micro-interactions which I carried through to my own concepts.
I presented my initial ideas
To begin the process, I presented the following three concepts to the PO for feedback on how well it answered the provided user stories.
Concept 1: Strong visualisation of product benefits
Concept 2: Strong visuals and informative
Concept 3: Present the full ranges at once, detail focused
Concept 3 was chosen for the showroom!
They decided to continue with my third concept but asked I experiment further with the style and interactive elements. I segmented the flow into the following sections and iterated through them one at a time:
Intro sequence
Product menu
Dialogues
Defining the UI kit
While iterating the screens, I worked collaboratively with the design lead in Austria to create a design system for this product. Since BWT already has brand guidelines, the font and colour selection were predetermined.
Outcome
