UX & UI Design, Branding, Advertising

App Design

This project is divided into 2 parts; mobile app design and branding/advertising.

You are currently viewing:

Anocate is a unique social network/messaging app for people struggling with addiction and substance abuse. This app lets users connect with others going through similar struggles within their community. Anocate prioritizes anonymity, with features such as auto deleting messages and hiding aspects of the user’s profile. The goal was to create an easier way for members to communicate with each other through support groups, without worrying about giving away personal information.


A large majority of young adults are abusing substances. It’s an issue that damages people physically and mentally. Young adults need a way to access support and guidance, since overcoming an addiction is very challenging on its own.


I had to come up with a solution for a part of Sustainable Development Goal #3: substance use/abuse. My task was to perform research on the goal and target audience, then to design an app that would become a solution to this problem.

Stage 1: Research

The first thing I had to do was conduct research on Sustainable Development Goal #3. In order to accurately come up with a solution to this goal, I needed to fully understand what SDGs are, and who they would effect. After researching more about the chosen SDG, I needed to learn about the target audience and their interests, behaviours/characteristics and struggles.

What are SDGs?

The Sustainable Development Goals (SDGs), are essentially milestones which act as a call to action to end poverty, protect the planet and ensure that all people enjoy peace and prosperity by 2030.

Out of the 17 total SDG goals, I chose to help solve goal #3; good health and well-being. This goal attempts to increase the overall health and wellness of people worldwide.

This project is centred around combating substance use & abuse.

Target Audience

The primary target audience would consist of young adults. This is because out of any age group, people aged 18 - 24 are the most prone for substance use and abuse. It is more common for people aged in their mid/late 20’s to use illegal drugs as well to overdose on drugs, drink and drive, use prescription drugs, etc.

Through research, I discovered that:

  • A large amount of people in this age group are interested in technology, alcohol and other substances.
  • Young adults tend to be moody, emotional and a bit rebellious.
  • Young adults are also self-aware and self-conscious.
  • Almost 70% of young adults suffer from anxiety and depression.

User Personas

I developed user personas based on my background research. These personas were made to represent the typical users of this new app. They outline the user’s personality, needs and frustrations.

Defining the Problem Statement

Based on my background research, I analyzed the main pain-points and how the app could become an effective solution to these problems. This is the statement I ended up with:

"Young adults need a way to anonymously access support groups, because they are struggling to overcome substance abuse on their own."

Competitor Analysis

Before diving into ideation and sketching, I conducted a competitor analysis on 3 existing sobriety apps. This was important because I needed to identify, analyze and compare how effective their solutions are at solving SDG goal #3. The analysis allowed me to draw inspiration from successful solutions, as well as to learn from and improve on their shortcomings.

Stage 2: Design

After completing my research, comparing existing solutions and figuring out user pain points, it was finally time to start designing. I started with brainstorming ideas on paper, which eventually lead to my first sitemap. Before sketching the app, I needed to know how the app’s task would flow.

Ideation: Sitemap

The site map above lists the user flow of 8 main tasks: Sign in, sign up, search/join group, select & join group, search a friend, edit profile, write/send a message & create a group. Once I finalized the site map, I could now move on to transforming these tasks into a low-fidelity prototype.

Paper Prototype

After creating the site map, it was time for me to start sketching my ideas and creating a paper prototype. I sketched out each individual screen for each of the main tasks. After finishing the prototype, I needed to conduct some user testing.

User Testing: Paper Prototype

I asked 5 of my fellow classmates to test my paper prototype, and I recorded their feedback. User testing is a very important part of developing an app; it allowed me to see the pain points in the prototype and user flow. Seeing the pain points then allowed me to make improvements, so that the next prototype will flow better.

I asked each of my classmates to perform the 8 tasks outlined in the site map:


The main cause of friction in the prototype was the iconography. This is simply because a lot of the icons are very similar to each other, which could confuse the user. Another cause of friction was the lack of confirmations on certain tasks. When a message has been sent or a friend has been added, it is important to let the user know that those tasks have been completed. Overall, Iconography and confirmations would be the biggest causes of friction for my prototype.


Mainly, to improve the iconography on the toolbar. The icons will be designed to look more different and obvious to their related tasks. The icons could perhaps have labels underneath so that users can know exactly what clicking on each icon will allow them to do. The next iteration of the app will also have more confirmations of tasks. There will be more pop up windows that will notify users when a task has been completed, or when something in the app has or is about to change.

Interactive Prototype

I took the feedback received from the paper prototype into consideration and created a new, high-fidelity prototype. I changed a couple of the icons to make them more identifiable. Again, I conducted some more user testing, just incase there were any more problems for me to iron out.

User Testing: Interactive Prototype

I asked 5 different classmates to test new prototype. Again, I analyzed their performance and recorded their feedback. This round of testing was to help me reach closer to my goal of having a polished, user-friendly solution to SDG goal #3.

The same 8 tasks as the paper prototype:


Still, the main cause of friction in the prototype was the iconography. Though the icons are a lot bolder and theoretically make sense, they are still very similar to each other. Therefore, some of the users still get confused and mixed up between the different icons. Besides that, this iteration of the app has greatly improved from the previous paper prototype. There are some minor confirmation issues, but overall, there is was less friction produced from this app.


Like last time, the main focus would improve the iconography on the toolbar. The icons will be designed to look drastically different and obvious to their related tasks. A solution to this problem is to have labels underneath the icons. This will let users understand what clicking on each icon will allow them to do. The remaining confirmation issues will also be fixed with pop up notifications and etc.

Old Icons

First Round

Second Round

Not very distinguishable. Especially without icon labels.

Stage 3: Refine

Redesigning and labeling icons was’t the only thing I did to improve this prototype. After testing the new prototype with multiple users, I got some feedback concerning privacy and security. This made sense since substance abuse is a sensitive topic that not everyone may be comfortable with sharing online. With this in mind, I developed new ideas that could better solve SDG number 3.

New Ideas

I decided to focus the app more on anonymity, support groups and user communication. This made the most sense to me because people can be sensitive about sharing very personal information online. I realized how important it is to earn the user’s trust so that they feel safe using your product.

Listed below are the new ideas I have implemented to the current app.

No Friends, No Posting Pictures

Because apps like Facebook & Instagram are so well established, I decided to get rid of the friends system and the ability to share photos. I wanted people to use this app specifically for sobriety support and anonymous communication. This also made the app more unique, and less like a Facebook clone.

No Personal Information Required

Substance abuse is such a sensitive topic, so it is best to make the users feel comfortable using the app. The only requirements for a user to create an account is a name and password (to keep the account secure). Any other information can be shown in the user’s bio.

Anonymous Profiles

By default, all profiles are now anonymous. This make the users feel a lot comfortable sharing personal information about themselves. The name and profile picture can be changed immediately, and the bio can be hidden away from others. This solution is a simple, but effective way to improve user privacy.

Auto Delete Messages/Posts

This feature allows users to automatically delete messages/groups posts within a set timeframe. Accessible through the settings menu, users can toggle on/off auto delete. From there, the user can set a time (from 30 min - 24 hours) before all messages get erased. This will ensure users that nothing they do on this app is permanent, and that their history is not being recorded.

Condensed Pages

Instead of having search groups, search people and create groups as separate pages, I condensed them to improve the app’s usability. 2 tabs have been added to the search page; one that allows users to search for groups and the other for people. On the groups page, users can now easily view posts from the groups they have joined, as well as to create a group on the same page.

Bright, Clean & Airy

The aim for the app’s design was to make it feel light and inviting. People struggling with an addiction may have a lot on their mind. So seeing an app that’s clear and easy to use would be appropriate. The app design incorporates lots of white space, clear new icons with labels and content organized in grid systems.

Ideation: New Sitemap

I reworked my original site map, and decided to combine some of the tasks into under the same page. For example, I decided to let users search for people and groups under the search page, instead of having a separate page fr searching for a group and for people. Condensing the tasks have made the app flow more natural; it also enables better app navigation, because it is more organized.

Final Design

The updated app flows a lot better (usability and visually speaking). Implementing the new ideas made the app feel more organic, and catered towards the target audience. The icons are also more clear, and icon labels have been added just incase the user does’t understand the meaning of the icons.

Loading Screen

Login Screen

Groups Newsfeed

Search: Groups

Search: People



Settings: Auto Delete


These fonts were chosen to reflect the brand Anocate, as well as to ensure high level legiblity to the app users. Arial Rounded fits the shape of the speech bubble icon; it also feels inviting and friendly. It's important to protray that feeling to the users, since they may already feel uncomfortable with the topc of substance abuse. Open Sans is a very accessible font that prioritizes readability. It looks professinal, and clean, which also refelcts the feel of the app.


Blue was chosen as Anocate's primary colour, because it is a trusting colour. The shades of blue being used are also lighter, which makes the brand feel more calm and inviting. The darker blue is used as contrast against the primary blue; it is primarily used for type. The app uses a third shade of blue, which is also the lightest shade of the 3 blues. This blue is used for text message bubbles, and highlights. The app also uses lots of white space, to create a sense of cleanliness. Finally, the gray is used for text and certain buttons/icons.


The new icons I designed are more unique to each other, which makes the more distinguishable for users. I also added the appropriate labels to avoid any confusion.

The Next Steps

This project was my first time designing a mobile app from the ground up using the proper UX methods. I’ve learned how important it is to do background research, so you can understand who to design for and why. Usability testing is also one of the most important parts of this journey, because with out feedback from actual users, the I would have no concrete way to improve the usability to satisfy user needs.

Now that the app has been finalized (for now), I have focused more on the branding aspects such as logo design, and ad campaigns. In the future, I would like to further test this prototype so that it can reach a stage where I wouldn’t have thought imaginable. Perhaps, something like this app could become a reality, and are a difference in people’s lives.

But wait, there’s still more! I also designed the app’s logo and advertising.

see brand