Healer
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.
Project Type
Academic (Capstone)
Sept - Dec 2021
Timeline
10 Weeks
Role
UX/UI Designer, UX Researcher, UX Writer
Tools
Figma, InVision
Design Process
The design process that I focused on for this project was the Double Diamond Design Model. It consists of 4 main phases which are:
- Discover: Understand the problem space through research and insights gathered from interviews
- Define: Define the scope of the challenge through insights and research gathered from the Discover phase
- Develop: Gather inspiration and develop concepts of potential digital solutions
- Deliver: Conduct user testing and iterate based on feedback
Discover Phase
Problem Space
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.
Discovery
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.
Secondary Research
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.
Hypothesis
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.
Primary Research
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:
Key Theme
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.
HMW Question
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?
Define Phase
Persona
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.
Experience Map
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:
- Provide a platform for Jenny and other young gamers to gather information in order to understand and better defend themselves online.
- The same platform can provide emotional and specialized support to help victims cope with their experiences.
- A platform for Jenny and other young gamers to talk about their experiences without fear of judgment.
Develop Phase
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.
Epic
Strong Support Systems
User Story
As a young gamer, I want to have a strong support system available that I can rely on so that I can be confident that I'll have someone behind me to teach and support me when I am confronted by an online predator.
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.
Paper Sketches
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:
- The ability for the user to contact and receive support in real-time as they are encountering a predatory situation
- Accessibility of information that the user can use to recognize predatory situations and avoid them completely
- An affirming or incentivizing post-session to motivate users to continue using the app
Home Screen and Navigation Bar
Channel Selection and Modal
Communication and Post-Session
Mid-Fidelity Wireframes
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.
Design Decisions
- A card carousel where Jenny will find the daily tasks that she can complete for points. Shown on the home screen to remind Jenny about what she can do to continue learning.
- A Support FAB (Floating Action Button) that stands out to get Jenny's attention so she will recognize where to tap when she needs help.
- Once tapped, the Support FAB becomes inactive as Jenny is already in the support flow.
- Options for the type of channel that Jenny would like to use to communicate with the support team. The Live chat button is larger as I predicted it will be the most commonly used due to the nature of the problem and the fears of the target audience.
- An incentive to encourage Jenny to continue using the app to learn and earn points that she can use to redeem for rewards.
- Categories for rewards that Jenny can redeem when has enough points. Similar to the post-session hero banner, this serves as motivation for Jenny to continue using the app.
- Articles and cases about online exploitation that Jenny can tap on and read to better defend herself in the digital space.
Deliver Phase
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:
- Users were confused why there were "points" until post-session
- There was confusion between certain CTAs as they were ambiguous (such as Report vs. Support)
- Some users assumed Report meant reporting the incident and contacting support
- Some visual elements looked out of place
- Users had difficulty reading some screens due to small font and insufficient padding
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.
- Confusion around Home Screen buttons and cards
- Additional visual elements throughout the app
- Confusion around the concept of "points"
- Additional elements to guide and provide more understanding of functions
- Confirmation after pressing Done during a support session
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:
- The copy on the home page as adjusted to give more context regarding the earning of points and redemption
- The Report and Cases buttons were removed to balance out the home screen and reduce confusion as to where users should go when they are seeking support.
- Subheadings were added to categorize certain elements so that users have a better understanding of their functionality. This change is applied throughout the entirety of the app.
On the Chat Screen:
- The font for all messages was increased as well as the padding for the chat bubbles to increase the overall visibility of messages.
- The message input was adjusted to now span the entirety of the screen and additional features such as attachments and images were added.
- The on-screen keyboard now covers the bottom navigation when it slides out to prevent accidental tapping of the navigation contents.
- In addition, a confirmation modal was added whenever a user taps "Done" during the session to avoid any issues with accidental taps.
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:
- They felt there was too much focus on the ability to earn points as well as redemption
- The user stated they would want to be the focus as a victim; the points were nice to have but negatively affects the experience of a victimized user
- The user stated they would want to be the focus as a victim; the points were nice to have but negatively affects the experience of a victimized user
- The user also felt the copy on the post-session banner was too focused on points and rewards
- Instead, the copy can be more assuring and affirming that the user has made the right choice to come to Healer for support
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.
- More efficient use of spacing to avoid too little or too much white space throughout the app
- Additional visual elements throughout the app
- Shift the emphasis from earning points and redemption to focusing more on the user and their situation
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:
- The ability to earn points while using this app has been removed and as such, the copy has been adjusted accordingly. Users are now able to earn achievements while using the app and are able to see them on their profile page. This feature is not currently prototyped for this project; however, it is a planned feature to include if I were to continue developing this app.
- The card carousel has been adjusted according to the removal of the points feature. The copy has also been changed to be more supportive of the user.
- Spacing has been optimized to better use the white space available.
On the Post-Session screen:
- The copy on the hero banner has been adjusted for the removal of points. The post-session copy is now more affirming of the user to reassure that seeking support was the right thing to do. An achievement has also been added to the hero banner to further encourage the user in place of the point system.
- With the removal of the points system, the redemption section has been replaced with a carousel of articles or tips that the user can view and learn from to have a better understanding of how to defend themselves online.
- Although the points system has been removed, users are still able to redeem for in-app items through the achievement system. Achievements can unlock sets of items that they can use to customize their app, such as profile/user flairs that can be seen when the user is confident and decide to get involved with the forums. This is a planned feature for the future if development were to continue post-project.
"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.
Visual Identity
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.
Colour
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.
Typography
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.
Wordmark
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.
- Spacing was tightened up between each letterform
- The overall shape of the wordmark was adjusted to be more asymmetrical
- Straight lines throughout the wordmark were slanted to create more edges and accentuate the asymmetrical feel
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.
High-Fidelity Prototype
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:
- How to inject colour to build the gamer aesthetic
- Ensuring the colours and contents of the app are accessible
- Formatting the layout of images and visuals
- How to ensure that the target audience will not be overwhelmed
Marketing Website
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:
- Contrast to shift and adjust the feel and focus of sections
- Minimalistic design (easier to retain the attention of young gamers while providing sufficient information about the app)
- How to convey the feelings and outcomes of using Healer
- How to best display the selling points of the app
Multi-Platform Challenge
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:
- Due to the iPad's increase in screen size, the daily tasks are no longer a carousel
- Components such as cards and buttons have been resized
- The bottom navigation has been adjusted and resized to use the available screen space more efficiently
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.
Conclusion
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.
Key Learnings
Next Steps
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.
- Develop the rest of the app: Both the app and marketing website will need to be fully developed to prepare for an official launch.
- Continue user testing: User testing sessions need to be conducted for the completed prototype and marketing website to gather final thoughts and feedback before launch to iterate and improve the overall experience.
- Launch: Once the previous steps have been completed, it is now possible to launch the app. Once the app has launched, continuous monitoring of usage and feedback will be required in order to improve the app over time.