Uncovering opportunities in the problem space
As this was our first joint project, it was an opportunity to take the Data & Analytic team through our user-centric approach in exploring the problem space.
I was responsible for crafting the user flow, co-running an ideation workshop with the greater team, refining the conversational question logic, the high-fidelity wireframe designs and collaborating with the AI developers to build a working prototype.
The intent of the project was to explore one key question.
Exploring the problem space
Through desktop research, I drafted an initial process flow which captures how we might translate the journey of a traditional online shopping experience into a conversational experience.
A online shopping experience baseline
detailed chatbot user flow
Leveraging my previous knowledge and experience in chatbot design, I expanded each step with possible conversational prompts that opened up areas of opportunity to ideate further.
Ideating together
The opportunities were highlighted as key questions that the project team explored in a collaborative ideation workshop to consider the value of integrating generative AI technology.
Key questions
Chatbot hook:
How might we draw users in so that they want to interact with the chatbot?
Chatbot conversation:
How might the chatbot interact with the customer in an effective way?
Product upsell:
How can we upsell in a tasteful way?
key ideas selected
Forming the approach
Now that we have determined the generative AI features we wanted to demonstrate, I began sketching out wireframe concepts to the user flow.
Getting the ideas out of my head
Revising the user flow scenario
From this process it was clear that the simple shopping user flow was not helpful in demonstrating generative AI capabilities, as all the chatbot was demonstrating was existing functionality of filtering and sorting but in a conversational way.
Exploring A new scenario
Going back to our key ideas, we needed a more complicated scenario where the generative AI engine could help find solutions. Brainstorming together as a team, we considered scenarios that would generally warrant a customer to require a google search or ask for assistance from an in-store worker.
Drafting the conversation script
From these ideas, the other UX designer and I wrote out possible scripts that we could carry into the design. The final script that we selected was for 'buying a complicated item'.
The scenario is of a consumer who is looking to solve their mould problem but is unsure whether a air purifier is what they really need.
We selected this scenario as it was easy to understand and not too uncommon. The chatbot could:
- explain the difference between dehumidifiers and air purifiers.
- offer dehumidifier products from multiple brands in the Flybuys ecosystem (domestic/commerical, small/large)
- it could upsell related cleaning solution products
- it could provide tips to the consumer to avoid it in the future.
Designing the
chatbot interface
Even though the developed AI engine would eventually generate its own output text, by aligning as a team on the approach for the demonstration allows me to determine what I need to design to effectively deliver the final chatbot interface.
The first iteration
building the ui kit
In the first iteration, my goal was to define the overall chatbot structure and components. The chatbot size was set to the width of an iPhone 13/14 display so that it could be demonstrated on mobile.
wireframes 1.0
The second iteration
I revised the colours to distinguish interactions in the chatbot versus interactions on the website, made groupings of chat bubbles to reduce the history length and added more details to the product component like brand propensity.
Chat bubble groupings
wireframes 2.0
The final interation
I made some design changes to overall interface to elevate the styling, added a new flybuys component, moved the most recent chat bubbles to the bottom to be closer to the input field and redesigned the product component to fix to the input field that the user can show and hide.
Final wireframes
Chatbot placed in context of website
CHATBOT OPENS ON LANDING PAGE
CHATBOT CAN NAVIGATE TO PRODUCT PAGE
CHATBOT IS CHARACTERISED
CONTEXTUAL PROMPTS ON PRODUCT PAGE
Personal reflections
This non-typical design project led to interesting outcomes, because the team was focused on exploring new generative AI capabilities in a chatbot rather than solve existing user needs.
This opportunity taught me how to creatively explore uncharted territory and how to interface conversational AI.
Innovating in new territory
I would love to continue to evolve the roadmap of the site with a developer and user-test with employee network members to ensure the webpage remains relevant as the employee network grows in size, impact and function.
Breaking the chatbot interface
As the interface was not the core thing we were proposing, I designed the chatbot size so that it could be adaptable to mobile. Unlike traditional chatbot design that primarily solves customer service problems, I was bringing a lot of the website functionality into the chatbot which made me question what this new relationship between website and chatbot could be.
I would love to continue exploring this relationship to see what opportunities can come out of it. I had two initial ideas that I was exploring and brought to the team.
chatbot as a website
One of the structural challenges of a chatbot is that all the history is captured in one long scrollable list.
What if the chatbot is compartmentalise with different sections that can expand and minimise?
Could this replaces the website?
a generative ai search bar
What if instead of having a chatbot as a website overlay, we just integrate the conversational capability into the existing search bar function?
