Briana Rognlin | UX Design Portfolio

Year On

STRATEGIZING TO PROVIDE A HOLISTIC, USER-CENTERED SOLUTION WHILE ACCOMMODATING REAL-WORLD BUSINESS CONSTRAINTS.

Screen Shot 2018-04-02 at 12.35.13 PM.png
 

Nuts & Bolts

 
 

Timeline

3 weeks

 

Team

3 UX Designers

My Role

User interviews & usability walkthroughs; client management; content strategy & UX writing.

Tools

Formsite, HTML / CSS, Adobe Illustrator, Google Forms, Paper & Pen

 

 

The Problem

Drop-off during application process

Thousands of students were starting the application process for Year On's gap year program without completing it. The company needed to quickly improve its conversion rates to reach their 2018 enrollment goals.

 

 

The Solution

Artboard 1-100.jpg

An engaging application form to address problems with the website, too

In our research, we found that people were confused by the website and didn't fully understand the program before they started applying. But the company didn't have time or resources to adapt their website. So we built a new application form to address multiple causes of drop-off.

Skip ahead to see final design details.

 

 

Results

Admissions Process Completion:

↑ 24%

Prior to our redesign, 23% of students who started the online application completed the entire admissions process, including an interview. This increased to 47% two months after implementing our new form.

Online Application Form Completion:

↑ 13%

Completion of the online application form went from 58% before our redesign, to 71% within two months.

 

User Research

6

Business Stakeholder Interviews

5

User Interviews

5

Guerilla-Style Usability Walkthroughs

14

Survey Responses

IMG_0299.jpg

"I’m like anxious right now. Like, how long is this application gonna be? Do I have time to fill this all?"

-User Interview

 

User Interviews

Finding teens to talk to with 1 week and no budget? Not easy. So we took a multi-pronged approach.

With less than two weeks to find and interview High School students, connecting to Year On's target demographic was our project's biggest hurdle. We resorted to guerilla research tactics, blasted out a survey to broaden our reach, and mined data on gap year students to learn about our users.

 
 
 

Usability Evaluations

Our real challenge: Year On's website was failing to communicate what they offer.

We completed an heuristic evaluation of Year On's website and application form, and ran several usability walkthroughs to get a baseline reading of what was working and what wasn't.

Key findings:

  • Users did not understand Year On's offerings after browsing the website and completing the application form

  • The application form felt repetitive and lengthy to users, and did a poor job of setting expectations for applicants

  • Questions about personality and habits feel abrupt

  • Users are caught off-guard by the request for an essay and a video

 
 
 

Research Synthesis & Delivery

User Journey Map, Archetypes and Empathy Map for a user-centered design approach.

We wanted to convey our research findings in a way that helped our client adopt a user-centered approach, and help them see a broader picture of the user experience. We created an Empathy Map and two user archetypes: The Lost Achiever and The Cautious Cynic. Using the insights we drew from all of our research, we also created a User Journey Map to identify broader opportunities for Year On to improve their experience.

 
 
 
 

Design & Test

 
 

Collaborative Design

Giving the client information and options so that they can drive us towards a solution that will work for them.

To kick off our ideation phase, we held a client meeting to brief them on our research, offer multiple hypotheses that they could choose to guide our work, and conduct a short Design Studio. They were well-versed in design thinking, and we wanted to get their best ideas and see how they responded to our approach. We succeeded in getting them to think outside of the box and consider big-picture solutions, but the next conversations brought us down to earth...

 
 
Year On Design Studio
 
 

Technical Constraints

No website changes; no custom-built application form.

We were dying to improve the website; we felt that if it could help users understand Year On better before applying, the whole admissions process could be more efficient and attract a better pool of applicants. But they didn't have the time or budget to make website changes... and in fact, they didn't have the time or budget to build out a custom application form. So we had to get scrappy to create a workable solution.

 
 
 

Choosing a Design Platform

Platform Logos.jpg

Designing for user and business needs meant using an off-the-shelf platform. 

Year On's existing application was built on Typeform, but it didn't integrate well with their CRM software and it was the source of a lot of issues found in our usability walkthroughs. After much research and deliberation with the client, we landed on Formsite--a platform that would better integrate with their back end and meet one of our top user criteria: allowing users to log in, save their progress and complete the application in multiple sittings.

 
 
 

Design Priorities & Content Strategy

Convey information. Obtain information. Make it fast and easy.

Our research showed that many users—even those who initiated the application form—didn't really understand Year On's programs. Since we couldn't address this by changing the website, we had to assume that people landing on the application didn't know much about the programs. So we had to address this, and several other business and usability goals from within the application:

 
 
Screen Shot 2018-04-07 at 4.21.06 PM.png
 
 
 

Prototyping in Formsite

Customizing the platform using HTML & CSS to reflect the brand and usability goals.

Our client was ready to make the leap to Formsite, so that's where we built their prototype. We coded visual design elements like fonts and colors to reflect Year On's brand, and coded additional interactive elements to keep the functionality clear.

 
 
 

Usability Testing

Getting user feedback to refine content strategy and address usability issues.

With a usability test script, we asked 10 users to fill out our application prototype. We wanted to make sure users weren't hitting any road blocks or major frustrations with the form itself, and we especially wanted to find out whether applicants felt informed and positive about Year On's programs by the time they completed it. Feedback from these sessions helped us identify where we needed to invest in custom coding Formsite's interfact, and tweak the content to optimize usability.

 
 

Final Design:

Application Form Sample Screens

 
 

Our 'Quick Fix' Solution

Content strategy and research-based design decisions in action.

The annotated screens below highlight the strategies we used to create a user-friendly application form and meet the primary design goals outlined above:

  • Educate students about Year On
  • Make the process low-touch
  • Help applicants build self-awareness/realize the benefits of the program
  • Determine whether students are a good fit
 
 
 
annotated login.jpg

Application Login

 
 
 
 

Application Page 1: Basic Info

annotated app p1.jpg
 
 
 

Application Page 2: Build Your Year On

annotated app p2.jpg
 
 
 

Application Page 3: About You

annotated app p3.jpg
 

Service Blueprints

 

 The Full Admissions Process

Making our application form redesign easy to implement.

For our final deliverables, we also handed off a redesign of their Service Blueprint, to show how they might evolve their existing model to ease operations and modify touchpoints outside of the application form.

 
The Existing Service Blueprint.png
New Applicant Service Blueprint.png
 

Long-Term Strategy

 
 

Leveraging our Research

Taking strategic steps towards solving long-term usability and business problems.

Year On's needs and the scope of our project demanded that we focus on the quick fixes. To give them an idea of how to address our research findings—and their own business goals—we suggested a long-term strategy that they could employ as time and resources allow. The following is a basic overview:

  1. Improve website navigation and messaging
  2. User accounts for enrolled students
  3. Build a custom application form