Design with Anxiety in Mind

Mobile mock exam high fidelity flow from exam, to submission, to processing, to results pages.
— POCKET PREP

The Pocket Prep Mock Exam equips users for the anxiety and exhaustion of a multi-hour, career-making exam.

Team

Julie Kaplan, Director of Product / Robby Helms, Web Dev / Maria Soboleva, iOS dev / Curtis Martin, Android Dev / Michelle Marlow, Director of Education / Ken Gillette, COO / Rob Witman, CTO

My Role

Lead Designer
Context Mapping / Market Research / Team Workshop Facilitation / User Research and testing / Wireframing / UI Design, System Component Design / Dev Collaboration for Implementation

Platform

iOS, Android, and Web Apps

Timeline

3 months

The Quick Skim

Problem

One of the hardest things to prepare for when studying for a certification exam isn’t only the volume of information to learn -- it’s the confidence and endurance needed to take a multiple hour long test with high financial and career stakes. Pocket Prep's maximum practice exam was 100 questions.

"Not being able to do a full 170 question practice exam. The questions were great, but I wanted to take a full exam on the computer to get a feel for the actual exam and I was unable to do so."

"It's one thing to sit on your couch for 10 minutes and answer questions or sit down for an hour in your house, when you have to sit down for four hours to take a test is a whole other level."

Task

A new feature that simulates the stress of a real exam environment to help Pocket Prep users prepare for the anxiety and exhaustion that are common inhibitors to successfully passing their professional certification exam.

Mobile wireframe views of mock exam all questions view.All questions view flow in high fidelity desktop from button to full screen view
[Left] Wireframe mobile app iterations to simulate user flow for engineering
[Right] Web app UI designs from presentation to the whole Pocket Prep team

Action

  • Conducted early user testing that validated why our users wanted this feature and what characteristics they expected
  • Regular cross-team collaboration with our education and dev teams heavily informed the information architecture and user flow of the feature
  • UI design in line with our design system while also introducing new moments of brand “delight”
  • Cross-platform design to ensure parity of user experience across iOS, Android, and web apps
  • Launched a premium-only beta mock exam feature across 15  exams.
[Above] Updated UI and features.

Result

The Mock Exam feature went on to become a key selling point for our users in purchasing premium and successfully passing their exams.

  • Usage grew to over 10,000 mock exams taken per month in the 15 beta exams offered, within a year of launch
  • 84% completion rate (quite high considering exams were 90-240 minutes long)
  • 86% of selected mock exam takers said the mock exam met or exceeded their expectations; 75% said they plan to take the Pocket Prep mock exam again
  • Went on to implement a v2 in response to user feedback

The Deep Dive

This was a 3 month project that included innumerable strategic, UX, and UI choices that are difficult to convey in a single case study. Below is a select deep(er) dive into one facet of the project.

If you want to hear more about the full process of this project, reach out!

When the Project Goal Can Guide and Mislead

This was a much requested feature from users who wanted to simulate the testing environment with our questions. We learned a valuable lesson as a team in focusing on user goals rather than our product goals, and letting the users decide how they want to study rather than our company forcing what we think is best.

While the majority of our users preferred studying on the mobile apps, our core goal for the mock exam feature was to simulate the testing environment. Our 200k+ monthly users were ultimately all going to take their certification exams in a formal online testing environment on desktop computers.

Two quotes from users: "Everyone always says taking the mock exam is the best way to prepare for the exam" and "love it, five. 6/5."Cross-team collaboration with sticky notes in whimsical board
[Left] Early user testing research shed light on customer enthusiasm and expectations for the feature as an idea
[Right] I facilitated a meeting for expectation setting/ brainstorming across leadership, engineering, and marketing teams.

From the project kickoff meeting and through the market research and wireframe stage of the design process, the product team started having conversations about whether we should offer mock exams on our mobile apps at all - would a mobile offering conflict with our stated core goal?

After much back and forth, we decided to offer the feature cross-platform and measure results. We added an "expectation setting" step of the mock exam user flow (also a suggestion from user interviews) that  heavily recommended that users take their mock exam on desktop rather than on their phone.

Mock Exam wireframe flows.
"What to Expect" view across tablet, mobile light mode, and mobile dark mode.
Modal documentation for developers.
[Top] Early wireframe iterations to establish flows
[Left] Cross-platform web platform designs
[Right] Mock exam components in the web design system

Cross-Platform and Cross-Team Coordination

I designed across our web and mobile apps, utilizing our newly formed and still developing Pocket Prep design system.

This was a cross-team endeavor: I worked closely with our developers on the nuances between each platform. We worked with the marketing team to create a post-mock exam congratulatory email to close the loop on encouragement as a great brand touchpoint.

Example desktop and mobile screen of mock exam quiz view.
[above] Mock Exam experience across mobile and web apps

Quantitative Results

We launched our beta across 15 of our most popular exam prep subjects. Our PM, Julie, tracked post-launch results closely through user data and 1:1 interviews. We saw an unexpectedly strong completion rate at 84%, with an average of 1 hour spent in the exam.

Our biggest surprise was that the split between web vs. mobile app mock exam rates were almost equal: 55% of people who took a mock exam took it on their phones. This was humbling - our team had debated whether we should even launch on mobile. It became clear that users didn't mind taking a two hour exam on their phones.

86% of surveyed users said the mock exam met or exceeded their expectations, and 75% said they plan to take a mock exam again.

★★★★★ "The practice exam on the app is HARD. I barely passed it and am pleased to say my exam was much easier in comparison, so make sure you take the practice test as well to help gauge how prepared you are."

★★★★★ "The mock exam felt real… my anxiety doing it told me so."

★★★★★ "The mock exam gave good practice for taking the real exam."

"I took a [Pocket Prep] mock exam two days before [the exam]. The mock exam threw me off. I was sitting across from a friend who was also taking it. We’d look at each other and say “I’ve never seen this before”. That was a good intro to that feeling. It was a teaser to the real thing."

"It did suggest using on desktop but it’s fine on the phone - I’ve always used Pocket Prep on the phone."

So you were in bed and just decided to take the exam then and there?
[laughs] "Yeah."

[above] Post-launch app store reviews and user interviews that reveal the range of user behavior in engaging with our mock exam.

Qualitative Results

In follow up interviews conducted by our product manager Julie, we found that our users' motivations for taking a mock exam varied widely. Many people valued simply having a new set of questions to test themselves on, and didn't stress much about the timer or the framing of a mock exam. Others were scrolling on their phones, saw the mock exam beta appear on their app, and took the full exam right then on their phones. These interviews showed that while our users really valued the new test option, they all took the mock exam with different levels of seriousness.

Pocket Prep now offers mock exams for 30 of their offered exams.

Web platform home page color and content shifts by time of day
UP NEXT

Sterile and Scary   Human and Encouraging ✓

Legacy redesign of Pocket Prep's core product web app.