MyUSE

Interactive Mindfulness and Self-Reflection Tools for Student Wellbeing:
A User-Centred Design Approach

A digital web and mobile app that allows students to practice tools that aim to improve student wellbeing.

Student Thesis Project

I was approached by the MyUSE team during my Master of Science in Interactive Media to collaborate on the Skill Buildings Tools section of the platform. My role was to design and develop a set of Skill Building Tools within the MyUSE app that would allow students to engage in activities to help them reflect on their values and goals for their college experience.

Client
University College Cork (UCC), Ireland
Role
UX & UI Design, Development
Timeline
June 2020 - Sept 2020
Team
multi-disciplinary team from UCC

Problem Statement

Illicit substance use among students in higher education appears to be increasing. Substance use is known to cause harms to student academic performance, social relationships, physical and mental health.

With student wellbeing becoming a growing concern for the Irish government, Higher Education Institutions and Students Unions, the need for a protected and accessible digital solution is apparent.

Project Goal

To implement a User-Centred Design approach to analyse the end-users needs and apply these to create a set of tools that are both engaging and promote customisation and experimentation that allow students to create strategies that enforce wellbeing and healthy habits.

Background

Students are directed to use the support tools to explore how substance use may impact their life as a student, by completing an assessment and receiving personalised feedback.

The tools also help students learn skills for mindful decision making that align with their own personal values and long-term goals. This is where my tools would fit into the overall platform.

The over-arching Informational website as well as Survey and Personalised Feedback sections were developed and designed separately by UCC’s MyUSE team. You can learn more about the team here.

Research

The MyUse online platform is designed for all students in Higher Education in Ireland, and includes a very broad diversity of people from many age groups, cultural backgrounds, physical and mental abilities and skills. MyUse is primarily targeted at youths aged between 18-25 years, and aims to meet students where they are, creating an engaging experience using digital technology.

MyUSE and the Skill Building tools were developed for both non-users and users of illicit substances.

68%
of university students are non-users of illicit substances
18%
report annual misuse of illicit substances other than marijuana

Design Brief

The design brief was presented to me by the MyUSE team and I was asked to develop an engaging and rich interactive experience to help students reflect upon their personal values and goals, and make mindful decisions in their life as a student.

My goal was to create 2 skill building tools:

  1. a Mindful Breathing Exercise and
  2. an Acceptance and Commitment Therapy (ACT) exercise to evaluate life goals.
Mindful Breathing Design Brief
ACT Design Brief

The tools I would develop needed to follow a mobile-first approach and undergo an iterative design process.

Before the first stakeholder review, I began by conducting market research. Based on my findings, I proceeded to sketch ideas and produce an initial set of wireframes to present to project stakeholders.

Competitor Analysis - Breathing Exercise
Competitor Analysis - Breathing Exercise
Mindful Breathing paper sketches
Mindful Breathing paper sketches
Values Compass paper sketches
Values Compass paper sketches

Wireframes

After sketching out ideas using the Crazy 8 method, I prepared low fidelity prototypes in Figma in order to present my ideas to the MyUSE stakeholders.

Low Fidelity Figma Prototype for a Stakeholder Presentation
Low Fidelity Figma Prototype for a Stakeholder Presentation

The Stakeholder evaluation was paramount in making me realise the need for an Onboarding process for users.

While I was aware of Mindful Breathing as a relaxation technique, I overlooked that the majority of 18-25 year olds would likely not be aware of mindful breathing or know what it is.

First Iterations & Prototypes

All designs and design files were originally created in Sketch as I was given a sketch account via university. As I am no longer a student, I have since converted my Sketch files to Figma.

Design File Organisation

As this project followed an iterative design process, alot of my time was going to be spent in a vector-based design tool. In this case I used Figma.

In order to streamline at least 2 iterations of 2 different products within 6-8 weeks, organisation was paramount.

I created a separate design file for each product (Square Breath & Values Compass) and 2 subsequent pages for Version 1 and Version 2 of each product.

The technology stack that MyUSE used was NuxtJS for front end development and Vuetify as the UI Library. Vuetify is built from Google's Material Design components. I created a Components & Styles file within my design file where I followed atomic principles to build out components and also to set text and colour styles to streamline my design process.

Reusable components, text and colour styles to optimise the design process

Square Breath - Version 1

I designed all the screens for both a mobile and a desktop version of the breathing exercise tool that I preliminary named 'Square Breath'. I would hold weekly feedback sessions with the lead UX designer and developer for MyUSE to discuss best practices and how the designs satisfied the technology stack.

High Fidelity Prototypes - Square Breathing Exercise

Usability Testing - Round 1

Qualitative Feedback

Evaluation

System Usability Scale (SUS)
77.5
Net Promoter Score (NPS)
-25

Values Compass- Version 1

As with the breathing exercise. I designed all the screens for both a mobile and a desktop version of the Values Compass tool. The biggest challenge with the Values Compass tool was its complex process for unfamiliar users (it took me some time to understand how to use it correctly as a patient). This is reflected in both the qualitative and quantitative feedback gathered during user testing.

High Fidelity Prototypes - Values Compass

Qualitative Feedback

Evaluation

System Usability Scale (SUS)
76
Net Promoter Score (NPS)
0

Design Changes

During the first round of user testing, I kept an issue list of pain points and of positive insights to understand what design choices and components should be re-designed and which should be kept or improved upon.

Mindful Breath

Re-Brand

All of the test participants struggled to understand what the tool was exactly.

The term Square Breathing was not self-explanatory to students who were unlikely to have come across it before.

Mindful Breath

On-Screen Instructions

One of the primary pain points from user testing was the lack of a learn-by-doing approach to using and learning the breath tool.

This feedback led to me removing the instructional modals and instead use dynamic text instructions, to facilitate a learn-by-doing approach.

Values Compass

Keyword Suggestions

Almost all participants struggled with the Keywords stage of the Values Compass exercise. The redesign was made to clarify the intention of assigning Keywords as well as what they are used for.

3 participants mentioned that they would like a list of suggestions. That feedback was led to me using Vuetify's combobox component to provide a list of keyword suggestions and allow for custom inputs.

User Testing - Round 2

Due to time constraints and the clear findings from the first round of usability testing, the second round of testing would use developed prototypes (NuxtJS) as opposed to vector prototypes (Figma). After creating high fidelity screens in Figma, I spent the months of August and September developing both tools using NuxtJS and Vuetify. This second round of testing would not be followed by development and further designs, therefore these testing sessions would be done to validate changes and observe any missing pieces that may fall outside the scope of the project.

Qualitative Feedback

Mindful Breath

Values Compass

Evaluation

Mindful Breath

System Usability Scale (SUS)
86
+9
Net Promoter Score (NPS)
66
+66

Values Compass

System Usability Scale (SUS)
78
+2
Net Promoter Score (NPS)
-33
-33

Prototypes

Mindful Breath
Visit Tool
Values Compass
Visit Tool

If you would like to know more about my thesis project, feel free to check out a pdf version of my research paper.

MSc Thesis Paper
Read Thesis