NAVI 2.0
In September 2020, Navi, the University of Toronto’s ‘mental health wayfinder’ was launched in response to student feedback on the need for easier access to mental health resources.
I was part of an innovative project to redesign Navi, the chatbot aimed at addressing the rising challenges of serious mental health issues and demands at the University of Toronto.
The project touch upon themes of mental health,I have omitted confidential user information in this case study.
Team
-
Ariel Shao
-
Roya Adeli
-
Melanie Coleman
-
Aisha Aminu
My Role
-
I spreadheaded to the contexual inquiry, data analysis and UX research.
-
I also participated in UX design, wireframing, prototyping and usability testing sessions.
Skills
-
Contexual Inquiry
-
Wireframing
-
Prototyping
-
UX Research
-
UI Design
Time Frame
Jan - Jun 2022
Before we start, Let's meet
Navi 1.0
The Context
Redesign For Engagement
Our design team was entrusted with revamping Navi, the University of Toronto’s Mental Health Wayfinder, a chatbot developed by IBM and supported by the Vice Provost of Students.
In March 2019, UofT formed the Presidential and Provostial Task Force on Student Mental Health in response to student feedback about the need for easier access to mental health resources. One key recommendation from the task force was the creation of the Navi mental health wayfinding chatbot.
With the project managed by Meagan Lau, Navi was designed to provide students with accurate, up-to-date mental health resources. However, its maintenance comes with a significant cost, so driving user engagement became a key objective.
Our task was clear: understand how students interact with Navi and redesign it to make the experience seamless, user-friendly, and more widely accessible. By making Navi a tool that students can easily find and rely on, the aim is to ensure its long-term sustainability and impact.
Navi is currently funded and supported by the Vice Provost of Students and the Chief Information Officer.
It is currently expanded to include the following topics across all three campuses.
Context
Hover to Read More!
Goals
All the Navi’s organizational goals include ensuring NAVI is accessible to everyone, making sure it's simple and easy to use, attracting new users, and encouraging students to continue using Navi.
Hover to Read More!
The Challenge
Balancing Costs and User Growth
One of our challenges was to enhance Navi’s functionality and accessibility while justifying its high maintenance costs.
As an IBM-powered tool, Navi requires a substantial budget, which meant it needed a larger and more consistent user base, especially during quiet periods after the start of the school term. Our goal was not only to improve the user experience but also to ensure all students were aware of Navi’s full potential and could access it easily, aligning with UofT’s vision of expanding its reach post-pandemic.
Design Limitations Within the IBM Framework
During our meeting with Meagan, we quickly realized that our design improvements were restricted by the IBM framework. Navi’s original interface had to remain intact, and any functional enhancements needed to be built on top of the existing framework rather than reimagining the process from scratch.
This created a challenge, as we had to work within strict design boundaries, limiting our ability to innovate the interface and forcing us to focus more on incremental improvements.
Time Constraints in Finding Participants
Our team embraced a lean approach, which emphasizes rapid testing, user feedback, and design mockups.
Through collaborative workshops, we identified the problem and generated numerous valuable ideas. We established assumptions about our users, the product's purpose, usage scenarios, and its key functionality.
Another major challenge we faced was the time limitation in recruiting participants. Although we offered compensation, the process of screening UofT students who had experience with or knowledge of Navi proved difficult. The number of participants we could secure for primary data collection and prototype testing was limited, making it harder to gather insights and feedback during the redesign process.
This further constrained our ability to refine the tool within the tight deadline.
The UCD framework promotes a collaborative design environment in which both designers and stakeholders work in partnership to design, develop, and implement realistic solutions that will meet the expectations of end-users.
----------- Dr. Olivier St-Cyr,
Assistant Professor at the University of Toronto.
The Approach
Focus on Features Users!
While our initial goal was to improve functionality through advanced design modifications, Navi's status as a non-profit wellness product prompted us to shift our focus away from feature parity competition in the market. Instead, we concentrated on redefining Navi's role and clearly communicated how it could best serve the users' needs.
Collab Culture with Lean UX
Our team embraced a lean approach, which emphasizes rapid testing, user feedback, and design mockups.
Through collaborative workshops, we identified the problem and generated numerous valuable ideas. We established assumptions about our users, the product's purpose, usage scenarios, and its key functionality.
Our team embraced a lean approach, which emphasizes rapid testing, user feedback, and design mockups.
Hover to Read More!
The Discovery
"What Does Navi Mean to You?"
-
Navi excels in providing easy-to-use, 24/7 immediate responses, and anonymous accessibility for all users.
-
Most Students never use Navi. (62%)
-
Very few users read through the text of the website. (15%)
-
Students were less willing to return to Navi and felt Navi’s ease of use was lacking.
The Vision
Easy & Seamless - Our Navi!
Our goal is to provide an easy experience with Navi, enhance user interactions, and recommend improvements for Navi becoming a gap-filler facing increasing mental health challenges within the UofT community.
Easy Access
Students will now be able to access Navi through student-facing websites and word-of-mouth resulting in better promotion and increased usership.
Learn about Navi
Students and student leaders will now be able to learn about what Navi can offer through clear and succinct information, better understanding how it can solve their issues.
Improve Experience
Students and student leaders will now be able to easily find resources and tips in Navi improving their confidence on how to use Navi and their overall user experience.
The Requirements
Design for What Users Do, Think, and Feel.
We understood it was crucial to balance operational aspects with a user-centric approach. Our method aligned our work with overarching business goals and incorporated research-derived findings to shape what Navi should do and how it should feel.
Meanwhile, I aimed to thoroughly grasp how Navi is positioned with regard to our customers' needs and values. It highlighted the potential benefits and frustrations that users may experience when using Navi.
I employed the Business Model Canvas to visually analyze and evaluate Navi's operations. Hover to See "Value Proposition Canvas"!
As-Is Experience Map
We employed experience mapping techniques to visually depict and communicate the users' complete journey and interactions with current Navi across different touchpoints.
The Framework
Setting the Design Direction
We took a top-down approach to defining the overall structure of the experience. At this stage, we collaborated with our client to integrate their insights into our design strategy. Our two-fold redesign strategy included interface updates and recommendations for communication, which involved the participation of staff and faculty.
Solution by Phrase
Upon receiving approval from our client for the two-fold redesign strategy, we could start to structure the content. We outlined our comprehensive solutions for each phase re-identified during the user journey, emphasizing interface redesign for "Using Navi" and offering recommendations for "Seeking Support."
Hover over to learn about our process of structuring the content.
Explore how we brought the design to life, shaping the app’s content and functionality into five user pathways.
To truly capture how users would interact with Navi, I crafted multiple key user journeys. This approach allowed us to visualize how each persona would navigate the app, ensuring the design meets their needs seamlessly.
I also storyboarded our redesign concepts to map out these user flows. This not only helped us fine-tune ideas early on, saving time during prototyping, but also made the transition to the next phase smoother and more efficient.
Structure the Experience
We started with low-fidelity sketch to bring the design to life, shaping the app’s content and functionality into five user pathways.
High-Fidelity Storyboard
We integrate our redesign into creating the high-fidelity storyboard, detailing how users will use Navi more confortably.
Pathway 1: Financial Stress Support at Mississauga Campus
Pathway 2: Learning about UHIP at Scarborough Campus
WeOu
Pathway 3: Counseling Services via Text/Chat at St. George Campus
WeOu
Pathway 4: Meeting People as International Student at Mississauga Campus
Pathway 5: Healthcare Access at Scarborough Campus
Hill Statements
Our vision for Navi is to provide student and students leaders with a seamless and easy experience through the chatbot. To convey the value this redesigned chatbot would bring to our users, we have developed three hill statements:
01.
Students will now be able to access Navi through student-facing websites and word of-mouth resulting in better promotion and increased usership.
02.
Students and student leaders will now be able to learn about what Navi can offer through clear and succinct information resulting in a better understanding of how to solve their issues.
03.
Students and student leaders will now be able to easily find resources and tips in Navi improving their confidence on how to use Navi and their overall user experience
Redesign and Recommendations
To deliver the hills, we have developed 3 recommendations and 3 redesign opportunities. We focused on Seeking Support (Phase 2) and Using Navi (Phase 3) of our as-is experience map. Click to Read!
"Seeking Support" Recommendation #1
Rewrite Tagline &Description
Our first recommendation is to propose a rewrite of the official tagline and description, found on Quercus.
Navi 2.0
Expand Definition
-
Tagline Change
Removing "mental health" reduces stigma and highlights that Navi provides additional resources.
-
Description Change
Simplifying the description clarifies that Navi offers more than mental health support, helping users feel more confident about using the service for various needs.
"Seeking Support" Recommendation #2
Encourage Promotion
Our second recommendation is to encourage promotion of Navi by staff and faculty. This can be achieved through three major actions: promotion on department, newsletters and websites, adding information and links to course syllabi, and word of mouth promotion during lectures and meetings.
Navi 2.0
Promote Differently
We encourage our project partner to add information and links about Navi to ACORN and other student facing portals including Quercus so that the tool has more visibility.
"Using Navi" Recommendation #3
Direct Contact Information
Our third recommendation is to add more contact information, which allows users to find email addresses and phone numbers directly, without the need to travel to the website.
Add Contact Information
Navi 2.0
Add Information
Our solution is to add more contact information.
For example, contact information on UHIP, the university’s health insurance plan, can be added directly to the text information, with clickable links.
"Using Navi" Redesign#1
Redesign Text
Focusing on the redesign of the tool itself, our first redesign is reducing the text, including adding more bullet points and separating by topics.
Reduce Text
Separate By Topics
Add Bulleted Lists
Navi 2.0
Reorganize Text
Our solution is to add more bullet points and separate text by topics.
For example, the current information on stress provides a lengthy list of tips and resources. We suggest separating them by topic and reducing text to keep the information succinct and clear.
"Using Navi" Redesign#2
Add More Buttons & Dropdowns
Our second redesign is to add more buttons and dropdowns. Our users were frustrated by the inability to scroll back and choose another option. Instead, they had to start over. Due to the limitations of the IBM chatbot, the only way to solve this issue is to add the buttons and dropdowns again.
Navi 2.0
Add Buttons Again
Our solution is to add the buttons again.
For instance, looking at the final screen, our prototype adds the rest of the three buttons again, so that users can have the option of choosing another topic.
"Using Navi" Redesign#3
Change Feedback Function
Finally, our third redesign is of the feedback functions. Most users completely ignore the feedback or at the very least were confused by its purpose. This has a detrimental effect on the organization.
Through consultation with our client, we decided to propose 2 new versions.
Original Navi
The original Navi lacks an explanation of what this feedback will actually accomplish.
Our first version will keep the feedback as is, and instead ask the user “Did I help”, and include the statement, your feedback will help me learn and help others.
This provides users with more encouragement and is a relatively simple question to answer.
Navi 2.0
Feedback Version 1
Statement on Purpose of Feedback
To-Be Experience Map
Detailed Design
_edited.png){kind=small}
Introducing...Navi
Now Let's Meet
Navi 2.0
The gallery below shows the final proposed redesign prototype.
Make User Interaction Easy
Add-on buttons have been designed to enable users to quickly access the next option under the same topic without having to refresh the page.
We developed this design within the constraints of the IBM framework while addressing users' demands for a more seamless Navi experience.
Hover to read how we use add-on buttons and dropdowns to make user interaction easier.
Make Important Things Precise and Clear
Navi's content has been carefully designed to provide users with the necessary information within a minute. By reducing lengthy content and incorporating direct contact information, we ensure a more efficient user experience. Utilizing bulleted lists to separate topics further shortens reading time, allowing users to grasp the key points quickly.
Hover to explore how our redesign facilitates user access to Navi's streamlined content, enhancing overall user efficiency.
Minimize Confusion
We revamped the feedback button to ensure its purpose is clear to our users. The original design lacked support for users during their interactions, as they couldn't rely on prior experiences with other existing apps to understand what "feedback" means and how to provide effective feedback.
Hover to discover how we guarantee that Navi's functions fully support our users.
The Refinement
Testing With Users
To evaluate the usability of our redesigns and recommendations, our team conducted A/B testing.
Their preferences were ambivalent, leading us to identify specific redesign aspects requiring further attention.
... The Results
Overall, users' preferences are overall ambivalent.
-
They liked our tagline for its broader resource scope but favored the original description for clearly explaining Navi’s benefits, making it more appealing to new users.
-
For Redesign #1 (Separating the Text), users appreciated the bulleted lists and bold headings, which made the resources and tips easier to read and understand, boosting satisfaction.
-
In Redesign #2 (Adding More Buttons & Dropdowns), users were excited about the added features, finding them helpful for those needing extra assistance.
-
In Redesign #3 (Changing Feedback Button), most users preferred version 2, while one preferred version 1 with the emojis. All users appreciated the sentence “Your feedback will help me learn and help others,” as it clarified the purpose of feedback. The user who favored version 1 found it simpler and less pressuring. A student leader suggested a hybrid option, combining the thumbs up/down emojis from version 1 with the text from version 2
The A/B Testing
Our participants were shown two visuals, "A" (current Navi tool) and "B" (our redesign).
We designed 6 tasks, addressing all our proposed recommendations and
redesigns.
Enphasize on Anonymity
Feedback from participants was mixed. While users preferred shorter and more direct redesign, we found it essential to stress that the tool is anonymous.
While participants appreciated the readability of our succinct paragraphs, they expressed concerns about the lack of emphasis on anonymity. Our hypothesis was that by reducing sentences that highlighted the tool's anonymity, we might not effectively convey Navi's strong commitment to information privacy.
To address this, we adopted a hybrid model and added the sentence, "Feel free to ask me any questions you have, and rest assured that everything you say is completely anonymous." This change aims to provide users with clearer and more secure communication.
Navi 1.0
Navi 2.0
Navi 3.0
Deciding the Feedback
We identified critical issues related to feedback, leading us to consider further redesign changes.
Users' responses to the two versions of our redesign varied greatly. While some participants found it easier to answer the question, "Did I help?" and appreciated the sentence in both versions, "Your feedback will help me learn and help others," as it clarified the purpose of feedback, others felt that selecting "yes" or "no" in the second version was too pressuring.
Unfortunately, neither version of the redesign yielded meaningful results, prompting us to explore a new hybrid model of feedback redesign for future attempts.
Ultimately, we chose to move forward with version 1 for our final prototype.
Navi 2.0 Feedback A
Navi 2.0 Feedback B
The Launch
Impact on Users
Our redesigns including the addition of dropdowns and buttons as well as text redesign, have been integrated into the update launch (both App&Web ver.) in July 2022. These enhancements are poised to significantly elevate user experiences. Check out Navi here!
Latest
