Every Teen Seen | Case Study
UI/Visual Design iOS App
Since 2007 Utah youth suicides have tripled, from 3 per 100k to 8.5 per 100k, a drastic increase not seen anywhere else.
When I first started researching this epidemic, I was heartbroken to hear the stats here in Utah. Why are teens feeling like they have no other choice? When Every Teen Seen (ETS), a non-profit organization focused on teen suicide prevention, approached us with an app idea I was happy to help.
ETS’ mission is to eradicate teen suicide in their communities through awareness, fun, education, and empowerment. The goal was to design an events app that helps struggling teens join this new community of supporters.
They had a developer who started building the app interface, but they needed our help designing something beautiful. I was apart of the design team for this project.
Our developer needed help with the visual design and with the overall interactions of the product. The app looked and felt very basic. He had the functionality ETS wanted but the layout, visuals, and overall feel of the app needed improvement.
The logo was edgy and distressed which is the opposite of what a suicidal teen needs. Also, the login paths are confusing. What does Join The Cause mean? What does Lead The Cause mean? I will address these later.
Below is an example of the original interface.
Research
ETS needed a final design in 3 weeks, so we broke the project up into 3 sprints and we tackled it with a lean UX approach. Normally I would start conducting interviews but our limited timeframe prevented me from doing so.
I began with online research to wrap my head around the teen suicide epidemic that Utah was facing. I found a few resources in Utah that teens can use to reach out to someone to talk to or to report something anonymously. Some of these would be included in the resources section of our app. My online research led me to the University of Utah Neuropsychiatric Institute where I learned:
Teens don’t feel comfortable talking about suicide to adults
This led me to assume hotlines are inefficient. Due to these findings, we know our users need to feel comfortable using our app.
Design
Our team did a great job collaborating throughout the project, so I had a part in most screens. My main focus for this project was to design the profile page, donate now page, and the flow of how a user becomes an admin.
The features of this app were determined by ETS and include:
- Events page with the ability to RSVP
- Resources page with useful information for teens to get help anonymously if they need to.
- Profile page which allows users to see the events they’ve RSVP’d. This page also allows admins to see what you’re interested in so they could build events around common interests.
- Admin’s view. Admins can view others profiles as well as create events for users to attend.
- Donate now feature. This would allow parents to donate to Every Teen Seen.
Admin access
ETS has specific users that are influential in teens lives. These users mainly consist of teens that hold a position at their school, adults, or counselors but if anyone is influential in this community they can contact ETS to become an admin. These users are then given an admin password so they can create events to help bring teens together.
The method ETS was using for admin access was cumbersome and confusing. For an admin to login each time, they would need to enter their login details as well as the ETS admin password. However, the majority of their users weren’t going to be admins but they could still see the admin login during their login process. This wasn’t acceptable; my goal is to make this process easier for admins. If admins don’t want to use the app then the app dies, because it is built off the events that they create.
To achieve this goal I did these 3 things:
- I designed the login page so everyone signed in exactly the same way, using their email address and password.
- Next, I created an activation flow instead of requiring the user to type the admin password each time. This flow started on the users’ profile page.
- Since most users wouldn’t activate an admin account, I kept the link small and near the bottom of the edit profile screen. Once a new admin activated their account, they could start creating events for users to attend. They would only need to do this once, removing the frustration caused by entering that password every time.
When I showed this flow to our developer, he was so relieved because he was getting tired of typing in the admin password every time he wanted to look at his app. Success!
Profile
ETS didn’t want this app to be a social media app. You can’t follow anyone or have friends within this app. It is mainly used by an admin to see what interests you have so they can tailor events to your interests. So the profile page was going to be pretty simple.
I designed it so the user could see the events they’ve RSVP’d to and to add or change their interests.
At the moment, admins will have to go to each individual profile to see the users interests. ETS wanted to get the MVP out first and then revisit this limitation. If they were to contract me for the next stage I would create a page where admins could see specific interests from users within a certain radius. This would allow them to quickly get an idea of what kind of event they want to create.
Tagline and Onboarding
Based on some of our initial assumptions, the app needed to be friendly but also serious in nature. Opposite of the initial interface. Our users needed to feel part of a community. We needed to empathize with our users and convey that help is available. So we came up with a tagline that we all loved. It was inviting and creates a feeling of trust.
You’re Seen, You’re Heard, You’re Not Alone.
We also used this tagline as part of the onboarding process. We knew this would have an impact and we wanted it to be the first thing the user saw. We chose to use an automatic carousel that would cycle through different images with this tagline displayed.
Another assumption was that teens may be reluctant to provide their personal data if they’re scared to talk about their suicidal thoughts. So, we gave the user the option to skip the login/signup page. This allows the user to see what the community was doing, and see how ETS may benefit them. After all, this app is about suicide prevention, so we don’t want to give the user any reason not get the help they need. However, if they want to RSVP to an event, an account would need to be created.
Presentation
At this point in the project, we had a total of 2 weeks before presenting our design to the developer and the CEO of Every Teen Seen. We used every last minute of that time to create a polished and feasible design. This was the first time I have presented any work to a CEO or developer, and I was nervous, to say the least. I was relieved to see how excited he was about the work we have done. We brought his imagination to a reality. He was excited to get the app developed and in the app store.
After presenting to the CEO it was time to go through every design aspect with the developer. For the most part, it went smoothly with just a few tweaks on the design and explanation of how things functioned. During our meeting, our developer mentioned the need for a donate page.
Donation page
ETS’ goal was to have a page where users could easily donate to the cause. ETS relies on these donations to continue creating events and spreading awareness for suicide prevention.
They didn’t have PayPal integration at the time so they could only take payments via credit/debit cards.
As I was creating this page, I realized that users had to input a lot of information and it seemed overwhelming. This could deter users from donating. I decided to ask a few colleagues what they thought. They validated my suspicion that everything on the page blended together and was overwhelming. I decided to divide the page into three sections. One for the donation amount, one for the name & address, and one for the payment. I tested this again and my colleagues were able to consume this data easier. They mentioned that the visual hierarchy was easier to understand now.
One challenging aspect of this page was creating the error states. It was difficult to anticipate all possible scenarios. This was important because I needed the user to quickly understand the error reason. It’s also important to write copy that doesn’t make the user feel like they made a mistake or that they’re stupid, this could create a poor experience and deter someone from donating.
Developer communication
We sent these changes to our developer as he was updating the first version of the app. This is when I realized communication is key. There were issues with the visual aspects. our developer used different font sizes in specific areas, changing the visual hierarchy of the information. The spacing was too tight in some places, and some of the components were missing the correct shadows. We set up another meeting with him and explained every detail to make sure he understood the reasoning behind the small details of our design. Once he understood why we designed the app the way we did, he paid closer attention to the details of our design. I think the biggest takeaway from this is that everyone thinks differently. Some details I add to a design may be overlooked if I don’t point it out.
The last thing that the developer needed was a quick splash screen and app icon. The splash screen needs to be a basic design that a user can consume in a second. It’s required to show this screen while the app is launching. I designed a screen that was consistent with our app. It had a gradient that we’ve used across the app as well as the new logo we created. The app icon was very similar. An easily recognizable logo for ETS and a bright gradient background that pops on your home screen.
Retrospective
It was exciting seeing this app come together from start to finish. This was the first project I was a part of that created an actual product distributed to the public. It was great seeing the transformation of the app from what ETS had, to what we created.
I was also excited to work on this project because it would make a difference in peoples lives. It still breaks my heart knowing that there are children out there that think suicide is their only option. If my design helps to save one teen’s life — that would my greatest success.
It was so fun being apart of this process with Every Teen Seen. They are doing something great and I can’t wait to see their progress and how they affect the community around them. You can find this app in the app store go check it out!
Lessons Learned
Make sure you are very thorough when handing a design to a developer. They may miss something that you believe is very important. I found a tool called Zeplin after this project ended. Zeplin allows me to upload my design from Sketch, and a developer can see every detail I made very easily. Checking spacing between elements, font sizing, shadow properties, etc. It’s built specifically to efficiently hand a design off to a developer.
Communicate often. My developer was very active in our Slack channel. If I had any questions about the company or what he needed he would get back to me very quickly. This helped me design efficiently.
Thanks for reading! If you like it, clap away! If you want to talk further, connect with me on LinkedIn or go visit my portfolio page at nathanmaus.co.
