1. PREPARATION AND SCOPE
Type of project: Team project
Role: UX Designer
- Adobe Illustrator
- Adobe Photoshop
- user journey map
- user flow
- user testing
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?
Accessing and printing certificates is crucial for students to receive their permit and license.
Leads to unnecessary contacts for Customer Experience that students have the power to resolve quickly on their own.
Leads to a lot of unnecessary frustration for students.
Why Does This Problem Occur? What Does it Look Like Currently?
Picture with partying people is not adequate and takes a lot of space in email.
The introduction isn’t very professional. It may seem too casual.
The entire “Your next steps” section contains a lot of text students are not interested in reading.
The link to certificate isn’t very visible. No information about having access to it anytime.
There is no breathing room inside the text block. The text is not divided into sections.
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.
Currently students can find their certificates on the homepage or after clicking home icon. It’s not intuitive for many of them.
“View Permit Certificate” on the dashboard isn’t very visible. Easily missed or glossed over.
“View License Certificate” on the dashboard is misleading. Student is not aware which certificate to choose from.
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:
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.
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.
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
“View Certificate” on the dashboard isn’t very visible. Easily missed or glossed over
Send push notification that leads students to where the certificate lives in the account
Create a designated icon in the menu that leads to earned certificates
Change the color of the icon once the certificate is received
Make it clear that students can download and print from their account any time
Utilize Ace ( Mascot)
Use the Ace image in the notifications and emails
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.
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.
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.
Notification that says what students can do and reminds them about diving back into the course
Email with less steps and highlighted most important links
Screen with dedicated nav icon for certificates
Pop-up with short instructions and reminder about the opportunity of having access to certs anytime
Screen with miniature of certificate and two options (download or print)
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.
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
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.
“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