Atara

A mobile application that provides university students with convenient access to resources to combat social anxiety symptoms

Atara app screenshot - Connecting with counselorAtara app screenshot - Finding friends feature

For my human factors interface design course, we were tasked with designing a health and wellness mobile application. Even though health and wellness was a very broad term, we had to choose an idea that can be backed up with research.

My team of four decided upon a focus that is more prevalent as university students. In the end, we came up with Atara, an application that provides post-secondary students with resources to alleviate symptoms of social anxiety. The application name Atara is derived from the Greek term "ataraxia", translating to "calmness untroubled by mental or emotional disquiet", a reflection of our ultimate purpose.

ROLE

Design Lead
Researcher

TIMELINE

Sept 2019 - Dec 2019

TOOLS

Pencil & paper
Figma
Adobe Illustrator

TEAM

4 designers

Role

Timeline

Tools

Team

Design Lead
Researcher

Background

For my human factors interface design course, we were tasked with designing a health and wellness mobile application. Even though health and wellness was a very broad term, we had to choose an idea that can be backed up with research.

My team of four decided upon a focus that is more prevalent as university students. In the end, we came up with Atara, an application that provides post-secondary students with resources to alleviate symptoms of social anxiety. The application name Atara is derived from the Greek term "ataraxia", translating to "calmness untroubled by mental or emotional disquiet", a reflection of our ultimate purpose.

Sept 2019 - December 2019

Pencil & paper
Figma
Adobe Illustrator

Ciel Emond
Matthew Hau
Perry Huang (me)
Alice Zhang

Students don't have convenient access to help for social anxiety.

Across Canadian post-secondary institutions, anxiety has a significant effect on the performance of students. One of the most prevalent forms of anxiety is social anxiety, which is characterized by the fear of humiliation and embarrassment during routine social interactions.

While there are services available for social anxiety, students face extended wait times at university mental health services due to the volume of other students seeking support as well. Similarly, the current approach towards mental health is still relatively passive and in need of improvement.

Provide them with a pathway to resources at their fingertips

Atara was created to help post-secondary students alleviate their social anxiety symptoms; it does not replace professional mental health services, but it offers a convenient way of seeking help. To achieve this, Atara enables users to connect with a counselor using different communication methods, so users can seek a comfortable way of expressing their concerns. Furthermore, Atara allows for users to connect with other users of the application to gradually allay their fears of social interactions with strangers.

Solution

Provide them with a pathway to resources at their fingertips

Atara was created to help post-secondary students alleviate their social anxiety symptoms; it does not replace professional mental health services, but it offers a convenient way of seeking help. To achieve this, Atara enables users to connect with a counselor using different communication methods, so users can seek a comfortable way of expressing their concerns. Furthermore, Atara allows for users to connect with other users of the application to gradually allay their fears of social interactions with strangers.

Seek professional advice

It's okay to ask for help. With three different modes of communication and different ways to search for a counselor, professional consultation is only a few touches away.

Join forces with others

You are not alone. Make friends with people who share interests with you and understand what you are going through. Have a conversation or meet up with them to increase your social circle.

Have help readily at hand

Always have someone to talk to. The chatbot is always here with you, ready to assist you when you need it.

My contributions

Throughout the project, I was intensely involved in all stages, but I was most heavily active in the prototyping stages. As I was one of the two group members to generate designs for the low-fidelity prototype, I was primarily responsible for translating the established requirements into mobile application functions. I took the initiative in overseeing the construction of the high-fidelity prototype and refined details and graphics, as most of my designs were incorporated here as well. Fittingly, I was in charge of providing guests with a demonstration of the high-fidelity prototype at the poster session.

Research

Prior to working on potential solutions, we conducted research on the topic of social anxiety. Through literature review, we examined signs and symptoms of social anxiety, treatment methods and how they can help counter social anxiety.

Important insights we learned:

  • People with social anxiety disorder are self-conscious in social situations and afraid of being embarrassed in front of others. Symptoms include blushing, profuse sweating and difficult talking.
  • The three types of treatment for social anxiety are behavioral, therapy and lifestyle change. The most common behavioral treatment used is Cognitive Behavioral Therapy (CBT), which involves re-appraising feared social situations and negative beliefs about oneself, used to help combat symptoms.
  • In a survey from students, it was noted that 42% reported that counseling sessions were limited per student.
  • Approximately half of institutions do not provide long-term therapy, referring students to outside services, resulting in more expenses.

Specific Insights (+)

- People with social anxiety disorder are self-conscious in social situations and afraid of being embarrassed in front of others.
- Symptoms include blushing, profuse sweating and difficult talking.
- The three types of treatment for social anxiety are behavioral, therapy and lifestyle change.
- The most common behavioral treatment used is Cognitive Behavioral Therapy (CBT), which involves re-appraising feared social situations and negative beliefs about oneself, used to help combat symptoms.
- In a survey from students, it was noted that 42% reported that counseling sessions were limited per student.
- Approximately half of institutions do not provide long-term therapy, referring students to outside services, resulting in more expenses.

Competitors

To understand the current solutions available, we searched for applications that focused on improving well-being, mitigating anxiety and increasing social activeness. While those applications offered different ways of connecting nearby users, tracking of daily moods to understand personal habits and an artificial intelligence chatbot, none of them was specific to post-secondary students, and none contained a direct mode of connection with professional counselors. Most importantly, none of them specifically stated social anxiety among its scope and major purpose.

Phone screenshot of Daylio appDaylio app logo
Phone screenshot of Youper appYouper app logo
Phone screenshot of Yubo appYubo app logo

The users

In conducting user research, we incorporated an indirect observation plan, interview and survey questionnaire. For accuracy and relevance, only students within our year and program were recruited to participate in any one of the aforementioned research methods. A total of 5 people were recruited for each of the user research methods, with some people participating in more than one research method.

While most people were aware of and have heard of the mental health resources available at the university, almost all of them have not used any of them.

  • This indicates that even with the awareness, people don’t proactively use or seek consultation from the relevant resources.
  • To overcome that hurdle, the design should include a convenient and direct path to the mental health resources, to facilitate and encourage people in acting upon their awareness of the resource and need for it.
Graph of proportion of people who have utilized university mental health resource

Among the participants, there was a relatively even spread of the amount of people they talk to each day, with responses from 6-10, 11-20 and 20+ range, implying a varied degree of sociability.

  • This indicates that social anxiety is not as visible and discriminable, as people who regularly interact with more people seem equally likely to have social anxiety as someone who interacts with less people daily.
  • To address this, the design should include several means of accommodating people with varying degrees of social interaction, such as messaging, voice, or video call.
Graph of people and responses to several statements regarding social interaction

Research

The topic

Prior to working on potential solutions, we conducted research on the topic of social anxiety. Through supporting literature review, we examined signs and symptoms of social anxiety, treatment methods and how they can help counter social anxiety.

Specific Insights (+)

- People with social anxiety disorder are self-conscious in social situations and afraid of being embarrassed in front of others.
- Symptoms include blushing, profuse sweating and difficult talking.
- The three types of treatment for social anxiety are behavioral, therapy and lifestyle change.
- The most common behavioral treatment used is Cognitive Behavioral Therapy (CBT), which involves re-appraising feared social situations and negative beliefs about oneself, used to help combat symptoms.

Post-secondary institution mental health services
- In a survey from students, it was noted that 42% reported that counseling sessions were limited per student.
- Approximately half of institutions do not provide long-term therapy, referring students to outside services, resulting in more expenses.

Competitors, related application

To understand the current solutions available, we searched for applications that focused on improving well-being, mitigating anxiety and increasing social activeness. While those applications offered different ways of connecting nearby users, tracking of daily moods to understand personal habits and an artificial intelligence chatbot, none of them was specific to post-secondary students, and none contained a direct mode of connection with professional counselors. Most importantly, none of them specifically stated social anxiety among its scope and major purpose.

The users

In conducting user research, we incorporated an indirect observation plan, interview and survey questionnaire. For accuracy and relevance, only students within our year and program were recruited to participate in any one of the aforementioned research methods.

Key Insights (+)

- A total of 5 people were recruited for each of the user research methods, with some people participating in more than one research method.
- While most people were aware of and have heard of the mental health resources available at the university, a vast majority of them have not used any of them.
- Among the participants, there was an even spread of the amount of people they talk to each day, with responses from 6-10, 11-20 and 20+ range, implying a varied degree of sociability.

Personas

We identified our users to be mainly Canadian post-secondary students with social anxiety who are hesitant to take advantage of the available mental health resources available at their institutions. From the user research, personas were constructed to depict the varying goals and motivations of each user group.

Persona 1 - Evan ParkPersona 2 - Ruby BrownPersona 3 - Susan Davis

Features to include were based on both user research and the literature review. The four main features that we decided upon at this stage were:

  • Connect with a counselor – reach out directly to a counselor for consultation (via messaging, voice, or video call)
  • Find friends – engage in social interaction with other users on the platform to allay symptoms and fears
  • Talk to the chatbot
  • Journal – record thoughts and feelings

Personas

We identified our users to be mainly Canadian post-secondary students with social anxiety, while being hesitant to take advantage of the available mental health resources available at their institutions. From the user research, personas were constructed to depict the varying goals and motivations of each user group.

Features (+)

Features to include were based on both user research and the literature review. The four main features that we decided upon at this stage were:
- Connect with a counselor
- Find friends
- Talk to the chatbot
- Journal

Use cases (+)

Two used cases were constructed to demonstrate how users might use our application. The use cases also cover the functional requirements of the application.

Use cases

Two used cases were constructed to demonstrate how users might use our application. The use cases also cover the functional requirements of the application.

Use Case 1 - Find FriendsUse Case 2 - Contact a Counsellor

Low-fidelity prototype

Through intense discussion and many drafts, our team produced two design alternatives by pen and paper from two different people, one of which was me. Upon function-to-function comparison, we decided to combine certain aspects of both designs to create an official low-fidelity prototype that was used for usability testing.

Low fidelity prototype user flow

Design

Low-fidelity prototype

Through intense discussion and many drafts, our team produced two design alternatives by pen and paper from two different people, one of which was me. Upon function-to-function comparison, we decided to combine certain aspects of both designs to create an official low-fidelity prototype that was used for usability testing.

Usability testing

For usability testing, 5 third-year Industrial Engineering students at UofT were recruited, most having been part of the user research as well. Participants were asked to complete three scenarios, one for each distinct functionality:

  • Find a friend who shares the same interests
  • Interact with the chatbot
  • Video chat with a counselor

We incorporated the Wizard of Oz method, in which one person responsively provides the next screen for the participants based on their choices and actions, as well as acting as the counselor for a task.

Results (+) //

Results

From usability testing, both qualitative and quantitative data were collected to help identify strengths and weaknesses regarding the usability of the prototype. I was responsible for collecting quantitative data, recording the time participants took to complete tasks and tracking the amount of mistakes made, which I used to compute average time and mistakes per step.

[more feedback, quotes?]

The participants answered a short questionnaire after each scenario and a longer one at the end of the testing. The responses from the longer questionnaire were used to calculate a score from the System Usability Scale (SUS). The average system usability score across the five participants was 80.5 out of 100, putting our prototype above average according to industry standards.

Usability testing

For usability testing, 5 participants from our year and program were recruited, most having been a part of the user research as well. Participants were asked to complete three scenarios, one for each distinct functionality. We incorporated the Wizard of Oz method, in which one person responsively provides the next screen for the participants based on their choices and actions, as well as acting as the counselor for a task. During testing, I was responsible for collecting quantitative data, recording the time participants took to complete tasks and tracking the amount of mistakes made, which I used to compute average time and mistakes per step.

Scenarios (+)

- Find a friend who shares the same interests
- Interact with the chatbot
- Video chat with a counselor

Results (+)

The participants answered a short questionnaire after each scenario and a longer one at the end of the testing. The responses from the longer questionnaire were used to calculate a score from the system usability scale (SUS). The average system usability score across the five participants was 80.5 out of 100, putting our prototype above average according to industry standards.
‍

Iterations

From the usability testing results, we made note of specific features and designs that were sources of errors and mistakes for participants. I went back to redesign and make necessary modifications to those features with the feedback in mind in preparation for implementation in the high-fidelity prototype.

Filling out interests - Finding Friends

In the original design, users would fill out their interests every time when choosing the Find Friends function; this is unnecessary and inefficient considering that people usually don't change interests often. As a result, users fill out interests upon registering for the first time, and the results are stored in settings, available for editing if needed.

Viewing more information

In the original design, users would click on the expand button to see a map with more information about a user when finding friends. As the map interface was deemed too small, it was enlarged and fixed to the top half of the screen so users can scroll through the results while seeing the locations of each user with respect to their own update in real time, allowing for better comparison.

Viewing more information (continued)

Rather than just expanding the box, the user profile expansion when finding friends now occupies a new page, with a breakdown of how well the friend's interests match up with the user's, as well as the courses they are taking.

Manual search for counselors - Connect with a Counselor

In the original design, users could filter between counselor location and gender when manually searching for a counselor. The distance factor was replaced with other search criteria that would help users in better finding a desired counselor. Counselors contacted in the past are now recorded in the "Past Counselors" box for easy reference if a user wishes to connect with a familiar counselor, and the filter settings now include specialty.

High-fidelity prototype

Our high-fidelity prototype was created using Figma. Additionally, I used Adobe Illustrator to make custom iconography throughout the mobile application.

Iteration

From the usability testing results, we made note of specific features and designs that were sources of errors and mistakes for participants. I went back to redesign and make necessary modifications to those features with the feedback in mind in preparation for implementation in the high-fidelity prototype.

Filling out interests - Finding Friends

In the original design, users would fill out their interests every time when choosing the Find Friends function; this is unnecessary and inefficient considering that people usually don't change interests often. As a result, users fill out interests upon registering for the first time, and the results are stored in settings, available for editing if needed.

Seeing more information - Finding Friends

In the original design, users would click on the expand button to see a map with more information about a user when finding friends. As the map interface was deemed too small, it was enlarged and fixed to the top half of the screen so users can scroll through the results while seeing the locations of each user with respect to their own update in real time, allowing for better comparison.

Seeing more information - Finding Friends (continued)

Rather than just expanding the box, the user profile expansion when finding friends now occupies a new page, with a breakdown of how well the friend's interests match up with the user's, as well as the courses they are taking.

Manual search for counselors - Connect with a Counselor

In the original design, users could filter between counselor location and gender when manually searching for a counselor. The distance factor was replaced with other search criteria that would help users in better finding a desired counselor. Counselors contacted in the past are now recorded in the "Past Counselors" box for easy reference if a user wishes to connect with a familiar counselor, and the filter settings now include specialty.

High-fidelity prototype

Our high-fidelity prototype was created using Figma. Additionally, I used Adobe Illustrator to make custom iconography throughout the mobile application.

CONNECT

Different methods of communication available with counselors

FRIENDS

Matching users with friends, help set up meetings

CHAT

Providing users with a readily available source of assistance and conversation

Outcome

My group presented our process and findings to invited industry professionals at a poster presentation session for the course; I also provided a demonstration of our high-fidelity prototype. My team was voted the best out of the 14 groups at the poster session, with judgment based on poster content and high-fidelity prototype demonstration.

Taking an idea from the beginning and working it to fruition was truly a rewarding experience. I learned the purpose behind every comprehensive step of research and analysis, understanding how a logical solution is achieved through methodical means. I was especially engrossed with the prototype stages, as I had an opportunity to fuse creativity and visual aesthetics with user-centered design that appealed to heuristics, incorporating the best of both worlds.

Next case study 
PATH Toronto >>

Outcome/Takeaways

My group presented our process and findings to invited industry professionals at a poster presentation session for the course; I also provided a demonstration of our high-fidelity prototype. My team was voted the best out of the 14 groups at the poster session, with judgment based on poster content and high-fidelity prototype demonstration.

Taking an idea from the beginning and working it to fruition was truly a rewarding experience. I learned the purpose behind every comprehensive step of research and analysis, understanding how a logical solution is achieved through methodical means. I was especially engrossed with the prototype stages, as I had an opportunity to fuse creativity and visual aesthetics with user-centered design that appealed to heuristics, incorporating the best of both worlds.

One invited professional at the poster session provided us with comments about business implications and considerations for the functions of our application, such as incorporating a payment method. While our project's focus was solely on the objective and interface design of the application, the comments were indeed something purposeful to think about, and I would definitely be interested in taking the project further in that direction.

More projects

Picture of laptop with University of Toronto Libraries website screenshot

UTL

PATH

Other projects

University of Toronto Libraries

‹‹ CSR Platform
PATH ››
LinkedIn
Email
© Perry Huang 2022