A digital web and mobile app that allows students to practice tools that aim to improve student wellbeing.
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.
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.
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.
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 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.
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:
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.
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.
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.
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 for front end development and Vuetify as the UI Library. 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.
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.
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.
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.
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.
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.
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.
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.