Note: Initial launch occurred in late July 2014, with this case study being written and published within the week following. Sadly, this project was discontinued in July, 2015. If at the time you read this you find that it is revived, it is with a new team and may or may not have retained my code.
A Unique Idea
A new project is exciting, but a brand new idea for a service with the potential to help users achieve their career goals was something I was fired up about from the start. This service, dubbed Smart Degree, would offer students the promise of reduced higher education tuition. In fact, the schools participating in this program would be competing for each student using this service.
The Roles-Based Challenge
The trick to building Smart Degree was to create a simple flow for each of our user types: students, mentors, and schools.
Each user’s journey, regardless of group, required several rounds of back-and-forth interaction. Special roles were created with unique permissions to control content access and editing power.
Often, clients will have a feature list in mind. This project was no exception, but it also had less than a handful of potential competitors to draw on for market research. I used my project management skills as I helped guide the conversation and ferret out the details needed to develop this service. My daily flow consisted of determining what piece of the project I would be tackling, what my team needed the client or third-party connection to provide, and what questions to ask to get that information. It also involved considering the service from each user’s point of view, asking questions like:
- Are all the actions on this screen obvious?
- Does this screen provide all the clues to move me to the next step of the process?
- How can this process be more simple and clear?
- What type of feedback will be needed after action is taken?
- Is it clear when there will be a waiting period for another user to take action?
After gaining an understanding of the goals of Smart Degree, my team and I developed wireframes for a few key pages in the process. Then, I set out to develop a document detailing the steps of several goal journeys and built out the remaining wireframes for the more nuanced intermediary screens. This document also included my notes and ideas on how the parts would come together from a development standpoint.
I then introduced a new-to-us tool: Invision. My team fell in love with features such as: uploading screenshots/wireframes and making clickable hotspots; creating comments and marking them off like a task list; sharing a link for client feedback and internal review; and the live-sharing conference call feature. We used it to show prototypes and get buy-off before stepping into the code, plus keep track of changes in a visual way.
An important concern was creating a variety of notification types to let the appropriate party know a hand-off had been made. The largest example of this was the tuition offer submission and acceptance flow. There were many iterations of this journey as it was the critical differentiator for Smart Degree. I had to adapt various parts of the interface as questions were uncovered during development. Here’s the birds-eye view of the launch-ready flow:
- A student’s profile enters the pool for a school to select from
- The school reviews all the student profiles available
- The school submits a customized, time-limited offer to the student
- The student receives an email and dashboard notification that an offer is available
- The student compares this offer with others they have received, makes a selection, and the selections are sent to their mentor
- The mentor discusses with the student all the offers they have received, and they select a final choice
- The school is notified by email and dashboard notification that the student accepted their offer
WordPress is a solid foundation for building a user-centered app, including a variety of functions to modify any part of the user experience. For this service, I customized the following:
- User login form and login screens
- Sign up emails
- The reset password flow
- Extended user meta
These additional customizations were especially dependent on the user’s role:
- User profile editing
- User profile layout
- Author page link structure
- Author page access (only one user type is public)
On top of managing user roles and profiles, I built a from-scratch in-app messaging system that allowed for several interactions:
- A student to message with a mentor as their primary method of communication
- A student to ask question surrounding offers from schools
- Mentors to privately message schools, but within the context of a student’s unique profile
- System notifications sent to students
Many steps involved a variety of forms, for which I chose Gravity Forms. The benefits of this plugin were:
- Extensive documentation and supreme ability to customize
- Easy setup of notifications, including ability to insert our carefully designed HTML emails, and multiple notification recipients for each entry
I also tapped into Gravity Forms hooks to modify the output of forms, including changing the edit ability per field depending on the user’s role. Custom functions were also created to pre-fill forms to edit previously submitted entries, effectively creating cleanly validated extended profiles.