RaiseMe helps colleges and universities provide "micro-scholarships" to students as early as the 9th grade. Similar to earning a scholarship for an essay, students earn micro-scholarships on RaiseMe by entering their high school achievements, e.g., classes, extracurriculars, work experience, test scores, and community service.
For example, add an A+ in Biology into RaiseMe, and the University of Chicago will reward the student a $150 micro-scholarship to their university. Micro-scholarships are applied directly to students' tuition after being accepted and enrolled.
RaiseMe launched in 2015 on the web to high students across the United States. By 2016, the platform grew to 600,000 registered students with the help of school districts who were instrumental in our growth. That said, our leading indicator of students adding achievements into RaiseMe slowed by late 2016. We developed a few assumptions around why we saw this critical metric decline:
It became apparent that no matter the solutions to address engagement, we were going to face challenges in getting students in front of a computer to use RaiseMe. Our hypothesis was if we can make RaiseMe more easily accessible, we will see more students earning micro-scholarships. To validate and after acquiring our Series A, we set out to build our first native mobile app starting on iOS.
After prioritizing the iOS app as our most significant initiative since the launch of the platform. I started my process by developing early mobile prototypes of essential flows/interactions and tested with new and existing students for feedback. However, during my testing, I uncovered troubling insights:
Speaking with students, parents, and educators over video conference, I learned these misunderstandings about RaiseMe added stress and confusion to the college application process and in some cases, disrupting financial planning in the worse possible ways.
We kicked off this project in January 2017 with a deadline to launch by August 2017 for back to school season, and key stakeholders were also hesitant to invest in product confusion in that short amount of time. The quantitative data our product team gathered made a strong case against product confusion as well.
Understanding their concerns, I collaborated with cross-functional teams within RaiseMe to strengthen my case in the hopes of curbing doubts of missing our August deadline, and helping stakeholders understand the impact product confusion has on the success of our platform:
After sharing these findings and the qualitative data I had already gathered, I was able to convince stakeholders that product confusion around how to earn and receive micro-scholarships was a problem worth solving in our MVP. The responsibility was on me to identify solutions that would be impactful for students and increase our priority KPIs...
One of the sources that were most likely contributing to product confusion was our homepage at the time, which provided an overly simplified illustration of how RaiseMe works:
In my interviewers with teachers and counselors, they frequently mentioned the hands-on approach they took to help their students understand RaiseMe. I thought that was a fascinating insight and held brainstorms with critical stakeholders in support, product, and outreach to outline answers to the fundamental questions a student might have in their first few moments using our new iOS app:
Through this collaboration of different minds, we developed education slides that every student would see after downloading RaiseMe from the Apple App Store:
Another challenge we saw with our homepage was the use of static illustrations communicating unfamiliar concepts. We thought it would be more compelling to use animations in hopes that it would make RaiseMe easier to understand without over complicating things. I pulled in our Sr. Product Designer, Rachel Schmitz, who's an unbelievable illustrator and animator to help bring this idea into life.
We looked at several prototyping tools such as Framer, Principle, and Facebook Keyframes for starters. Through more research, we landed on Airbnb's Lottie in which you build animations in Adobe After Effects that then export as JSON. Using Lottie resulted in a seamless translation between design and code with little trade-offs:
Another puzzling part of RaiseMe was the lack of onboarding provided to newly registered students. In the existing web product, after a student registers for RaiseMe, they're dropped in with no explanation or first steps to take. You can imagine how frustrating this can be, especially when RaiseMe is a new concept, and your users are barely adults.
I brought up the idea of introducing an onboarding flow to my product manager. My hypothesis was if we can show how to earn a micro-scholarships on RaiseMe, we would see more achievements added within their first few sessions. We decided to A/B test this hypothesis on the mobile web because it was the most comparable experience we had to a native app at the time:
A/B Testing & Results
In Test A (control), new students in this cohort experience the current four-step registration flow to have a baseline for our test.
In Test B (experiment), new students in this cohort would experience a new six-step onboarding flow after completing the four-step registration. Concern grew from stakeholders about the number of steps onboarding introduced. The test would allow us to learn a student's threshold for the number of steps they would go through before churning.
In running our A/B test, we reached statistical significance pretty quickly. We found that students in the new onboarding cohort added 1-3 achievements in their first session compared to our control, which showed 0-1 achievements added.
We went on to act on these learnings and immediately incorporated a new user onboarding flow into the app. However, for our MVP, we were under time and technical constraints as back-ended services and algorithm adjustments were needed to be able to accomplish evaluating students for micro-scholarships earlier in our funnel.
The education slides and new onboarding flow was going to help new students understand the value of RaiseMe. For existing students, their problem was the lack of awareness around the first action to take on RaiseMe: adding their high school achievements, e.g., courses, extracurriculars, test scores, etc. to earn micro-scholarships. We had a large percentage of students with no achievements added to RaiseMe, who ultimately churned.
In auditing the existing web product, my assumption was our primary action of adding achievements was not prominent enough. To improve this in our first iOS app, I explored navigation and entry points for adding achievements:
After considering everything from discoverability, accessibility, and scalability, I made the recommendation to go with a tabbed navigation approach with a primary call to action in the center. Pressing the call to action would reveal a sheet of available achievements a student can add on RaiseMe to earn micro-scholarships:
My rationale for going with this approach:
Until now, all the solutions have focused on helping students understand how RaiseMe works and how to earn micro-scholarships. The last problem was a lack of understanding on how to receive these micro-scholarships ultimately.
As a refresher, the micro-scholarships earned on RaiseMe are applied directly to a student's tuition after enrolling in a partner college or university. To guarantee these earnings are applied, students have to meet eligibility requirements and deadlines set by the schools midway senior year/12th grade. However, the design pattern used to indicate the various requirements were unclear, resulting in some students losing out on their earnings if not resolved in time.
It was devastating to hear these stories, and my goal was to ensure students using RaiseMe either on the web or iOS app were not losing their earnings because of unclear design. Working with the web product owner of this feature, we outlined the shortcomings of the existing design as well as identifying all the eligibility requirements that would be displayed to find potential risks and opportunities.
The result was a streamlined design that allowed for an explanation text so students and parents can understand how to address the requirements. I also used color to indicate the severity of the requirement as well as making them deep links that direct students to the solution or problem area when possible:
The design solution allowed us to develop one pattern that worked across web and mobile platforms to create consistency for students switching between the two.