mobile PEP tool prototype

Personal Education Plan Tool
Mobile Web App Redesign

The task
The Personal Education Plan tool on the strayer.edu website is one of the most heavily used tools on the website. I was tasked with redesigning it so that it could be featured on more pages on the website and provide more clarity on costs and time commitment for prospective students.
Team
For this project, I was in charge of all aspects. I frequently consulted with a Web Developer, Content Strategist, and the Design team for critiques.
My responsibilities
Mobile and Desktop Prototypes
User Research
Usability Testing
Tools
usertesting.com
Sketch
Adobe XD
User Research
I created a usertesting.com study of the website's academic program pages. This would inform the functionality of the PEP tool, because the plan is to feature it on the program pages as well as other appropriate pages.
Relevant findings:
Prospective students wanted more accessible detail around cost, time to complete the degree, and number of courses in the program.
While users had an overall positive experience on the website, calculating costs, which was information they desired, continually tripped them up.
Need to insure that all necessary information is readily available and easy to find.
Hypothesis
By updating the tool with a mobile first experience and integrating financial aid information, the website would see more inquiries due to prospects understanding their costs and time requirements. This will result in a higher degree of confidence in the program.
My goal was to create a dynamic tool so that prospects could understand how designing their education plan would affect costs and time to completion.
Initial Wireframes
With this information, I jumped right onto Sketch and started creating wireframes to get some ideas of how changing the tool from a static questionnaire to a dynamic tool might work.



Prototyping
After presenting my initial ideas and wireframes to the team and receiving positive feedback, I used Adobe XD to put together a mobile prototype, and then extended it to the a desktop prototype.



Usability testing
I sent subjects the clickable prototype created with Adobe XD and presented them with simple tasks to complete on the mobile version. The response was overwhelmingly positive, particularly because of the clarity added to available savings.
Current Status & What I've Learned
The website now contains a scaled down version of this tool. My visual design was used to improve the previous version, but there were a few snags that prevented my tool from being developed in all its glory.
A major component I wanted for this tool was for it to exhibit savings from our scholarship offerings. My user research had found that cost was a barrier and savings opportunities were unclear. My solution was to add in "potential grad fund." Grad fund is a type of scholarship offered to all students who make it through the program. However, this addition was blocked by the legal department and taught me an important lesson about the number of hoops that an app has to go through prior to launch.
The dynamic response when users change the parameters of their education was also a key piece to the app because it afforded prospects the freedom to see how changing their plan could effect the costs and time to complete a degree. However, the development resources were not available for creating an app of this complexity. This was important lesson about the downside to being overly ambitious. Developers should be consulted through all through all phases of the project to avoid this pitfall.