Production, Circulation, and Drainage
Cerebrospinal Fluid:
This two-page textbook spread is the result of a collaborative effort of three students in the Biomedical Communications neuroanatomy course. For this group project, a pre-determined style guide and colour palette were followed, and a studio environment workflow was emulated, with each team member taking charge of a different stage of execution. My role was the conceptualization and design of the illustrations and layout and the composition of text. Illustrations were then vectorized by Kim and rendered by Felix. The goal of this spread is to communicate key anatomical and physiological aspects of cerebrospinal fluid at molecular, tissue, and system scales.
Clients: Prof. Dave Mazierski, Prof. Shelley Wall
Audience: undergraduate students
Format: print (textbook)
Medium: Adobe Photoshop, Adobe Illustrator
Date: April 2018
Biomedical illustration & design
Minder
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
Process work
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.
User personas
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.
Look Development
Colour palette
The Vigo lab wanted the Minder app to feel:
-
Friendly
-
Positive
-
Warm
-
Supporting
-
Inviting
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
.png)
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)
