On’s Lead UX/UI Designers Juliana Bravin and Lucia Sidler walk through the process of designing the AI platform that our customers interact with every day.
What gave the initial spark or inspiration for this project?
In early 2024, we were brought into a project titled CoPilot. This was On’s push to further develop our AI concierge for web and app visitors. Initially, the task was to improve the visual design of the AI icon. This quickly evolved into deeper research and understanding of how to best design the platform on which customers communicate with AI. Extending our role of UX/UI designers into conversational designers as well.
How did you approach the research for the project?
The interesting thing about a conversational experience is that it encompasses more than just e-commerce or customer service. It can be aspirational too – it helps visitors by guiding them in reaching certain goals with the product. Or helping them find something else that matches the product. The conversational AI needs to be able to cover all concerns and topics that we’ve never previously considered to add to the .com or app experience.
So, as we started to think about designing a conversation with a non-sentient being, we asked a lot of questions. How can you make the interaction as human as possible? This, in turn, also made us think a lot about what makes us human and how this could be visually represented on the screen.
How did you move through the design process and what did you learn?
We started by understanding the visual AI landscape. We discovered certain trends – primarily that an AI bot needs to be recognizable while being generic enough that it blends in with other UI elements so that it can be placed anywhere.
In our design process of the mark, we iterated on various cloud ideas until we got to the satellite. We named it Aisterisk. Allowing minimal animation to symbolize its spherical shape and movement. Also, it was dynamic, allowing it to look good no matter how small it was on the screen.We moved on to visualize the states found in a conversation with the symbol. What would it look like when “listening”, when it was “thinking”, or when it “replied”? And how would the user visually understand those different conversational modes? We decided that, depending on the conversational mode of the AI, the user is taken into a parallel section of the site.
What are your wishes for the future of this project?
The whole world wants to build amazing AI experiences. However, we still need to understand users in order to do that. Our vision for this project is that we can strategically set up our Ai to address user needs and create meaningful experiences. The conversational AI of On will be your agent on site. It will hear your concerns, learn from your behaviors, and guide you to the correct content. Whether that be the right product for your needs, the exact article that explains your worries, the event that will help you start your running journey, or connecting you to our athletes to keep you inspired. Down the road, hopefully there will be a future where our AI can re-invent the standard e-commerce experience as well as integrate coaching to keep our customers ignited in movement.
