This project focuses on a single feature of the MCAT Native App design. The assignment was to give users access to Blueprint’s AI chatbot, “Blue,” within the exam interface’s “Review Mode” on mobile. The core challenge of the project was that, unlike other commonly used chatbots like ChatGPT, this chatbot was meant to be used on mobile while the user was actively engaging with another interface. The chatbot was a supplemental feature, rather than the core focus.
ROLE
UX Designer
TEAM
TIMELINE
8 weeks
TOOLS
Figma
WIREFRAMES
The first question I tackled was placement: within the existing "Review Mode" interface, where should the chatbot live? After considering quite a few options, I decided on a placement in the bottom navigation: its placement required no significant adjustments to the interface structure, didn't cover any exam content, and kept the chatbot trigger, text input, and keyboard in the same general location, close to the user's thumbs.
Wireframes
CHALLENGES & CONSIDERATIONS
Stakeholders had one immediate ask: they wanted to view both the exam question at hand and the chatbot conversation simultaneously, on the same screen. I had several reservations about this request: the division of limited mobile real estate, multiple scrollable windows on the same screen, and how keyboard functionality would fit in, to name a few.
To allow the user to quickly engage with both the chatbot and the question without dividing the screen, I pitched an alternative: a minimizable sheet, allowing the chatbot to be opened and closed with just a swipe. This would allow for a quick toggle back and forth– not simulataneous viewing, but close.
Stakeholders were on board, and we moved forward with this structure.
Final Designs
1:
User clicks on the chatbot icon.
2:
Chatbot sheet opens.
3:
Chatbot is swiped down.
4:
Chatbot stays in the minimized state.
1:
User clicks on the message input.
2:
Keyboard appears.
3:
"Send" icon appears when user types.
4:
Input expands with text.
Scrolling Conversation
Scrolling Input
RESULTS
Reflection
One challenge with this project was that some stakeholders had a specific UI solution in mind from the beginning of the process. This made managing expectations difficult at times, since I thought the specific solution desired by stakeholders would create a negative experience for the user. While a solution was still achieved within the required time frame, this did increase the work required for the project. Moving forward, if a specific UI solution is requested from the start of a project, I’ll aim to surface concerns early in the process, confirming an inability to commit to a solution before the problem has been fully explored, and by using prototypes to both demonstrate what works and highlight potential UX trade-off's.