BoardX Ava

The conversational AI assistant on the visual collaboration whiteboard
My Responsibilities
User research
Competitor analysis
Prototyping
Usability testing
Dev handoff
Brand illustration
The Team
1 Developer
Growth team leader
Product manager
Tineline
1.5 Sprints
Tools
Figma
Adobe Photoshop
Background (Prompt)
BoardX (a visual whiteboard company) recently released an AI Widget feature within the visual whiteboard to help users generate text content and images with our AI presets.
‍
However, after testing it, we found that most users needed more flexibility and freedom to customize their prompt.
As the UX designer, I was assigned to ideate and design a new way to help users to use our AI tool more freely and effectively.
Why Are We Building A Chatbot?
AI has sparked a new wave of technological excitement, bringing along numerous opportunities. I saw the benefits in the conversational AI interaction experience, which allows users to obtain efficient solutions using methods they are familiar with. More and more companies using AI chatbot for different products.
GPT-3.5 released gives company support to custom prompts
GPT-3.5 is a language model developed by OpenAI. It's designed to understand and generate human-like text based on the input it receives.
Before the release of GPT-3.5, companies encounter some limitations with earlier versions of the GPT model, in some cases, full customization of prompts may not have been achievable. But with GPT-3.5, BoardX can use and train it to fit our product use cases.
Business Opportunity
Highlight to enhance competitiveness
Competition for visual whiteboard products is fierce. As a startup, developing AI capabilities can be an opportunity for BoardX to explore and develop its unique competencies, and increase the likelihood of being favored by investors.
Me and another designer brainstormed and brought up this concept prototype to propose to build a chatbot on the whiteboard, which can create content for users faster within the board. At first, it is rejected since by that time Open AI doesn’t support companies to custom prompt. Now with that changed, the team approved our concept and allow us to give it a try.
Key Screens Preview
A flexible in board chatbot
Summarize sticky notes and insights during ideation & workshops
Turn bullet points into sticky notes
User Research
Leveraging available data & contents
I conducted user interviews with 5 individuals on the previous AI widget tool and grouped the notes on the FigJam.
I got the insight that users want to reduce the time spent on the generating process. They also want the generated content to be organized and ready to use.
Competitive Analysis
Jada.ai
Pros: It has diverse AI tools embedded on the board, which allows users to choose presets, interact with conversational AI, and even use shortcut to trigger AI tools.
‍Cons: It doesn’t provide multiple results for users to choose.
Otter.ai
Pros: It has powerful AI assistant features for team meeting summarize and arrangements. And its interfaces are neat.
Cons: It is only limited to team video& audio meetings and isn’t involved in the workshop visualization.
What Do we want to achieve in the BoardX chatbot?
“I Work” & “We Work”
These two words often be brought up during our team meetings as BoardX provides a visual whiteboard workplace, so I always need to consider better user experiences for use cases for the individual work and team work.
Scenario 1 - “I Work”:
Linda wants to write a blog about visual collaboration and starts to explore the BoardX Chat Bot.
Mid-fidelity wireframes
Scenario 2 - “We Work”:
Linda and Nancy are having a brainstorming. They write some ideas on the sticky notes, and want to use BoardX AI to create a summary for them.
Mid-fidelity wireframes
Scenario 3 - “We Work”:
Linda and Nancy want to use BoardX AI to get some inspirations.
Mid-fidelity wireframes
Iterations
Collaborate with Eng
Fast iteration has always been BoardX’s product strategy as a start-up. After presenting my design wireframes to leaders and the founder, they decided to achieve the essential function first, and put off the UI development. So the engineer developed a draft model of the chatbot.
However, the model is far from my design and has more improvement space for user experience and accessibility, which I think can not be sacrificed for the iteration speed.
Draft model after first development
Design hand-off
I simplified my designs and wrote down explanations of UX&UI improvements in Figma, so that the engineer could have a better understanding.
Feedback from different teams
Collect User Feedback for Improving Prompt Engineering
I also had regular meetings with the Growth Team and the prompt engineer. After reviewing my design, the prompt engineer suggested having user feedback on the AI-generated results, so it would be helpful for refining and training the BoardX’s AI model.
branding for BoardX AI
Ava: BoardX AI Assistant
Bot Character Design Represents BoardX AI
After meeting with the Marketing Team leader Nicole, I understood a friendly image of the BoardX AI assistant could be a bonus to communicating with users and promoting company values on social media. I volunteered to design a character, and after the name search, Ava came to life.
Since the Marketing Team had planned to print Ava on the company’s future swag and we wanted to lower the printing cost, my design with gradient colors was rejected. And finally, I limited the color to black, white, and blue.
Ava sketches and iterations
Cyan-blue
#31B8FF
I looked for Google Colors and chose Cyan blue as the primary color for Ava. It’s bright, vivid, and pure, and the team agreed to represent the color of BoardX AI Assistant.
Ava advertising image
Style guide
Developed Brand Color to UI
Now, AI has become a highlight feature that the company wants to focus on. We also wanted to make it stand out on the whiteboard so the user would recognize it immediately.
Previously, on the wireframes, the color of the chatbot didn’t distinguish from other tools. I developed new color palettes for Ava chatbot and old AI widgets.
Deep Sapphire
#0A2774
Melrose
#A8C0FF
Cyan-blue
#31B8FF
Before & After UI Revision
Going Forward
Next step
Set Preset Molds Suit for Different Use Cases
As the company keeps exploring prompts and training our model, we could train the model to better understand different use cases like brainstorming, ideation, blog writing, reporting, etc. I would like to think about designing an experience that lets users quickly understand and choose these presets.
Go to Top
Let's get in touch ;)
Copyright. 2023 Xinyi Shen