A Great Tool for Prospective Students – A Tuition Calculator
Timeline: 2-week design/ 3-month testing • Materials: Pen, Paper, and Adobe Xd
UX Techniques: Analytics, Competitive/Comparative Analysis, Sketching, Prototyping, Mockups, Optimizely for Variant Testing
Background
Once a year we work with an outside agency to conduct research about prospective students. This 200+ page document dives deep into what makes a prospective student decide to go back to school. This document is a great resource from persona information, competitive tuition cost, and even what industry is growing so that we can market more to that demographic.
Through this research and our own evaluation and analytics we found that prospective students ask themselves three important questions:
- Do you have my program?
- How much does it cost?
- Where is the program held?
In this project we are focusing on the second question, but see my other projects for ‘Do You Have My Program?’ and ‘Where is the Program Held?’ So how much does it cost to go back to school? The answer varies because of the complexity of tuition. Most of our demographic includes adult learners, and are returning to school after taking a break. The cause is usually a big life event: career change, marriage, kids, etc. So many of them will have transferable credits from another school.
The Problem
On the old page, finding any information on tuition was a struggle. While the university was operating from the thought process, “How can you put a price tag on your future?”, the lack of information wasn’t serving prospective students.
Example of the old Program Page without any information on Tuition
We used analytics to see that ‘Tuition’ was a term frequently searched for on the site. Users wanted this information, but they were not able to find it easily, so they ended up searching for it. And once you did find it, it was still pretty confusing with several tables and graphs that users had to decipher in order to try and figure out how much it was really going to cost.
The Solution
In the new design of the program page, we put tuition right in the users’ faces. One key UI pattern utilized here was tabs to help shorten the page. Other goals were to provide more space for long content and improve the design on mobile devices. Now there is a whole tab dedicated to tuition. On the tab itself, the key feature would be the tuition calculator. With some fairly simple math, users could now figure out what the cost of going back to school would cost them.
Old vs new user flow for tuition
As shown in the user flow above, having a user go to another site (CollegeSource) and search their college, find their classes, and export them to an excel spread sheet was too involved. Even worse, the excel spread sheet didn’t actually provide a cost. With the new user flow, we reduced the number of steps, simplifying the experience to using a calculator to find out your estimated tuition.
Hypothesis
The belief was that if prospective students were given shorter, more digestible content with better tools, like the tuition calculator, it would generate more leads and thus they would be more likely to enroll in the university resulting in higher revenue.
The math equation to figure out the cost of tuition for prospective students
Even though it looks like simple math, on the back end, it can be a lot of functionality. Knowing a bit of code myself, I know any times you are dealing with math, and inputting of numbers, it can get to be quite involved.
Challenges
Getting buy in from client was fairly straight forward and they were excited that this new feature would be available for prospective students to use. Where it was a struggle was within our own team. Although this feature was discovered in the ideation phase, it was not part of the original scope, and because of this dev was caught off guard. The dev team, who would actually have to build this, was worried about budget, timeline, and extending the launch date in order to have this feature be included with the rest of the updates to the page. After much debate from all teams, it was decided the launch date would not be pushed out, and the tuition calculator would be push to a phase II, after the pages went live.
Low-fi mobile wireframe of tuition calculator
High-fidelity mobile prototype of the tuition calculator
High-fidelity desktop prototype of the tuition calculator
Findings
The top 5 programs at NU had the following increases after 85 days:
- MBA Program Page: 52% improvement over original
- BS Computer Science Program Page: 5% improvement over original
- BBA Program Page: 97% improvement over original
- RN to BSN Program Page: 47% improvement over original
- BS Nursing Program Page: 32% improvement over original
Overall improvement to program pages vs the control/original
Reflections
One thing I would do differently in the future would be to get development involved earlier in the process. When I came up with the idea for the calculator, I should have told dev about instantly, rather than waiting for the next team meeting. The calculator would be a piece of custom coding which some developers were not comfortable with. And if they were going to code, it would take some time to create it and they probably wouldn’t have made the launch date.
Additionally, I was reminded in this project of the importance of the relationship with the developer. Partnering with developers will only serve to create better experiences for users.
