Brisbane Youth Service Communication App for At-Risk Youth

Designing Communication Apps for at-risk young people

In 2018, I was a part of the Random Hacks of Kindness Hackathon and worked with one of the changemaker teams, Brisbane Youth Service. I helped design a new mobile app that they could use to engage with at-risk youth throughout the city. This project delivered a complete interactive prototype using Adobe XD that simulated the user experience by the conclusion of the 2 day hackathon.

Company Profile

Brisbane Youth Service is a Not For Profit organisation working with vulnerable and disadvantaged young people throughout Brisbane to secure housing, support mental health and provide access pathways to education and employment.

Design Problem

During the 2018 Random Hacks of Kindness Hackathon (RHOK), I worked alongside Brisbane Youth Service to plan and design a digital product that supported and engaged with young people in Brisbane. They required a better means for communicating with at-risk youth who needed support.

  • Brisbane Youth Service did not have a dedicated communication tool. At the time, they relied only on:
  • Email, which was not a preferred communication style for youth
  • SMS, which resulted in lost or disjointed communication when at-risk youth could not afford to maintain a phone number account

Design Problem

Bridging Communication with Disengaged Communities

Brisbane Youth Service were one of the change makers at the 2018 Random Hacks of Kindness Hackathon

They brought with them the problem that they support team struggled to break through in communicating with at-risk youth and maintaining connection and building trust.

The requirements of the solution needed to be a product that would engage with young people and offer a virtual experience that would garner trust.

Design Solution

I helped deliver Brisbane Youth Service an MVP prototype for a new communication app that connected at-risk youth with a team member from Brisbane Youth Service. The app’s goal was to be a hub, providing a range of digital tools and services. The design was intentionally scalable so that new features could be added in future without necessitating a complete redesign.

The core feature of the app was peer-to-peer (P2P) communication between at-risk youth (the user) and a member of the Brisbane Youth Service team. Additional features included news updates, push notifications, an integrated appointment manager and links to helpful resources.

To better engage and interact with the severely withdrawn audience, I designed a premium look and feel for the app, with cues taken from the Apple Watch UI’s bubble theme. This follows design theories that suggest echoing design themes of known premium products would encourage users to engage with the app.

Design Solution

Delivering an MVP Prototype

At the conclusion of the 2 day hackathon, our team delivered an MVP prototype for a new communication app that would also act as a digital hub for resources and support that Brisbane Youth Service offered.

Delivering the prototype would assist Brisbane Youth Service in demonstrating the features of the app to stakeholders, investors and developers so that the product could be advanced further.

Design Process

User Research

Brisbane Youth Service had conducted initial user research that highlighted several key pain points and insights from their target audience. This enabled me to plan and design the product to address these key gaps in the service offering.

Design Inspiration and Research

Research was conducted into the fundamental features of chat based applications. One insight I drew was the importance of personal expression in communication was paramount. People using these apps do not just use text to communicate. Apps such as Facebook Messenger, Slack, WhatsApp and others utilise a wide range of methods two people can communicate together. These include, image, video, audio recordings, animated Gifs and emojis.

I sought to embed this research into the design of the app and create a tailored method of communication unique to the contexts and needs of at-risk youth. The default keyboard component was adapted with the addition of an “emotion keyboard” where a user could choose a mood or emotion they were feeling and add this to the chat conversation. This would be similar to setting a status update on Slack and Facebook.

The design hypothesis was that by offering this alternative form of communication, engagement would be increased with an increasingly disengaged audience. The research led me to believe that the “emotion keyboard” offered a creative, visual and simple form of expression that would connect with at-risk youth.

Personalisation was also a key aspect of the user experience that needed to be fostered within the app. This led to creating a Custom Emoji Maker that could be used to further personalise communication. Creating a digital avatar, modifying predefined features (eye colour, hair colour, skin tone etc) was a means to foster greater connection between the user and the app by representing the user via a form of virtual self-image within the digital experience.

The choice was made to use a dark-theme UI style to improve visibility at night as the research indicated that this would be when users would be more likely to use the app. It also would make the app appear less generic and build greater value and meaning towards it.

Wireframes and Prototypes

To visualise the design of the app, Adobe Illustrator was used to design initial concepts and screens for the app. The design team was made up of three UI designers collaborating together on this stage of the project. This allowed for a form of rapid prototyping and testing of different design artefacts that could be quickly refined using the Iterative Design Process to resolve the UI designs.

Once the static screens were created, they were imported into Adobe XD to add an interactive layer so that we could create a prototype. The interactive prototype was then used to conduct user testing with other attendees at the hackathon. The design was refined based on the findings of the user testing.

Design Process

Project Design Process

Iterative Design Process

We used an iterative design process to design and refine concepts into prototypes.

We ran user testing with other hackathon teams to evaluate various features and aspects of the design

Design Inspiration

Communication Apps such as Messenger, Slack and Whatsapp were examined to determine key features of popular communication apps.

Research indicated that a key feature of these apps were the range of communication methods:

  • Text/Written
  • Emoji
  • Animated Gif
  • Picture / Video
  • Audio Recording

The design theming took inspiration from premium ui designs. We used Dribble and Pinterest to source design inspiration

Outcome

At the conclusion of the two day hackathon, we delivered an interactive prototype to the Brisbane Youth Team. This proof of concept demonstrated the visual UI as well as an interactive preview of some of the features and functionality we intended for the app. The deliverable could be used as a tool to demo to the BYE team, developers as well as the final presentation at the conclusion of the hackathon.

Related Case Studies