Help Me
Help Me
UX RESEARCH / WEB DESIGN
A platform for students to find, share, and review community care resources—on-campus and off
Skip to prototype
ROLE
UX/UI Lead (research, training design team, wireframing, prototyping, content curation)
TEAM
Product Manager, Web Developer, 4 Jr. UX Designers
AUDIENCE
University of Toronto students
Background
It can be hard for post-secondary students to find and access mental health care. Services on-campus can be especially limited, leaving many students unsupported and ill-equipped to handle any heavy impacts on their academic life.
I explored this issue in-depth as a Design Researcher for the University of Toronto (UofT) Task Force on Student Mental Health. Shortly after, I was invited to contribute my research to SMART, a non-profit group with a mission to improve students’ access to care.
I trained and co-led a UX design team within SMART to create Help Me Help Me (HMHM): An academic, mental health, and community resource database run by and for UofT students.
By applying UX methods to my original research, my team and I identified students’ unique needs and designed a consolidated care-finding platform where students can easily find, save, share, and review resources that support their holistic wellbeing.
Goal
Create a holistic resource database for students in distress
Research
User Interviews & Affinity Mapping
Our team’s discovery phase was founded on my original research, which involved several focus group sessions and student feedback events totalling 200+ participants across UofT’s three campuses.
We used this data to create an affinity map that identified the overarching themes of the care-finding journey—such as how they begin and end.
Some key findings and insights from this are condensed into the following principles:
Sharing experiences
Finding Many focus group participants said they felt too isolated from their peers to ask them for help. But those that successfully navigated the system had plenty of advice to share at the table.
Insight Users need a platform to share and review their care-seeking experiences. This anecdotal evidence could empower others to pursue (or avoid) certain care options.
Before it’s a crisis
Finding Students believe they need to be in crisis or have a chronic health condition to receive academic accommodations or support. They’re unsure how to get help otherwise and may feel too ashamed to ask.
Insight We need to direct users to resources on how to manage acute stressors and prevent crises as they might “tune out” long-form services they don’t think they qualify for.
Clear care-finding
Finding Students know that mental health services are available on- and off-campus, but they’re confusing for them to navigate. Services can lack transparency about what they provide or be red-taped by waitlists and bureaucracy. Many participants said they “gave up” along the way.
Insight We need to clearly organise and describe the mental health services that students can access.
Experience Mapping & Personas
We also plotted out exhaustive user scenarios based on common care-finding prompts (e.g. recent trauma, social isolation, applying for accommodations) in order to:
∙ Discover what on- and off-campus support options exist for students
∙ Understand UofT policies that could help (or harm) students in distress
∙ Identify and confront barriers to accessing these supports
Our diverse UX design team had lived experience accessing care at UofT and were able to offer marginalised perspectives and pain points throughout this work.
Student experience mapping
As we progressed, we found pathways and pain points branched off dramatically for students who are undiagnosed, uninsured, time-poor, and so on.
We realised that personal characteristics like these could drastically affect care accessibility, so we created personas that could embody these diverse needs. These personas served as touchstones throughout our concept development as we recalled who our site needed to serve and how.
Creating student user personas
We also found that academic issues can merely be a side effect of larger, more personal stressors in a student’s life. Moreover, students might not be aware of the university policies that can protect their GPA against these impacts.
These insights led us to create more holistic design principles for our work:
Student rights
Finding UofT actually has many policies that grant students academic leniency in response to certain issues. These policies may be hard to find or understand though, and students may not know how to use them to self-advocate.
Insight We need to translate pro-student policies and tag them appropriately so students can discover and apply them.
Personalised care
Finding Many care options aren’t accessible to students due to their residency status, location, disability, or other identity-based factors. This presents major barriers for marginalised students seeking care.
Insight Users should be able to filter through resources to find what’s most accessible to them (e.g. services that accept their insurance).
Beyond academia
Finding Personal stressors (such as financial or domestic issues) can affect one’s academic performance. In such cases, student life can’t be improved without addressing issues “outside” the classroom.
Insight We need to provide holistic care resources that go beyond academic and mental health supports so users can address external root causes to their stress.
Concept Development
Usability testing
Our resource cards went through several design iterations to ensure they would fit all our planned features and be intuitive to interact with on desktop and mobile.
Their final design was remarkably pared down from earlier prototypes as testing showed user interactions weren’t as complex as anticipated, so less “hand-holding” in the UI was required.
Testing also yielded UI improvements for user flows such as saving resources and leaving reviews. HMHM’s design system and overall IA were also edited to fit user expectations and WCAG guidelines.
Interaction, UI & IA design
Our comparative analysis of similar sites (e.g. Pinterest, Takecare19) inspired a card-style design for our resources. We found this format helps spotlight each search result, and their expanded modal views can fit additional user interactions.
Our team went through several rounds of defining (and fitting) our wishlist of features within these cards and the site’s overall IA. These final features include:
∙ Saving and sorting resources into lists
∙ A structured review system for Services
∙ External resource links and tags
∙ User resource submissions
Content curation
Before we could develop our design, we had to define our site’s content—the types of resources users need, and what they need to know about them.
Our experience maps showed us that not every problem requires outside help. Sometimes a form, email, or step-by-step instructions are enough to resolve an issue. Based on this, we developed two different types of resources that’d be housed on HMHM:
∙ Services (tools and professionals that can give users specialised support); and
∙ Guides (instructions on how users can support themselves).
Search, filter & save
Clear care-finding happens right on the HMHM homepage. Users can search for resources by keyword and filter them by location, cost, accessibility, and more to get Personalised care options they know they can access. They can also save resources and sort them into lists for later reference.
Services
Resources are split into two types: Services and Guides. Services are tools and professionals that can provide specialised support to users. Our Service database goes Beyond academia by including off-campus care providers, student groups, and UofT offices with the authority to intervene in academic and Student rights issues.
Multimedia additions
Users can pin images, text, comments, and links to the map using the fuss-free, icon-loaded toolbar on the lefthand side. This gives civilian preplanners the ability to add explanatory visuals and content (i.e. photos of spaces, links to floorplans) to supplement their plans.
Guides
Unlike Services, which are tangible things that can support users, Guides are instructions for how users can support themselves. This includes topics like advocating for your Student rights and applying resiliency strategies to manage stress Before it’s a crisis. This feature is what frames “help me help me” as “help me help myself”.
HMHM is also a platform for Sharing experiences. Users can add to the database by submitting Services and Guides for peer review by the HMHM team. They can also review Services using a structured rating system—which further supports Clear care-finding by setting expectations for users.
Final Design
Key Features
Next Steps
Usability Testing & Branding
HMHM was alpha launched at helpmehelp.me in Summer 2022 and remains under development. The HMHM team plans on introducing it to early adopters (e.g. UofT student groups) for feedback and testing. They’ll also be recruiting and training a fresh set of aspiring UI designers (i.e. current students at UofT) to configure the site’s voice and branding for marketing purposes.
Narrative Search Tool
In our research, we found that students may not know what kind of support they need or are entitled to when they begin their care-finding journey. This can affect how their keywords are phrased and limit their search results.
Our solution to this was a quiz-style search tool that narrows down search results by asking users increasingly specific questions about what’s stressing them. We began mapping topics and pathways for this “narrative search tool”, and the HMHM team plans to recruit more UX designers to finish that work.
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!
ROLE
UX/UI Lead (research, training design team, wireframing, prototyping, content curation)
TEAM
Product Manager, Web Developer, 4 Jr. UX Designers
AUDIENCE
University of Toronto students
Background
It can be hard for post-secondary students to find and access mental health care. Services on-campus can be especially limited, leaving many students unsupported and ill-equipped to handle any heavy impacts on their academic life.
I explored this issue in-depth as a Design Researcher for the University of Toronto (UofT) Task Force on Student Mental Health. Shortly after, I was invited to contribute my research to SMART, a non-profit group with a mission to improve students’ access to care.
I trained and co-led a UX design team within SMART to create Help Me Help Me (HMHM): An academic, mental health, and community resource database run by and for UofT students.
By applying UX methods to my original research, my team and I identified students’ unique needs and designed a consolidated care-finding platform where students can easily find, save, share, and review resources that support their holistic wellbeing.
Goal
Create a holistic resource database for students in distress
Research
User Interviews & Affinity Mapping
Our team’s discovery phase was founded on my original research, which involved several focus group sessions and student feedback events totalling 200+ participants across UofT’s three campuses.
We used this data to create an affinity map that identified the overarching themes of the care-finding journey—such as how they begin and end.
Some key findings and insights from this are condensed into the following principles:
Sharing experiences
Finding Many focus group participants said they felt too isolated from their peers to ask them for help. But those that successfully navigated the system had plenty of advice to share at the table.
Insight Users need a platform to share and review their care-seeking experiences. This anecdotal evidence could empower others to pursue (or avoid) certain care options.
Before it’s a crisis
Finding Students believe they need to be in crisis or have a chronic health condition to receive academic accommodations or support. They’re unsure how to get help otherwise and may feel too ashamed to ask.
Insight We need to direct users to resources on how to manage acute stressors and prevent crises as they might “tune out” long-form services they don’t think they qualify for.
Clear care-finding
Finding Students know that mental health services are available on- and off-campus, but they’re confusing for them to navigate. Services can lack transparency about what they provide or be red-taped by waitlists and bureaucracy. Many participants said they “gave up” along the way.
Insight We need to clearly organise and describe the mental health services that students can access.
Experience Mapping & Personas
We also plotted out exhaustive user scenarios based on common care-finding prompts (e.g. recent trauma, social isolation, applying for accommodations) in order to:
∙ Discover what on- and off-campus support options exist for students
∙ Understand UofT policies that could help (or harm) students in distress
∙ Identify and confront barriers to accessing these supports
Our diverse UX design team had lived experience accessing care at UofT and were able to offer marginalised perspectives and pain points throughout this work.
Student experience mapping
As we progressed, we found pathways and pain points branched off dramatically for students who are undiagnosed, uninsured, time-poor, and so on.
We realised that personal characteristics like these could drastically affect care accessibility, so we created personas that could embody these diverse needs. These personas served as touchstones throughout our concept development as we recalled who our site needed to serve and how.
Creating student user personas
We also found that academic issues can merely be a side effect of larger, more personal stressors in a student’s life. Moreover, students might not be aware of the university policies that can protect their GPA against these impacts.
These insights led us to create more holistic design principles for our work:
Student rights
Finding UofT actually has many policies that grant students academic leniency in response to certain issues. These policies may be hard to find or understand though, and students may not know how to use them to self-advocate.
Insight We need to translate pro-student policies and tag them appropriately so students can discover and apply them.
Personalised care
Finding Many care options aren’t accessible to students due to their residency status, location, disability, or other identity-based factors. This presents major barriers for marginalised students seeking care.
Insight Users should be able to filter through resources to find what’s most accessible to them (e.g. services that accept their insurance).
Beyond academia
Finding Personal stressors (such as financial or domestic issues) can affect one’s academic performance. In such cases, student life can’t be improved without addressing issues “outside” the classroom.
Insight We need to provide holistic care resources that go beyond academic and mental health supports so users can address external root causes to their stress.
Concept Development
Usability testing
Our resource cards went through several design iterations to ensure they would fit all our planned features and be intuitive to interact with on desktop and mobile.
Their final design was remarkably pared down from earlier prototypes as testing showed user interactions weren’t as complex as anticipated, so less “hand-holding” in the UI was required.
Testing also yielded UI improvements for user flows such as saving resources and leaving reviews. HMHM’s design system and overall IA were also edited to fit user expectations and WCAG guidelines.
Interaction, UI & IA design
Our comparative analysis of similar sites (e.g. Pinterest, Takecare19) inspired a card-style design for our resources. We found this format helps spotlight each search result, and their expanded modal views can fit additional user interactions.
Our team went through several rounds of defining (and fitting) our wishlist of features within these cards and the site’s overall IA. These final features include:
∙ Saving and sorting resources into lists
∙ A structured review system for Services
∙ External resource links and tags
∙ User resource submissions
Content curation
Before we could develop our design, we had to define our site’s content—the types of resources users need, and what they need to know about them.
Our experience maps showed us that not every problem requires outside help. Sometimes a form, email, or step-by-step instructions are enough to resolve an issue. Based on this, we developed two different types of resources that’d be housed on HMHM:
∙ Services (tools and professionals that can give users specialised support); and
∙ Guides (instructions on how users can support themselves).
Search, filter & save
Clear care-finding happens right on the HMHM homepage. Users can search for resources by keyword and filter them by location, cost, accessibility, and more to get Personalised care options they know they can access. They can also save resources and sort them into lists for later reference.
Services
Resources are split into two types: Services and Guides. Services are tools and professionals that can provide specialised support to users. Our Service database goes Beyond academia by including off-campus care providers, student groups, and UofT offices with the authority to intervene in academic and Student rights issues.
Multimedia additions
Users can pin images, text, comments, and links to the map using the fuss-free, icon-loaded toolbar on the lefthand side. This gives civilian preplanners the ability to add explanatory visuals and content (i.e. photos of spaces, links to floorplans) to supplement their plans.
Guides
Unlike Services, which are tangible things that can support users, Guides are instructions for how users can support themselves. This includes topics like advocating for your Student rights and applying resiliency strategies to manage stress Before it’s a crisis. This feature is what frames “help me help me” as “help me help myself”.
HMHM is also a platform for Sharing experiences. Users can add to the database by submitting Services and Guides for peer review by the HMHM team. They can also review Services using a structured rating system—which further supports Clear care-finding by setting expectations for users.
Final Design
Key Features
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!
Next Steps
Usability Testing & Branding
HMHM was alpha launched at helpmehelp.me in Summer 2022 and remains under development. The HMHM team plans on introducing it to early adopters (e.g. UofT student groups) for feedback and testing. They’ll also be recruiting and training a fresh set of aspiring UI designers (i.e. current students at UofT) to configure the site’s voice and branding for marketing purposes.
Narrative Search Tool
In our research, we found that students may not know what kind of support they need or are entitled to when they begin their care-finding journey. This can affect how their keywords are phrased and limit their search results.
Our solution to this was a quiz-style search tool that narrows down search results by asking users increasingly specific questions about what’s stressing them. We began mapping topics and pathways for this “narrative search tool”, and the HMHM team plans to recruit more UX designers to finish that work.
Background
It can be hard for post-secondary students to find and access mental health care. Services on-campus can be especially limited, leaving many students unsupported and ill-equipped to handle any heavy impacts on their academic life.
I explored this issue in-depth as a Design Researcher for the University of Toronto (UofT) Task Force on Student Mental Health. Shortly after, I was invited to contribute my research to SMART, a non-profit group with a mission to improve students’ access to care.
I trained and co-led a UX design team within SMART to create Help Me Help Me (HMHM): An academic, mental health, and community resource database run by and for UofT students.
By applying UX methods to my original research, my team and I identified students’ unique needs and designed a consolidated care-finding platform where students can easily find, save, share, and review resources that support their holistic wellbeing.
ROLE
UX/UI Lead (research, training design team, wireframing, prototyping, content curation)
TEAM
Product Manager, Web Developer, 4 Jr. UX Designers
AUDIENCE
University of Toronto students
Goal
Create a holistic resource database for students in distress
Research
User Interviews & Affinity Mapping
Our team’s discovery phase was founded on my original research, which involved several focus group sessions and student feedback events totalling 200+ participants across UofT’s three campuses.
We used this data to create an affinity map that identified the overarching themes of the care-finding journey—such as how they begin and end. Some key findings and insights from this are condensed into the following principles:
Sharing experiences
Finding Many focus group participants said they felt too isolated from their peers to ask them for help. But those that successfully navigated the system had plenty of advice to share at the table.
Insight Users need a platform to share and review their care-seeking experiences. This anecdotal evidence could empower others to pursue (or avoid) certain care options.
Before it’s a crisis
Finding Students believe they need to be in crisis or have a chronic health condition to receive academic accommodations or support. They’re unsure how to get help otherwise and may feel too ashamed to ask.
Insight We need to direct users to resources on how to manage acute stressors and prevent crises as they might “tune out” long-form services they don’t think they qualify for.
Clear care-finding
Finding Students know that mental health services are available on- and off-campus, but they’re confusing for them to navigate. Services can lack transparency about what they provide or be red-taped by waitlists and bureaucracy. Many participants said they “gave up” along the way.
Insight We need to clearly organise and describe the mental health services that students can access.
Experience Mapping & Personas
We also plotted out exhaustive user scenarios based on common care-finding prompts (e.g. recent trauma, social isolation, applying for accommodations) in order to:
∙ Discover what on- and off-campus support options exist for students
∙ Understand UofT policies that could help (or harm) students in distress
∙ Identify and confront barriers to accessing these supports
Our diverse UX design team had lived experience accessing care at UofT and were able to offer marginalised perspectives and pain points throughout this work.
As we progressed, we found pathways and pain points branched off dramatically for students who are undiagnosed, uninsured, time-poor, and so on.
We realised that personal characteristics like these could drastically affect care accessibility, so we created personas that could embody these diverse needs. These personas served as touchstones throughout our concept development as we recalled who our site needed to serve and how.
We also found that academic issues can merely be a side effect of larger, more personal stressors in a student’s life. Moreover, students might not be aware of the university policies that can protect their GPA against these impacts.
These insights led us to create more holistic design principles for our work:
Student rights
Finding UofT actually has many policies that grant students academic leniency in response to certain issues. These policies may be hard to find or understand though, and students may not know how to use them to self-advocate.
Insight We need to translate pro-student policies and tag them appropriately so students can discover and apply them.
Personalised care
Finding Many care options aren’t accessible to students due to their residency status, location, disability, or other identity-based factors. This presents major barriers for marginalised students seeking care.
Insight Users should be able to filter through resources to find what’s most accessible to them (e.g. services that accept their insurance).
Beyond academia
Finding Personal stressors (such as financial or domestic issues) can affect one’s academic performance. In such cases, student life can’t be improved without addressing issues “outside” the classroom.
Insight We need to provide holistic care resources that go beyond academic and mental health supports so users can address external root causes to their stress.
Concept Development
Usability testing
Our resource cards went through several design iterations to ensure they would fit all our planned features and be intuitive to interact with on desktop and mobile.
Their final design was remarkably pared down from earlier prototypes as testing showed user interactions weren’t as complex as anticipated, so less “hand-holding” in the UI was required.
Testing also yielded UI improvements for user flows such as saving resources and leaving reviews. HMHM’s design system and overall IA were also edited to fit user expectations and WCAG guidelines.
Interaction, UI & IA design
Our comparative analysis of similar sites (e.g. Pinterest, Takecare19) inspired a card-style design for our resources. We found this format helps spotlight each search result, and their expanded modal views can fit additional user interactions.
Our team went through several rounds of defining (and fitting) our wishlist of features within these cards and the site’s overall IA. These final features include:
∙ Saving and sorting resources into lists
∙ A structured review system for Services
∙ External resource links and tags
∙ User resource submissions
Content curation
Before we could develop our design, we had to define our site’s content—the types of resources users need, and what they need to know about them.
Our experience maps showed us that not every problem requires outside help. Sometimes a form, email, or step-by-step instructions are enough to resolve an issue. Based on this, we developed two different types of resources that’d be housed on HMHM:
∙ Services (tools and professionals that can give users specialised support); and
∙ Guides (instructions on how users can support themselves).
Next Steps
Usability Testing & Branding
HMHM was alpha launched at helpmehelp.me in Summer 2022 and remains under development. The HMHM team plans on introducing it to early adopters (e.g. UofT student groups) for feedback and testing. They’ll also be recruiting and training a fresh set of aspiring UI designers (i.e. current students at UofT) to configure the site’s voice and branding for marketing purposes.
Narrative Search Tool
In our research, we found that students may not know what kind of support they need or are entitled to when they begin their care-finding journey. This can affect how their keywords are phrased and limit their search results.
Our solution to this was a quiz-style search tool that narrows down search results by asking users increasingly specific questions about what’s stressing them. We began mapping topics and pathways for this “narrative search tool”, and the HMHM team plans to recruit more UX designers to finish that work.
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!