MyUse

UX/UI DESIGN FOR PWA & MOBILE WEB · USER TESTING · DEVELOPMENT

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
Skip to Prototype
DESIGN PROCESS

Problem Statement

Substance use is known to cause harms to student academic performance, social relationships, physical and mental health.

Illicit substance use among students in higher education appears to be increasing. Student wellbeing is therefore 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

Substance use is known to cause harms to student academic performance, social relationships, physical and mental health.

Illicit substance use among students in higher education appears to be increasing. Student wellbeing is therefore 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.

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

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.

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.

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.

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

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.

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.

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. This is reflected in both the qualitative and quantitative feedback gathered during user testing.

User Testing - Round 1

Square Breath

Qualitative Findings

Evaluation

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

Values Compass

Qualitative Findings

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

Outcomes

This project has shown that following a UCD approach and involving the target audience at fundamental stages of the design and development of each tool brings with it valuable data.

While each data collection method has its own strengths, it was evident that, from a development perspective, the most valuable data collection method if applied on its own was that of the qualitative data from the Thinking Aloud method in Workshop 1. The observational and explicit feedback along with the ability to ask directly about these behaviours gave rise to critical insights as well as changes to the development process.

Future Considerations

The design and development process that was undertaken can rely on the qualitative data gathered in the second round of testing to shape future development changes. Part of Workshop 2 was for participants to answer a range of post-task questions. When asked about dislikes, it was revealed that 66 per cent (2out of 3) of participants wanted an improved audio experience. The first suggestion was a dynamic voice over that counted down with the text. For future work, this could be achieved by utilising a Text-To-Speech (TTS) solution and dynamically change the word outputs based on the length of the breath that the user selects. Another solution is to recruit a voice actor, record as many words as there are seconds in the breath length selection and use digitised versions of the recordings dynamically as part of the play function and breath configuration array.

This research proves that there is a benefit in holding further usability workshops if (a)customer retention is lower than anticipated, and (b) there is scope for further development.

Final 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