UX design case study
Project Type
UX design
Project year

Design challenge

During my time at BrainStation's UX design bootcamp, I was tasked with creating a mobile digital solution for an existing problem space. This would be my capstone project, a culmination of everything I learned about UX design.

Time Constraints

Deliverables for this project were turned in over the course of two months, while concurrently working on other mandatory projects.

These other projects served to practice the UX design principles taught in lectures and were ultimately applied to capstone deliverables.

Defining the problem

Problem statement

Multiple studies have found a strong link between heavy social media use and an increased risk for mental illnesses like anxiety and depression.

5-10% of Americans meet the criteria for social media addiction

Of those aged 18-22, 40% stated they are "somewhat addicted"

Conducting research


In order to better understand those most affected by this problem space I met with young adults one-on-one to discuss in depth their experience with social media.

My participant criteria consisted of 18-22 years old who are highly active on social media

Extracting quotes

Affinity Mapping

Getting to meet with real people gave me deep insight not only into what motivates them about social media, but also what frustrates them. I took these findings and created an affinity map.

Definition: the process in which statements from real people are grouped into pain points, motivations and behaviors in order to understand the overall demographic.

"I feel like if I don't have my phone, a piece of me is gone. I wish it wasn't like that"

The most compelling theme

Productivity and Aspirations

I identified various themes from my findings, however productivity and aspirations was the most compelling and decided to focus my efforts on this one.

Insight Statement

I also constructed an insight statement that explained and defined my chosen theme:

Young people know the potential their personal devices and social media has for helping them reach their goals and aspirations.

However, excess use ends up making them feel less productive and feel as though they’re missing out on life’s experiences.

Putting it all together


Using my chosen theme, I created a persona that would represent the individuals I interviewed. Just like my interview participants, Tiffany had pain points, motivations and behaviors.

Designing for a persona ensured my design choices were always user-centered.

User driven functions

User Stories

I began to consider what kind of functions and features my persona might want in an app by using user stories. For example:

As a social media user, I want to view places I can go when I’m on a social media break so my time away from social media feels more dynamic.


I then translated these user stories into tasks, actions that could be taken in an app to fulfill user needs.

Suggest places to go during social media breaks.


Once I had enough user stories to work with, I grouped them into epics, user stories that shared similar themes and tasks that would serve as a primary function in my app.

Activities and places to go

Creating the framework

Task flow Diagram

With a clearer understanding of the main functions my app would have, I outlined the user's journey in completing a task in my app focused on one epic and it's accompanying user stories and tasks:

Activities and places to go

User Stories
  1. As a user I want to view places I can go when I’m on a social media break so my time away from social media feels more dynamic.
  2. As a social media user I want to receive a prompt to take a short break from social media so that I don’t go longer than normal.
  3. As a user I want to see what things I can do during my social media break so that I can easily move on to do something worthwhile.
  1. Suggest places to go during social media breaks.
  2. Provide notifications or alerts for breaks after a set amount of time.
  3. Suggest activities for the user to complete based on their goals during breaks.

Pen and paper

Exploratory Sketches

Now that I knew the screens my app needed to have, and the necessary actions users needed to take, I was ready to sketch rough, functional ideas.

Crazy 8s: Normally used to quickly sketch eight different ideas in eight minutes, I used the same method to sketch three variations of ten screens.

From sketch to digital

Mid Fidelity Wireframes

I then translate my sketches into more defined, digital renditions called wireframes with the following considerations for design:

Type styles


Grids and spacing

Stitching it together

Prototype v1

Once the wireframes were complete, I stitched together every screen, created additional screens for flow and had a testable, functional prototype.

From time to time, I had to recreate certain elements as interactive components.

Putting it to the test

Usability Testing

It was time to test my prototype.

User test plan: I created a plan which included instructions, a script to guide me, and tasks for my users to complete.

User test sessions: I conducted a round of user testing with five different participants.

Some took place in person, others via video call using screen sharing.

Documenting the results

Sessions output document

Once I completed my round of testing, I documented and organized my findings and any additional feedback received during and after testing.

Overall testing results chart: The document also included a chart outlining what tasks participants were able to complete, unable to complete, and struggled to complete.

Making changes

prototype v2

To my surprise, my participants were able to complete most of the tasks with little trouble. Few adjustments needed to be made.

Most users struggled to complete task 4, tapping the keyword instead of the information icon.

The fix was to make the keyword tappable, and the information button removed for less confusion.

Tone and voice

Key words

To begin, I wanted to start with defining the tone and voice for my brand.

Definition: Key words describe the mood, ambiance, and atmosphere of the brand by using adjectives rather than literal words.

Initially, I thought about how I want my app to feel.

However, to maintain a user-centered approach, I shifted and considered how I want my users to feel.

This was more important.

What it is and what it's not

I chose 10 keywords and became more precise by organizing them in a More A than B List.

More A than B list

This tool would help me to stay aligned to my brand-feel by acting as a "gatekeeper".

In other words, if an image or color seemed strict or clunky, It had to be reconsidered.

More friendly than strict. More magical than normal.

Tone and voice, defined

5 chosen adjectives

From the many words I compiled, I decided to stick with a list of five. That helped me to narrow down the feeling I wanted to extract from my moodboard.

Photo dump

It was time to explore the tone and voice on a deeper, more visual level. I did this by creating a moodboard.


To avoid searching for literal images of my adjectives, I browsed Unsplash.com’s Editorial Page and picked photos that I felt conveyed the emotions I was looking for.


Curated moodboard

I then sorted through the photos and removed ones that didn’t visually fit the whole set.

Color extraction

My curated moodboard really helped me tune in to the feeling of my brand. In order to start bringing this project to life, it was time to explore color.

eyedropper tool

I used the eyedropper tool on Figma and arbitrarily extracted color from my images.

Grouping complimentary colors

Having extracted a multitude of colors, I had plenty of options to pick from to create a color palette.


Neighborhoods are grouped colors based on how well they complement one another and are labelled by the feelings they evoke.

Now my options were more specific, and based on meaningful groups of colors.

Chosen neighborhood

Modern and sleek

In line with my adjectives and moodboard, I determined that the modern and sleek neighborhood was consistent to the brand I was developing.

Keeping my users in mind, I felt this neighborhood represented them best


After some tweaking and calibration, I was able to determine a primary and complimentary colorfor my brand.

From neighborhood, to color calibration and exploring tints and shades

Name ideas

Name dump

Similar to choosing adjectives for my moodboard, I wrote as many name ideas as possible, using a timer so I don’t get carried away.

As I went along, I put a little star next to the ones I thought had potential.

I thought about words in Spanish, words in Portuguese, and funny ways of spelling regular words.


I gathered each name idea that had a star and went on to take a vote... with another timer.

Process of elimination

I would read through the list, mark ones that peaked my interest and ignore the ones that didn't

I repeated this until I was left with just one


I felt “wonder” did a great job at encapsulating the overall goal of my brand:

The wonder of looking up from your phone and seeing what’s in front of you.

Whether that’s going some place, or simply carrying out a responsibility.

Sketching ideas

Back to the drawing board

After having created a name for my brand, it was back to sketching out some ideas for my wordmark.

From sketch to digital

I went on Figma and explored digitizing some of my sketches.


I played around with the positioning of all of the letters in “wonder”, replacing it with the star icon or even omitting the letter O to experiment with perception.

I felt this design strongly represented my initial adjective "magical".

Fine tuning

Pen tool

Having the star on top of the letters W and N really gave the design dimension, but I needed to adjust the letters with the pen tool so they seem less interrupted by the star.

The golden ratio

I had decided Wonder’s primary brand color would be a bright orange, however I needed to consider how I might use that color on the UI of my app.

two neutrals and a pop

Using the Golden Ratio, I selected two neutral colors for the app’s background and main UI elements, while my “pop” would be used to emphasize key information.

White (60%)

Dark Gray (30%)

Bright Orange (10%)

Color Injection


To begin experimenting with color on my app, I chose what I felt to be the most complex screen in my prototype: The Activity Creation Screen.

I experimented using a tint of my neutral for placeholder text.

I also tried injecting my pop on interactive elements like chips and buttons.

These are the same screens with different color injections.

Chosen color injection

After some thought and further experimentation, I decided to move forward with the following color injection pattern.

White background (60%)

Dark gray selection chips and CTAs would (30%)

Information pertaining to Smart Activities and the user would be Bright Orange (10%)


Location previews

The use of photography across Wonder is mainly seen on location previews, where a user is able to see places recommended by the app

I ensured each photo had the same "crispness" and high contrast to evoke a feeling of liveliness.


Apple's Memojis

I’ve always admired the way you can create your own emoji in Apple's OS. I made use of Memojis in the way users are greeted by Wonder upon opening the app and setting up their day.

Seeing yourself in digital form is fun, and I wanted to convey that feeling for my users.

Putting it all together

Final prototype

With a full color palette and branding, my final prototype was complete.

Putting the word out there

Responsive Marketing site

I also created a responsive marketing site mockup on Figma.

Why it works.

Design impact

Social media is a powerful platform, created to connect others and share one's interest. Unfortunately, excess use ironically makes people feel more isolated and alone.

I believe the impact my app will have will help young people practice more self control and feel more involved in their own personal lives.

Future thinking

Usability testing: Next steps for Wonder include one more round of usability testing to validate that my color injections are accessible and functional.

Hand off to developers: Finally, the mockups will be handed off to developers, along with a complete UI library and additional assets.

Let's work together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.