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.
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.
Multiple studies have found a strong link between heavy social media use and an increased risk for mental illnesses like anxiety and depression.
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.
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 identified various themes from my findings, however productivity and aspirations was the most compelling and decided to focus my efforts on this one.
I also constructed an insight statement that explained and defined my chosen theme:
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.
I began to consider what kind of functions and features my persona might want in an app by using user stories. For example:
I then translated these user stories into tasks, actions that could be taken in an app to fulfill user needs.
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.
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:
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.
I then translate my sketches into more defined, digital renditions called wireframes with the following considerations for design:
Once the wireframes were complete, I stitched together every screen, created additional screens for flow and had a testable, functional prototype.
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.
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.
To my surprise, my participants were able to complete most of the tasks with little trouble. Few adjustments needed to be made.
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.
I chose 10 keywords and became more precise by organizing them in a 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.
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.
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.
I then sorted through the photos and removed ones that didn’t visually fit the whole set.
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.
I used the eyedropper tool on Figma and arbitrarily extracted color from my images.
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.
In line with my adjectives and moodboard, I determined that the modern and sleek neighborhood was consistent to the brand I was developing.
After some tweaking and calibration, I was able to determine a primary and complimentary colorfor my brand.
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 gathered each name idea that had a star and went on to take a vote... with another timer.
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:
After having created a name for my brand, it was back to sketching out some ideas for my wordmark.
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.
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.
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.
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.
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.
After some thought and further experimentation, I decided to move forward with the following color injection pattern.
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’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.
With a full color palette and branding, my final prototype was complete.
I also created a responsive marketing site mockup on Figma.
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.
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.
