1. Convo Position
Stick to the top
- The initial conversation will stick to the top of the screen, followed by the menu options.
- Historical conversation will be pushed up when the screen is full.
Pros: users could see all the options
Cons: for users with bigger screens, it might be hard to reach some options on the top
Check the Figma interactive prototype:
(click the screen to start animation)
Push from the bottom
- The initial conversation will appear at the bottom of the screen. The menu options will also appear at the bottom of the screen just above the input field.
- Conversation will be pushed up little by little.
Pros: All the interactive elements are at the bottom of the screen within finger reachable area.
Cons: Users might not be able to see all the options, they need to swipe left/right to see all the options.
Check the Figma interactive prototype:
(click the screen to start animation)
2. Bubble style
Piller Button Style
- The options menu is piller button style.
Pros: different visuals to draw attention, and to distinguish options from other messages.
Cons: the size of the piller depends on the size of the content. Might not be friendly for long content.
Check the Figma interactive prototype:
(click the screen to start animation)
Convo buttle style
- The options menu is using round corner rectangles similar to the convo bubbles to keep visual consistency.
Pros: visually clean and consistent
Cons: might give users an impression there are several levels of menus.
Check the Figma interactive prototype:
(click the screen to start animation)
3. Coversation style
Right to the point
- When options are selected, redirect users right into the task if possible.
Pros: save time, reduce unnecessary steps.
Cons: not preventing the misclick.
Check the Figma interactive prototype below:
(click the screen to start animation)
Wait a min
- Instead of directly jumping to the task, display a buffer screen to make sure users want to jump into the task.
Pros: mistake prevention, giving user buffer time
Cons: Extra click, extra step.
Check the Figma interactive prototype:
(click the screen to start animation)
4. What if.....
What if I could just ask Google to pay my bill?
When the app is integrated with Google assistant ->
BMO Chatbot Visual Design
There are lots of chatbots designs on the market. We need to find a solution that meets the following requirements:
1. Follow BMO's overall brand guidelines.
2. Easy to interact with on mobile devices.
3. Self-explanatory UI elements to guide users throughout the flow.
The basic UI elements frequently used in a chatbot are:
1. Basic conversation bubbles.
2. Preset options.
3. Smart indicators.
4. Input fields.
During the discovery and ideation phase, I tried different UI and interactive options and send them out to all my coworkers to gather feedback. This demo is to showcase some of the most popular options.