Overview

PROBLEM

Taking a coding or design intensive course can be exhausting—even more so for students who also juggle a part-time or full-time job. They often turn to social media to unwind from class or projects, which can arguably be just as stressful. Ponder provides a temporary escape disconnected from such social distractions.

TARGET AUDIENCE

Current and former coding and design students

GOALS

Goals.png

TEAM

Emily Wong, Erica Sinkevitch, & Mikey Lane

DATE

4 weeks • Jul—Aug 2018

MY ROLE

UX researcher, lead visual designer

DELIVERABLES

• Personas
• Comparative analysis
• Design process (sketches, wireframes, & visual design concepts)
Clickable mobile prototype

Research

FIELD INTERVIEWS

We began our discovery phase with 8 FIELD INTERVIEWS. I facilitated 3 interviews and took notes for the 4 my team conducted.

We wanted to figure out a way to mitigate stress while keeping students motivated. To better understand their goals and pain points, we asked about how and where they sought comfort and inspiration, as well as their experience with stress management.

Tell me about a time when you were overwhelmed in class.
What keeps you motivated?
How do you relax/escape?

We created an affinity map of our findings and noticed 3 TRENDS.

TRENDS

1. Inspiration comes from everywhere.
Many participants emphasized the importance of everyday experiences and being in the moment. Some were inspired by their surroundings and travels.

2. They need sleep.
Besides caffeine, participants also relied on sleep when both low energy and stressed. Most dealt with the stress of overwhelming tasks by breaking them down into smaller, manageable pieces.

3. Distractions can help manage stress.
Some participants talked about going for walks to clear their heads. A few mentioned needing me time to recharge or concentrate, but most were mindful that it was beneficial to give themselves breaks.

 

PERSONAS

Based on the data extracted from our field interviews, I developed 2 personas, 25-year-old graphic designer/part-time student Nate and 29-year-old full-time student Claire.

 
 

COMPETITIVE ANALYSIS

With a better sense of what our target audience’s goals and pain points are, we determined 6 features/patterns we wanted to explore in Ponder.
I compared 1) mobile apps that use clean, minimal interfaces with a dominant background to create an experience and 2) coloring and drawing apps.

KEY TAKEAWAYS

1. Make onboard inviting and personal using positive, encouraging language.
2. Offer entire experience with a minimal look on a moving main page and sound effects.
3. Hide tool customizations without simplifying function; maximize space to create instead.

 

Design Process

From our research, we decided on the 4 features we thought our app must have:

1) sounds
2) fun interactions / games
3) sketchbook
4) map
.

PAPER PROTOTYPES

To get the ball rolling, we started with a Crazy 8’s exercise. I focused on our sounds feature for this. After silent critiquing each other’s work, we sketched wireframes for the designs we preferred.

Left: Crazy 8’s [1]
Center: features for MVP on post-its
Right: Sketches [2, 3, and 4]

 

WIREFRAMES

After hashing out some designs on paper and organizing some feature ideas, I transferred our paper sketches to wireframes on Sketch, as seen here.

Since we wanted to emphasize Ponder’s nature imagery, we kept the UI minimal to better feature the background images.

Wireframe3_HomeFeed.png
 

Testing

With a high-fidelity prototype in InVision, we recruited current and former students of tech or design bootcamps to test it out. We conducted a total of 5 USABILITY TESTS. I interviewed 2 of the participants and took notes for the rest. We shaped our discussions around 3 research goals:

Is the app useful in eliminating stress?
Is it enjoyable to use?
Does it help users feel inspired and/or relaxed?

FINDINGS

We ranked the issues we noticed in our tests by their severity. From there, we prioritized which problems we had time to tackle.

1. Disconnect between onboarding and homepage
Participants were confused when they landed on a homepage they did not expect to see.

2. Confusion about Dr. Bill’s (rubber duck) purpose
Some participants expected Dr. Bill to be someone that could help them and offer tips.

3. Redundant Explore features
Participants were confused about the purpose of the filters in our map feature.

SOLUTIONS

Based on our findings, we removed the map features’ filter options altogether. It was not necessary to complete any task, and we ultimately decided it was unnecessary.

We also thought it’d be fun to include a rubber duck, NYCDA’s pseudo-mascot, somehow in our onboarding. However, during our usability tests, users were unanimously thrown off by the duck and his purpose in the app. It was jarring for them when they got to the app because it seemed so disconnected from the onboarding, and they expected Dr. Bill to play a role throughout the app. Now, instead of presenting the duck as a character, he takes a more low-key role. We eliminated choices in the onboarding and now leads directly to the homepage, where Dr. Bill makes a second appearance to clarify our timer feature.

 
The evolution of Dr. Bill Quackington.

The evolution of Dr. Bill Quackington.

 
 

Prototype

Initially, when my team and I put our initial designs together, they were not exactly consistent. I took on the role of lead visual designer and reworked some of the designs to create a cohesive look. Teammate Erica took point on the game feature and nailed making simple games interactive and fun. We went through multiple iterations of designs, including completely overhauling our onboarding based on our usability tests results, before arriving at the final prototype.

PonderMobile.gif
 

Next Steps

In order to create a more complete experience, we would like to integrate SOUNDS & VISUALS.

NextSteps.png