Aceable is an online educational platform for certification and training courses. Their main products include drivers ed and defensive driving. While fast paced, interactive content of their application is favorited by thousands of students, they are dealing with some pain points.

1. PREPARATION AND SCOPE

Type of project: Team project
Role: UX Designer
Tools:
  • Sketch
  • Adobe Illustrator
  • Adobe Photoshop
  • InVision
  • Maze
Tasks:
  • interviews
  • persona
  • user journey map
  • user flow
  • wireframing
  • prototyping
  • user testing

2. RESEARCH

Problem Statement

After examining existing data from Customer Experience department, we found out that PTDE students don’t realize they can download and print their certificates from within their account and that they can sign in and do so even after they finish the course, as their access is not suspended.

What Do Students Say When They Call/Write to Customer Experience?

Why is This Important?

Responsive image
Accessing and printing certificates is crucial for students to receive their permit and license.
Responsive image
Leads to unnecessary contacts for Customer Experience that students have the power to resolve quickly on their own.
Responsive image
Leads to a lot of unnecessary frustration for students.

Why Does This Problem Occur? What Does it Look Like Currently?

1
Picture with partying people is not adequate and takes a lot of space in email.
2
The introduction isn’t very professional. It may seem too casual.
3
The entire “Your next steps” section contains a lot of text students are not interested in reading.
4
The link to certificate isn’t very visible. No information about having access to it anytime.
5
There is no breathing room inside the text block. The text is not divided into sections.
6
Most important elements are not highlighted enough. Light blue links can be easily omitted.
The above statements were created by our team after seeing current screens within the application. We decided to confront our assumptions with group of 4 teenagers. We received following feedback:
The picture should be more professional/official, the text should too. It doesn’t feel like I just finished a major milestone. It feels like it’s belittling me.
I wouldn’t read lots of text, just the bold parts of the email.
I would go to the print section to print it out and immediately ignore all the text.
1
Currently students can find their certificates on the homepage or after clicking home icon. It’s not intuitive for many of them.
2
“View Permit Certificate” on the dashboard isn’t very visible. Easily missed or glossed over.
3
“View License Certificate” on the dashboard is misleading. Student is not aware which certificate to choose from.
4
Lack of a designated icon in the menu that would lead to earned certificates.
After thorough analysis of the current user flow and getting feedback from the interviewees, we started brainstorming and thinking about potential solutions:
Responsive image
Responsive image

3. INFORMATION SYNTHESIS

We were trying to understand what crucial steps need to be taken to complete the tasks. What are the obstacles? We stared using “How Might We?” questions to better understand users’ habits, to visualize how they deal with emails/ notifications they receive. We were thinking what kind of consideration is taken in looking for a specific document (certificate). After asking all of the questions we had in our minds, we selected 3 best questions, which were applying to our objective, no matter what we were going to prototype. We reframed them later, and use them as opportunities.
Responsive image

User Persona

We created our persona based on in depth research - the articles and statistics about young people who are between 15-17 years old (Generation Z) and initial interviews with group of teenagers. Our persona reflects the behavior and motivations of the users we were interviewing.

Empathy Map

The next deliverable which gave us deep understanding of social behavior of our targeted audience was empathy map. We were observing our interviewees during the initial meeting, were listening to their responses, noticing their reactions. It helped us a lot with creating a map that reflects the needs and frustrations of the young generation.

4. CONCEPTS GENERATION

User Journey Map

Whiteboarding and creating user journey map helped us with identifying painful parts of the process and thinking about the opportunities. It was crucial for us to envision the whole process, to see where and in which stage of the process the problem starts, and identify the best way to address the user needs.

Findings and Ideas for Solving the Problem

Responsive image
Visibility
“View Certificate” on the dashboard isn’t very visible. Easily missed or glossed over
Responsive image
Notification
Send push notification that leads students to where the certificate lives in the account
Responsive image
Iconography
Create a designated icon in the menu that leads to earned certificates
Color
Change the color of the icon once the certificate is received
Responsive image
Accessibility
Make it clear that students can download and print from their account any time
Responsive image
Utilize Ace ( Mascot)
Use the Ace image in the notifications and emails
Responsive image

5. INTERACTION VISUALIZATION

After creating maps and graphs and thinking through our strategy, it was time to start putting our ideas in the shapes of buttons, icons and other UI elements and create the first wireframes.

Low-Fidelity Paper Wireframes

We met with test participants one at a time and gave them tasks to perform, asking them to vocalize their thoughts as they attempted tasks such as going through the user flow, finding particular elements, showing us where would they look for their certificates, etc.
Responsive image
Responsive image

Wireframes Testing Findings

  • Overall users liked the wireframes
  • In the emails users preferred either icons only or bold text only, but not both. Bold text was preferred over icons.
  • Users would keep the title of the email as not a link, would only have one link to the certificate because it might generate multiple copies.
  • The wording on the emails felt “pandering and not endearing” they preferred it to say “Congratulations” or something more formal/serious.
  • No need for icons on the email.
  • They don’t mind having 2 links to download (one in the title, one in the body) but that it should be made clear it will download something, otherwise they wouldn’t like it.
  • They like the Ace drawing.
  • They would have the links next to the icons, not underneath header text.
  • They like the icons.

Insights

I would keep the title of the email as not a link, would only have one link to the certificate because it might generate multiple copies.
I’d like to see a certificate button on the nav bar, but gold colored.

6. IDEATION

High-Fidelity Prototype

Responsive image Responsive image
1
Notification that says what students can do and reminds them about diving back into the course
2
Email with less steps and highlighted most important links
3
Screen with dedicated nav icon for certificates
4
Pop-up with short instructions and reminder about the opportunity of having access to certs anytime
5
Screen with miniature of certificate and two options (download or print)
6
Last screen which appears when student is printing the certificate
High-fidelity prototype was created after couple of iterations. We utilized users' feedback and changed the parts in the previous versions of our wireframes, which weren’t intuitive / effective enough. In the final version of the prototype we wanted to make sure that users are not taking any unnecessary steps towards getting access to desired certificates.

7. TESTING

Usability Testing with Maze

We tested our high-fidelity prototypes using a Maze tool with 5 users who were between 15-17 yo. It helped us visualize the hitmaps, where users were clicking and if they flow was streamlined enough. As we collected the results we found out that the average time to complete the task was 12 minutes with a misclick rate of only 12 %.
One of the users left the following feedback:
Simple, fast and straight to the point. It’s not at all confusing and allows the user to get their certificate quickly.

8. REFINING AND REPEATING

Conclusions

We found out that understanding the expectations of a generation that grew up with technology and the internet isn’t easy. We were very glad that our research wasn’t based just on the articles and statistics. We reached out to a group of teenagers who told us how the user experience looked like from their point of view. We were surprised many times during our interviews and usability testing. Deep understanding of teens' motivations and needs helped us with designing solutions that could solve one of the Aceable’s problems.

Testimonials

“From the Customer Experience side, for the certificate solution, I thought it was so much more clear, direct, and helpful. I felt as though it would significantly reduce CX contacts by guiding them to how to self-solve for downloading their certificate. I love the emphasis on printing it out, and including a way for them to send it themselves in-app to another person who could print it for them. To me this would be a huge CX win and cut down on unnecessary contacts while also helping students feel more empowered in ownership of this process.”
Montana, the Customer Support Team Lead at Aceable
www.aceable.com

MY OTHER PROJECTS