Bea Diaz
UX Designer
Made with


A mobile application to help youth in crisis

Few design roles and tools during this project 

Few design roles and tools during this project 

How Mellow started?

Mellow is a community-based project that started in 2015, was initiated by the Centre for Addiction and Mental Health (CAMH) based on their work with the Peel Service Collaborative, a group of 60 service providers from hospitals to shelters, community centers, faith groups, and counseling organizations that support youth in the Region of Peel Ontario.

This project was led by the School of Design of George Brown College and funded by SSHRC’s Community and College Social Innovation Fund. 

The project was set to wrap up in 2018 and had involved five faculty and 12 design students.

I had active participation in the Mellow project since 2016 and still have, by presenting the design process and showcasing the final MVP in different congress and symposiums.

a Collaborative Effort
Project Timeline


We conducted a series of workshops with counselors, community centers, and crisis response services, friends and family of the youth who experience crisis. Then took all the workshop responses, coded them and came up with common features to create six personas.

  • We discovered through the literature review and workshops that the creation of personas was critical to start the design process and as designer tap in the user shoes and is different circumstances.
  • Throughout the non-structured interviews as well as workshops to service providers, family, and youth in crisis we gather enough information to identify the main problems demographics and the youth motivations to overcome crisis.   

Some of the initial user journey's that came up from the Youth Design Charrette

Some of the initial user journey's that came up from the Youth Design Charrette

User Journey

We had a day-long design charrette where we divided into six teams, and each team had youth from Peel. It was our job to lead each group into the ideation and design concept process; here, different user journeys emerge, taking the personas as a compass for the ideation process.

Also, each team had the challenge to incorporate one of three the main concerns expressed by youth earlier on the workshops. At the end of the design charrette, we had six concepts presented as a result of the user center and collaborative design approach

Primary Design Challenges:

  • Trust and Privacy – Who has access to Information
  • Crisis Planning and Management - The process of anticipating and experiencing a crisis.
  • Culturally Inclusive Design- How to make the application easy to use for different ages, languages, and cultures.

Journey Map Through Crisis

After the design Charrette, we took all the youth input and narrow down to one user journey that will apply to five different stages that the user will go through during crisis. 

Throughout the community consultation, we came out with a definition of crisis that will include different scenarios that youth describe as a crisis and having in mind that definition, this final Journey map was designed.  

"Crisis is a situation that causes emotional or physical distress to youth that overwhelms them and where they feel unable to cope."

Brain storming ideas and early sketches of the final design concept

Brain storming ideas and early sketches of the final design concept


  • After the success of the one-day design charrette. We regroup to talk about the interesting concepts that came up with direct users input. 
  • We distribute into two groups and after coded the feedback on recurrent ideas from the six previous concepts, we start sketching what eventually became the final digital solution.
  • We had around 10 different versions on sketches before we decide on the final one. 

Early  wireframes ideas 

Early  wireframes ideas 


Once we decide the final version will have three pillars or sections: daybook, My plan, and Community. we again worked in three groups to work on the wireframes and how each section would look like. 

Guiding Questions

  • Wireframing was incredibly useful to make a bit more tangible the ideas
  • I personally worked on low fidelity wireframes for the daybook section using illustrator.
  • We did some testing among us using Invision, this helped us to recognize the pain points of the design and potential changes before moving to high fidelity wireframes. 
  • We complete in the course of the summer of 2017 round of 3 iterations per section within the app for a total of 9 Iterations

Tools : After Effects, Invision & Survey Monkey 

Usability Pilot Videos

Once the wireframes were done and the final mockups of the overall interaction were set. The running of different survey sessions was planned to showcase the usability of the design through pilot videos. 

This videos had the objective of giving a visual result of the stage of the design process to the youth and explain which details included from the previous design charrette. 

The user was asked to complete a survey of each section and include suggestions or concerns. 


User Testing

  • User testing session took place during winter/spring of 2018. 
  • The test subjects were the majority of youth, family, and friends that worked on the mellow project since 2015. 
  • During the testing sections, we used a moderated usability testing method where we could get live feedback from users in the different stages of the design phase
  • The usability testing sessions remarked the openness of the users and their input in regards to the overall design experience. 
  • The recurrent design changes focus on navigation, location of buttons, emoji carousel, among others.
  • Among the challenges this project had, the most critical part was the written changes the My Plan section. The team reached to the Peel service collaborative to ensure the correct professional health language throughout the application.

Usability testing results Mellow App - BETA Version

Usability testing results Mellow App - BETA Version


In order to reinforce the feedback, during the testing sessions, we encourage the users to answer surveys that encompass the main section of the mellow app application and from there understand which section might need more work than others. 

The final screens in Sketch.

The final screens in Sketch.

UI Design

Once tested out all usability mistakes, the high fidelity design stage began 

As a group, we agree on a fresh flat design yet friendly that will encourage users to log in each time is need it.

  • In my option, the Daybook section is one of the best parts of the Mellow application! I was closely involved in all final design decisions on this section and users enjoyed having multiple options to express their feelings as well as have a practical tool to share with their health professional.  

Promo Video

To see other motion graphic videos used in different testing sessions  HCP Online  



Front End Development

Once tested out all usability mistakes, We started the final Minimal Viable Product development. 

I was in charge of the front- end development by coding each page of the web app using HTML + CSS and simple javascript code.


Three main learnings from this project 

  • The resilience of what real design process entails.  - We had many debates as a group pitching our own ideas. In the end, we learn to let go of what we thought was "best" and focus on the user, understand their insights and life experiences to come up with the best solution. 

  • Being critical of the apps from a usability perspective

  • How many close ones are facing mental health and other issues and how personal and real the project became for everyone on the team, not just end-users

For more information about Mellow visit

MVP ready
cups of coffee