How to highlight AI capability:
Combining new norms and classics
Overview
Integrating a new AI workflow
to streamlining trip documentation
Toroamy is a mobile app that uses AI to help users organize trip photos and generate personalized travel journals. My primary focus was on seamlessly integrating AI into the tradition journal creation and editing experience.
What is in this project?
This project highlights my UI and interaction design skills, as well as my ability to collaborate closely with engineers to overcome technical constraints through thoughtful design solutions.
my role
UX designer
Team
Product manager
Software engineer
UX designer
Software engineer
UX designer
Timeline & Status
2 months, launched in Dec 2024
problems
Low Discoverability
Users struggle to locate and identify the AI-powered features within the app, limiting their engagement and the value they can derive from the product.
Lack of Clarity
Even when users find the AI features, they face difficulties understanding how to effectively use them, resulting in frustration and reduced adoption.
Challenges in
Building Trust
Building Trust
To ensure accurate content generation, users need to verify location details. However, building user confidence in the product’s capabilities and fostering trust in AI-generated outputs remains a challenge.
Design challenge
How might we guide users to recognize AI, understand how to use it, and seamlessly integrate it into their workflows
Success metrics
Daily Active Users
How many users created journals per day.
Click-through rate
How many users have finished the onboarding process.
Feature discoverability
How many users have reported the discovery of GenAI feature.
interactions
Common norms of AI design, such as gradient colors, are combined with icons and text to effectively communicate AI capabilities to users.
While one-click AI generation offers a convenient way to create journals effortlessly, users often associate 'writing' with input fields. The input field design aligns with their habits and preserves their ability to enter their own thoughts independently of AI.
While one-click AI generation offers a convenient way to create journals effortlessly, users often associate 'writing' with input fields. The input field design aligns with their habits and preserves their ability to enter their own thoughts independently of AI.
How users activate AI?
AI-generated trip journals were first set as the default but later made optional after users preferred editing and personalization.
Freedom of use extends beyond "turn off" GenAI—it includes flexible usage. Testing showed users used AI for multiple purpose, not just content generation.
However, to preserve the journaling experience, the input field remains the primary interaction. How can users express their needs to AI in a journal-based UI? A floating chat feature was introduced for optional use and a dropdown menu for easy access to common use cases.
Freedom of use extends beyond "turn off" GenAI—it includes flexible usage. Testing showed users used AI for multiple purpose, not just content generation.
However, to preserve the journaling experience, the input field remains the primary interaction. How can users express their needs to AI in a journal-based UI? A floating chat feature was introduced for optional use and a dropdown menu for easy access to common use cases.
Do not make users wait
(while you need to make them wait)
(while you need to make them wait)
The engineer noted that generating the journal takes over 10 seconds, which could confuse users and lead them to abandon the process. A determinate progress indicator with rotating messages can reduce anxiety and clarify the timeline.
Brand elements were considered but made the screen too text-heavy. To balance information and visual appeal, we chose a design with a progress bar and descriptive text.
Brand elements were considered but made the screen too text-heavy. To balance information and visual appeal, we chose a design with a progress bar and descriptive text.
How to tell users AI can be wrong when they assume AI is always right
Even though AI is very powerful, its results can sometimes be incorrect or not aligned with what the user needs. What makes things worse is that users often assume its results are accurate without verifying them.
Our app groups photos by location to generate itineraries, but the displayed locations can sometimes be too broad or inaccurate. This leads to two issues:
1. Users may need to make tedious edits later.
2. Incorrect locations might spread, affecting the itinerary-sharing ecosystem.
To address this, I highlight AI-generated content with background colors and add reminders, ensuring users review and verify key details before finalizing their itinerary.
Our app groups photos by location to generate itineraries, but the displayed locations can sometimes be too broad or inaccurate. This leads to two issues:
1. Users may need to make tedious edits later.
2. Incorrect locations might spread, affecting the itinerary-sharing ecosystem.
To address this, I highlight AI-generated content with background colors and add reminders, ensuring users review and verify key details before finalizing their itinerary.
visuals
Imagine new onboarding
for smoother integration
for smoother integration
Typical onboarding introduces users to an app through text as soon as they enter. However, since using AI is unfamiliar to many users, I want to make the onboarding process more immersive.
To achieve this, I:
1. Added motion to make the onboarding messages easier to absorb.
2. Integrating the explanation into the journal creation process.
To achieve this, I:
1. Added motion to make the onboarding messages easier to absorb.
2. Integrating the explanation into the journal creation process.
