Healer is an app designed to be a support system for young gamers who want to learn how to protect themselves from online sexual exploitation. Healer offers support and information to console and advise both victims and non-victims alike to ensure that these young gamers get the attention they need.
Sept - Dec 2021
UX/UI Designer, UX Researcher, UX Writer
The design process that I focused on for this project was the Double Diamond Design Model. It consists of 4 main phases which are:
The gaming industry continues to experience significant growth, especially in the past few years. However, not many measures or efforts have been developed to protect young gamers from online predators. The lack of developments has led to a 49.15% increase in reported cases of online sexual exploitation such as grooming, with young gamers in the age range of 12-15 years old contributing to over 50% of the cases.
As a casual gamer myself, it disheartened me to consistently see articles and news about victims of online exploitation. To make matters worse, most of these victims were really young and usually just playing multiplayer video games to have a good time. These predators are also difficult to catch and action is usually taken after the damage has already been done. This got me thinking about why there weren't any significant efforts in developing measures or solutions to prevent cases of online exploitation in the first place.
After conducting secondary research, I found some quantitative and qualitative data surrounding the problem space that indicated the problem was real.
On average, there are 500,000 predators online daily lurking in game lobbies and chats for potential victims.
Gaming culture itself imposes roadblocks to preventative measures. This is a major reason why video game developers haven't made any big changes.
The average age of victims of online sexual exploitation is only 14 years old. As stated earlier, the age of the most vulnerable group is only 12-15 years old.
I believe that the current support systems that exist in video games are not properly equipped to deal with cases of online sexual exploitation, let alone prevent these cases from occurring or developing in the first place. This leads to online predators having very easy access to a "hunting ground" without fear of any repercussions, which in turn breeds the potential for increased predatory behaviours.
To confirm my hypothesis, I will conduct user interviews to gather feedback from the participants about their thoughts and feelings of the current state of support systems in the video game industry.
To gather more insights to further validate this problem space, I conducted user interviews with individuals that considered themselves to be gamers or have had experience with videos games in the past. These criteria enabled me to interview and gather insights about the gaming culture, leading up to 3 major themes surrounding the problem space:
The key theme that I chose to focus on was underdeveloped support systems as this aligned with the problem space that I was exploring. Support systems are also the main point of contact for young gamers to receive help online. Outdated or underdeveloped support systems have a direct impact on young gamers' access to proper attention when they need it the most. Without timely and effective support, young gamers can become victims of online exploitation and suffer negative emotional and social impacts in their daily lives.
With all the research and insights gathered about the problem space, I formulated a How Might We question as a guideline for ideation:
How might we educate and support young gamers in the digital space to ensure they are not exploited online?
Meet Jenny, a persona that was created to represent Healer's target audience and their goals, motivations, behaviours and pain points based on the research gathered to better understand the target audience.
After the development of a persona, an experience map could now be created to detail Jenny's journey as she encounters the problem. In doing so, opportunities for a potential solution will become more apparent and identifiable. Upon analyzing Jenny's journey and her emotions as she experiences the problem; some opportunities for intervention can be identified:
Task Flow Diagram
In order to develop a Task Flow diagram, I first created a collection of user stories to better define and design concepts that would address the target audiences' needs. User stories help designers deliver value to the user by focusing on the tasks that the target audience will want to complete while using the app. Once created, the user stories can then be grouped by themes or functionality into an epic. Epics validate the need for certain features to be included in the app. For this project, the following epic and user story were selected as the core task that this project would focus on.
Strong Support Systems
From the selected epic and user story, the task derived is to receive real-time support and advice from support. A task flow diagram can now be created to provide a visual representation of how our persona will be interacting with the app.
I explored different layouts and potential directions that the app could go through concept sketching on paper. Various components such as the bottom navigation bar, navigation bar contents, modals and cards were drawn on paper to better understand how these elements would be incorporated into the app to provide a seamless experience for our target user. Some key areas that I wanted to focus on in order to bring value to the user were:
After selecting certain concepts or solutions from the paper sketches to build on, I moved into Figma to translate what I had on paper into wireframes. By creating mid-fidelity wireframes, I was able to get a better grasp of how those paper sketches would look, as an actual product. There are differences between the paper sketches and wireframes as I made changes or merged certain elements during the wireframing process in order to bring more value to the user.
User Test - Session 1
Once the initial mid-fidelity prototype was completed, I prepared a user testing script to gather feedback and observe how real users would interact with the app. For this project, I planned to conduct 2 user testing sessions consisting of 5 users each. These user test sessions would occur over Zoom with users sharing their screen as they interacted with Healer to complete a set of predetermined tasks.
The first user test session revealed that there were some points of confusion that testers encountered, which detracted from their overall experience. Some feedback and insights that I was able to gather were:
With a number of issues identified from the user test session, I proceeded to plot them in a design prioritization matrix to determine which issues I should focus on.
I decided to focus on issues 1, 3, 4 and 5 as they were relatively lower effort solutions that would have a moderate to high impact on the experience of the user.
Revised Wireframes - Session 1
Revisions for the next iteration of wireframes were made based on the feedback and insights gathered from the user testing session.
On the Home Screen:
On the Chat Screen:
User Test - Session 2
After making revisions to the initial wireframes and completing a revised prototype, I proceeded with user testing session 2 to continue gathering feedback and insights for another iteration to fine-tune the overall experience and feel. 4 of the 5 users from session 1 were re-tested with the revised prototype, while the last user was completely new and had not seen the app before. Again, all the user tests were conducted like in session 1, over Zoom with the user sharing their screen as they interacted with the app.
This user test session went smoother in terms of the fundamental features of the app, as is shown in the user testing results. One issue that I encountered during this process was that the previous users from session 1 tended to give more feedback on the visual elements of the app over the features and functionality. The new user that participated in the user testing was able to navigate the app without issues; however, they provided important feedback regarding the feel and focus of the point feature:
Not as many issues were made apparent during user test session 2 and a majority of the feedback provided was related to the visual elements of the app. There were 3 key areas of improvement that were observed through session 2 of user testing.
For the next iteration of wireframes and prototype, I chose to focus on issues 1 and 3 as the impact of the changes would be quite high and would only require moderate effort. Issue 2 would be improved on during the high-fidelity phase of development since including more visual elements and colours would be distracting in the grayscale mid-fidelity wireframes as the focus here would be on features and functionality
Revised Wireframes - Session 2
Revisions were made to the second iteration of the initial prototype and wireframes, with changes that were mostly focused on visual aspects. A major change in this iteration is the refocusing of the copy from "points and redemption," to the user.
On the Home Screen:
On the Post-Session screen:
"Final" Revised Wireframes
For the purposes of this project, the third iteration will be considered the "final" revised prototype. Under normal circumstances, I would like to conduct another user testing session to gather more feedback and insights as some noticeable changes were made in this revision.
Now that a final prototype has been developed for Healer, the next step is to develop the brand through the curation of a UI inspiration board as well as a moodboard. These two sources of inspiration are similar in the sense that they are both arrangements of design examples or images and visuals that create a makeshift guideline for developing the brand. UI inspiration boards focus more on the design of features and the functionality of the product, while moodboards focus more on the ambiance by evoking certain moods and emotions.
I wanted the mood of Healer to be really supportive, secure, cool and modern while also inspiring growth and learning. To achieve this feel, I curated several images that represent these values, while also being relatable to the target audience through similarities with the gamer culture and style.
To get a better understanding of the direction that I would take Healer in, I also curated a UI inspiration board detailing different styles for components that were present in the app.
As mentioned earlier, I wanted Healer to be cool, modern and relatable to young gamers in the gaming community to build a connection before they even use the app. To do this I extracted colours from the moodboard and selected the ones that were common in the gamer aesthetic, which consisted of black/off-black with neon colours. From the colours, I selected #303030 (off-black) to be the primary colour of the brand to reflect the darker aesthetic that was prevalent in gaming culture. #26C6E5 (Cyan) would be the secondary colour of the brand as it was a common colour that accompanied the off-black, while also bearing similarities to certain big names in the industry like Fortnite. #FFFFFF (white) and #474F8B (blue-purple) were selected as accent colours to provide contrast and highlight certain features throughout the app.
Healer only uses 2 fonts, one of which, is Roboto as it is used in Android-specific elements such as modals. The vast majority of the app content uses Poppins. I chose Poppins as the main font for the app due to it being sans-serif to create a more casual vibe in the app. Poppins is also very curvaceous and geometric, making it much easier to read and giving it a friendlier feel. I wanted the app to feel less serious and professional, and more casual and friendly as the target audience consists of young gamers. An overall professional and serious vibe may make the experience too heavy for young gamers, discouraging them from continuous use.
I chose the name Healer to represent the brand to build a connection with young gamers through the use of common terminology. There is also a meaning behind Healer; in video games, healers are always considered a "support class/role" that is usually vital to keeping the team alive. This was similar to the goal of the app, which was to support young gamers and help them defend themselves online.
I wanted to create a wordmark that would be easily recognizable by the target audience of Healer so gathered inspiration from popular games among the gaming community. From the inspiration gathered, I narrowed down the selection to focus on Fortnite and Rocket League. These 2 games are particularly popular among the community and are easily recognizable by their wordmark/logo.
At first, sketches of potential wordmark styles were made on paper; however, as the wordmark featured block-styled letters, I found it more efficient to design the wordmark on Figma. This would prove to be a better visualization of the designs I had in mind.
The first step in developing a wordmark was to decide which font style would best represent the brand. The initial selection of fonts consisted of Amaranth, Helvetica Neue, Proxon, Proxima Nova, and Verdana. I also experimented with the letter case and different weights for each font. Of the 5 fonts, the wordmarks were narrowed down to 2 fonts, Helvetica Neue and Verdana. These fonts were selected as the letterforms were similar to Fortnite and Rocket League's wordmark and logo. After some consideration, Verdana with bolding was chosen as the font of choice as the letterforms were more consistent with a technological and modern feel.
Next, modifications were made to the letterforms to better represent the aesthetic that the brand was trying to convey.
These modifications were made to create a friendlier feel and escape the formal professionalism the font originally had. I chose to keep the wordmark as the logo as well, similar to Fortnite. This was to keep the focus on the word "Healer" as it was a representation of what the app means for young gamers.
Finally, with a final wordmark stylized, I proceeded with accessibility testing by putting a white wordmark with a black background and vice-versa to ensure the wordmark was completely visible. This was repeated for the other brand colours, which were then narrowed down to #303030 (off-black) and #474F8B (blue-purple). The final wordmark selected was the #303030 variation as it would be a better fit for the gamer aesthetic and feel of the app.
With the overall branding complete for Healer, it was now time to begin injecting colour and visual elements into the app. Some key factors that were considered during the process:
With the high-fidelity prototype complete, I designed a marketing website for both desktop and mobile (responsive) to increase brand exposure so that Healer can reach its target audience around the world. While developing this website prototype I kept in mind the colours that were already established earlier so that the website would be consistent with the brand. Some other considerations I had while designing the website:
For this challenge, I visualized and developed the home screen for a tablet device, in this case, the iPad 11 Pro. I chose to design for tablets as many young gamers not only play video games from their consoles (e.g. Nintendo Switch) but mobile phones and tablets as well. This has been especially true with the significant advancements in technology in recent years. With so many devices that young gamers use to play video games, it only makes sense to design for the devices that Healer's target audience uses.
The layout of the home screen is essentially the same as the mobile app, with some minor differences:
With further development, Healer could potentially be a grand ecosystem integrated with various devices to better target young teens in an environment where technology is constantly evolving to ensure that help is always accessible.
Tarot Cards of Tech
Tarot Cards of Tech is a set of prompts that are designed to help designers and creators think about the future and the impacts of technology. These prompts will help designers and creators discover unintended consequences and potential opportunities to create change. For this project, I will explore and contemplate about 2 Tarot Cards of Tech: The Radio Star and The Big Bad Wolf.
If Healer is successful, there may be less of a need for young gamers to depend on game support for predatory cases, especially if they aren't specialized in dealing with the online sexual exploitation of young gamers. This is due to current support systems providing very general services that relate to the video game itself such as bugs and relevant inquiries, usually with quite a delay.
Success would also benefit institutions that hunt these predators or provide attention to victims. This is due to the nature of the app, which is to prevent cases from occurring in the first place. This would help alleviate some of the pressure that these institutions face.
The most vulnerable area to manipulation would be the forums that are a part of the Healer community. If a "bad actor" had ill intentions and access to the app, they could share false information or even use the forums to lure potential victims. However, in a way, Healer has a built-in defense through the educational information and tips that are not influenced by bad actors. With exposure to this content, young gamers are less susceptible to predatory tactics.
Some measures that Healer could implement to combat these potential situations is to have scheduled checks of the forum or any suspicious accounts. This may be done through an algorithm in combination with a trained team that can monitor the actions behind the scenes to determine if there is any ill intention.
Now that a complete high-fidelity prototype has been completed along with the branding and marketing of the app, the next steps of the process would be focused on reaching a state where the app can be officially launched.
Connect with me