Acerca de
Qualia Wellness App
Qualia
Improving the mental health of students by helping them utilize their free time effectively in order to lead more healthy, social, and active lifestyles.
OVERVIEW
Duration
January - March 2021 (class project)
This project aims to aid college students in being more productive in their courses and personal lives. Especially in the pandemic, when most classes are online, many students feel overwhelmed and stressed by their classes, but completing schoolwork should not be at the detriment of a healthy, social, and active lifestyle. This application will assist students with utilizing free time to improve their mental health.
UX Designer & Researcher
Key Skills
Mobile app design, user-centered design, user interviews, journey mapping, storyboarding, annotated wireframing, key path scenarios
Tools
Adobe Photoshop, Adobe XD, Figma, Lucidchart, Miro
DESIGN QUESTION
How might we encourage college students to make time for self-care activities, while not neglecting their coursework?
RESEARCH
User Interviews
In order to better understand our target user group, my 2 other members and I conducted interviews with 4 current university students. We asked several questions about productivity, stress level, time management, and experience with similar apps. From these interviews, we learned that they:
01
Tend to not have enough time to pursue hobbies and non-academic activities, but hope to be able to.
02
Have minimal experience with productivity apps.
03
Are overwhelmed or spending too much time on school assignments.
Struggle with getting adequate amounts of sleep.
04
05
Hope to actively increase productivity.
SELECTED USER QUOTES
My motivation has definitely gone down since the start of the pandemic.
I have trouble waking up and getting enough sleep now.
I primarily like to run for exercise and I've been running a lot less during the pandemic.
Check out my entire user interview here!
Competitive Analysis
In addition to interviews with potential users, competitive analyses were conducted to identify and analyze existing health and wellness platforms that existed in the identified space. These analyses proved fruitful in identifying successes and failures of current platforms, consumer needs and wants, and unfilled niches. The 3 analyses were conducted on Focus To-Do (mine), Tangerine, and Forest.
These apps showcased unique approaches to productivity that would mold our later approach. Features included digital rewards for productivity, calendar based activity scheduling, and mood tracking. Various complaints from users showcased flaws in the design of the platforms, including:
01
An overwhelming amount of disjointed features in Focus To-Do.
02
Tangerine requiring too much in app participation and notifications.
03
A lack of visual affordances and status feedback from Forest.
Personas
Using the information from our user interviews, we created 2 personas using major user characteristics, goals, pain points, desires, and potential scenarios that represented 2 of our possible users. These personas helped us better understand our target user group, possible experiences, and helped us to better focus our design goals.
See the thoughts that went behind our persona brainstorming process here!
We first gathered and organized all of the information from our user interviews. From there, we noticed a few patterns and developed our 2 personas: Angus, a senior who experiences relatively low levels of stress but hopes to spend more time socializing, exercising, and on hobbies, and Amber, a freshman who is overwhelmed by her schoolwork and hopes to reduce the stress and better plan her time. After creating an outline and the provisional persona, we then generated the polished personas.
User Journey Map
Following the initial research conducted on the project’s user group, a journey map was developed to capture the typical day of Angus, one of our personas. This map, that I created in Adobe XD, tracked the interactions Angus had throughout the day, specifically concerning his productivity with school work, socializing, hobbies, and sleep. Unique events throughout the day were listed and described, while tracking the emotions of Angus via a mood graph. A productivity line was overlaid to indicate the success of his day over time and how this related to his mental wellbeing. This helped identify the opportunities for design and informed the design requirements of the resulting app.
Storyboards
With the user research in mind, each group member created 2 storyboards. These illustrated interactions and user experiences in the morning, at bedtime, and dealing with situations such as procrastination, socializing, classes, and leisure time. This also included our initial, individual brainstorms for design features and app interactions before our next steps. Here are a couple of the storyboards we made:
DESIGN REQUIREMENTS
Through the interviews, journey map, and competitive analyses, a series of design requirements were identified to guide the solution to the design question. The solution needed to fulfill the following requirements:
Alleviate anxiety by encouraging users to be productive instead of procrastinating.
Compile reflection statistics over time after the app is used to create an image of user productivity.
Suggest to the user ideal sleep cycles before bed.
Communicate reminders to complete activities to encourage timely productivity.
Restrict distracting apps on the user's phone.
Customize what the user wants the app to help them with in their daily lives.
This criteria was used as the baseline for the resulting design and informed the necessary features. Note: the above are just a selection of key requirements. For a more in-depth look, see the full design proposal here!
IDEATION
Interface Design Sketches
With a basic framework of the application in the site map, paper prototype designs were developed individually for more ideation. These were used as a foundational layout for our application before testing the usability and functionality of our interface and interactions. My sketches are shown below.
Lo-Fi Prototype
After our individual ideation, we came together, using the similarities and best features in our sketches to create our low-fidelity prototype digitally on Figma. We created interaction flows for our 3 key pathways in the app: adding an activity, saving a video (mine), and checking analytics.
USABILITY TESTING
Using the low-fidelity prototype, we conducted usability tests with 3 of our peers, asking each to perform 3 tasks and narrate as they did so. This helped us identify any design flaws and places for improvement before creating our final product. These suggestions were later used in our high-fidelity mockups.
Through the quick evaluation of our low-fidelity prototype, we found that users:
Had difficulty in the dashboard interface, especially with the "Add Activity" function.
Had trouble with finding saved videos because of too many features on that one page.
Clicked on parts that did not have interactions due to lots of buttons being on the page.
View our full evaluation plan and findings here!
INFORMATION ARCHITECTURE
Sitemap
Following the design proposal and identification of use scenarios, an information architecture was developed to map out the flow throughout the app. This sitemap is crucial in understanding the layout of content throughout the app and understanding how different features and pages would interact with one another.
This architecture was based on the use cases identified in research and was created via Lucidchart. The resulting diagram provided a structure for the wireframes and later prototype.
As shown in the sitemap, the app is broken into 4 key pages:
1. Home
2. Mindfulness/Sleep (mine)
3. Analytics
4. User Profile
Each page has specific content that was mapped onto it, identifying the connections between elements.
Annotated Wireframes
Similar to the low-fidelity prototypes, the annotated wireframes consist of basic, colorless screens that display the interface of our app, but more in-depth and with annotations explaining our design choices. We used feedback from the usability testing to revise our screens and created more. The annotations help explain the functions of each app feature and layout, as well as our thought processes and design decisions before we moved onto the final mockup. While we each made several wireframes, here are the crucial ones:
To see all of our annotated wireframes, check them out here!
Key Path Scenarios
To show the key interactions in our app, we also each made a key path scenario for the most important part of our feature. This helped organize and demonstrate our ideas, and was used when we prototyped our interactions together for the hi-fi prototype.
HI-FI PROTOTYPE
The final step in the UX process to create Qualia was a high-fidelity prototype. This prototype was constructed to be visually akin to the end product, while also implementing the key interactions the user would have. This final step was crucial in showing the capabilities of the platform and how the user experience would really feel. This design, created in Figma, was based on the collection of research, iteration, and evaluation on the lo-fi prototype.
As can be seen in the selected screenshots, the final design relied on visual principles to create a pleasing experience without the burden of text or excess options. The colors, type, icons, and other visual elements were selected to be comforting while also practical for the quick, productive lifestyle of the user.
FEATURE 1
Clear Dashboard
The self-care tasks that users want to accomplish that day is what is first displayed when Qualia is opened. Each card is editable if something needs to be changed, and completed tasks are moved to the bottom of the screen to provide a sense of accomplishment without crowding the screen.
FEATURE 2
Sleep & Mindfulness (mine)
For those who have trouble getting to bed on time, Qualia offers motivation through a customizable sleep tracker/reminder. Additionally, a playlists tab gives personalized mindfulness video recommendations, and a chatbot provides users with more choices beyond satisficing, while not presenting an overwhelming amount of information.
FEATURE 3
Motivating Analytics
To encourage users to develop life-long healthy habits, Qualia includes an analytics tab with various categories of well-being so that users can see where they’re doing well and areas that they can focus on more. Colorful graphs capture interest and can be tapped on to show more feedback.
FEEDBACK
I love the colors/visual design aspect [...] everything about the mindfulness tab is great!
~ Teaching Assistant
The interactions felt very intuitive to me!
~ Target User
REFLECTION
Completing such a large project through zoom certainly had its difficulties; in particular, communicating our ideas with each other was a challenge as it wasn’t possible to simply draw up a quick sketch of what we meant. Instead, we had to resort to simply using words to get across what we were thinking, actually implement what we were talking about in our designs, or sketch what we were thinking and then take a picture and share that.
In terms of making actual design decisions, I found that choices that had clear rationale behind them were easy for us to make (such as determining the words we would use for labels since that was backed by our research), but ones that were more subjective would cause significant debate (like when we spent over an hour determining what colors our app should use because there was no obvious answer).
As always, more time would have been nice so that we could have conducted more research. This would have allowed us to branch out and design for a user group that was different than what we had immediate access to during this pandemic, and would have also led to an even more user-centric app since we could have done more usability testing. Overall though, I’m proud of how my team was able to come together and create an amazing product, especially given the unique circumstances.