e-Mental Health & Substance Use App
Minder is an e-mental health and substance use app currently being developed by the Mental Health Systems and Services Laboratory at the University of British Columbia. Intended for Canadian university students, Minder aims to help users build skills to manage common mental health and substance use problems, in addition to promoting resilience and formation of social connections. To do this, the app provides evidence-based skills and information for any user who may be struggling with their mental health, or who simply wants to build resiliency in their everyday life; and it also connects users with appropriate services and student groups on campus and within the community.
Minder is being developed as part of a larger Health Canada-funded research study investigating how common mental health problems are in the university student population, how these challenges impact overall student wellbeing, and what tools might be effective in addressing student mental health challenges. My role in this project, along with co-designer Mona Li, was to design the user interface (UI) of the Minder app, as well as aspects of its user experience (UX), in preparation for the app's soft launch in an upcoming randomized control trial research study. The app will eventually be made available for free to all university students in Canada.
Client: Dr. Daniel Vigo, MD, Lic. Psych, DrPH
Audience: Canadian undergraduate and graduate university students (subclinical population)
Format: UI and UX design for mobile (iOS and Android)
Media: Adobe Photoshop, Figma, InVision
Date: May 2021
When we were brought on to the project, the Vigo lab had already conducted research on the app's target audience and had begun initial design work for the product's user interface. We were tasked with the completion of the UI design. We proposed a user-centred design process entailing understanding of the problem space, familiarisation with the existing user research, and creation of key UX documentation to guide our UI design work.
Before diving into design of the user interface, we worked to better understand the app's users and create design North Stars to guide our design decision-making (user personas). We worked with the team to identify a total of 4 groups of users, which were then rank-prioritised based on their relative importance of the project. This resulted in two primary personas and one secondary persona:
New (first-year) domestic students living away from home for the first time (primary)
Older, disillusioned students (primary)
International students (secondary)
Our subsequent design work focused on serving the needs of the two primary personas with some key adjustments/additions to accommodate the secondary persona.
Importantly, we utilised these personas to further develop the preliminary functional and content requirements of the app which were provided to us by the Vigo Lab, and to test and validate design decisions during subsequent stages of the work.
Information architecture & wireframes
We were provided some preliminary structure for the app based on its three key functionalities (pre-determined by Vigo Lab, based on target audience research). We worked with their existing mockups to determine a preliminary information architecture, and to extract all relevant design requirements which we incorporated into low-fidelity wireframes.
In collaboration with the lab team, we then landed on the concept of an exploratory map around which we based subsequent iterations of the wireframes, where we captured user flows and key interface elements and interactions for each screen of the app. New iterations of the wireframes drove the refinement of our information architecture map.
The Vigo lab wanted the Minder app to feel:
They also identified Headspace as an app they liked and found effective at reaching its audience. Based on this information, we proposed a cartoon style with some abstraction and a more hand-drawn feel that would communicate approachability and whimsicality. We also proposed several styles of imagery to incorporate into the map concept; the client opted for a character-focused approach.
We designed two main types of maps - home page and resource pages - each undergoing several iterations before finalizing their presentation and functionality.
Mockups & Design Documentation
Building off our wireframes and look development work, we created multiple iterations of complete mockup sets at increasing levels of fidelity. This entailed creation of all user interface elements and illustrations, along with detailed user flow documentation as creation of functioning prototypes was outside the scope of our work. User personas, along with client/stakeholder feedback and requirements, were the primary basis of evaluation for each iteration of mockups. Target end-user feedback was solicited by the Vigo lab for key aspects of the designs. Final designs were guided by Apple's Human Interface Guidelines (for iOS) and Google's Material Design.
Sample mockup iterations: first-time user experience (FTUE) and log in
In addition to high-fidelity mockups, we prepared detailed design documentation for handover to the development team, who is currently working to implement our designs in both iOS and Android. Once built, the apps will undergo extensive testing with target end-users conducted by the Vigo lab; feedback on UI/UX collected during this time should drive refinement of the design prior to the app's public launch.
Design documentation for development team: iOS (above) and Android (below)