School Project

Mobile App Design Project:
iFeel@UofT

Course

INF1602 Fundamentals of User Experience

Role

Prototype Lead

Date

10/2022 - 12/2022

Platform

iOS

Tools

Figma
Photoshop
Google Form
Excel

Method

Researching
Ideation
Interaction Design
Visual Design
Prototyping
User Testing
Evaluation
Presentation

Project Objective

Partner with Innovation Hub - the University of Toronto, to design a mobile app to help UofT students foster positive mental health.

Approach

Research

Our data is collected by conducting questionnaires and interviews with more than 70 UofT students. Based on our analysis, we were able to generate a persona and as-is scenario according to the user’s pain point. We ran our ideas and design through rounds of evaluation and landed on the three key features: Mood Log, Customized Journey(we call it Quest), and Anonymous Venting(we call it UTPeeps).

I was responsible throughout the process and in charge of design and prototype.

Analysis

Based on the data collected, we were able to empathize with our users and generated the following artifacts.

Problem Statement

Although UofT offers a multitude of mental health resources, students still don’t use them and don’t understand the seriousness of maintaining positive mental health.

Persona

Need Statement

As-is Scenario

Ideation

Based on the research artifacts, we were able to empathize with the users and came up with the following ideation.

Hill Statement

PrioritIzation Grid

To-be Scenario

Journey Map

Design

After thorough ideation, we transitioned to the design phase where we developed a list of key features. This allowed us to proceed with creating low-fidelity sketches, mid-fidelity wireframes, and interactive prototypes. The app includes 3 key features, which are Mood Log, Quest, and Vent.

Lofi Wireframe

Mood Log Feature Wireframe

Mood log

The user can choose the customized avatar that best reflects his/her mood.

Detailed Feelings

The user can select from a list of preselected words to help identify their mood. When a feeling is chosen, the corresponding insight will appear in the bottom left corner. The user has the option to view this insight immediately or at a later time.

Instant Insights

These insights try to help user understand more about his/her feelings and give suggestions for coping strategies.

Causation

The user will then be guided to try to figure out the causation of his/her mood.

Journal

The user is encouraged to foster a habit of journaling his/her feelings. The user is provided a few prompts to begin at ease.

Vent to UTPeeps

The journal feature is also incorporated with the venting feature enable the user to easily convert his/her journal into a post.

Customized Insights

After the user finishes the mood log, he/she will be directed to the customized insight overview page, where he/she is provided with insight into his/her mood log and recommended activities.

Quest Feature Wireframe

My Quest

Start page of Quest. User can see his/her quests and recommended quests.

Final Week Thriving Kit

This is a demo quest designed for UofT student who is going through the final weeks. The user can get a gist of what this quest is about and read from other people’s review

Know Before

We use user’s emotion levels to better customized the type and amount of tasks in this quest.

Personalized Calendar

We are syncing this app with Quercus(a.k.a Canvas) so that the user can easily manage their due dates. The user can also add personal agendas

Goals

We use user’s goal to better customized the type and amount of tasks in this quest.

Overview

This is where user gets an overview of this quest.

Daily Tasks

These are the suggested task for day 1.

Vent Feature Wireframe

UTPeeps Community

UTPeeps provided a safe community for user to feel encouraged and motivated. The user can see the trending post with the most likes.

#Finalsweek

The user can browse, like, reply and post in #Finalsweek channel.

Post

By selecting a hashtag, the user can post in according channels.

My Post

The user can manage their posts in “My Post” page.

Replies

The user can interact with other users.

Visual Design

Evaluation

After critique and reflection on our design solution, we've conducted usability testings including 5-second testing and Think Aloud to evaluate the effectiveness of our prototype and received valuable feedbacks.