Increasing registration rates & decreasing frustrations in navigation.
School of Wonder provides unique social-emotional curricula and nature-based programs for children.
The Problem
New users were spending too much time navigating the website while trying to register for a program with over 65% of them never making it past the home page. This caused major drop-off rates and faltering numbers in registration.
Our Solution
We decided to add clear buttons in the homepage that initiates registration and leads users in the right direction.
We also restructured and simplified the information and the architecture.
My Role
I was responsible for everything UX: interviews, user flows, wireframes, interviews and testing.
The team consisted of me-the UX Designer, the CEO (the stakeholder), a Product Manager and and a couple of Advisors. So I was aware that I would have to take full responsibility over my area of expertise.
The Problem
My initial task for this project was quite removed from the problem I would eventually face.
As their business began to grow, the School of Wonder reached out to me about rebranding and redesigning their website to elevate the overall look, and ultimately sales.
While interviewing parents (our users) about branding choices however, we discovered that branding was not the solution for increasing sales.
We stumbled upon some essential user experience issues within the homepage and throughout the registration process that we couldn’t ignore.
New parents were either:
spending too much time registering for a program
OR, giving up partway through
Design Process
“…around 65% of (new users) never made it past the home page.”
Research
After recognizing that our goal had changed, we made a second round of interviews to determine where new and returning users experienced confusion or even disinterest while navigating.
For New Users
For parents who were serious about registering, the average time it took to get from the homepage to the end of a program registration process was around 5-10 minutes, depending on whether they spent time to learn about the programs or not.
Around 1 out of those 5-10 minutes was spent locating the registration button. Within that one minute time frame, parents admitted that they have been distracted from the task, or lost interest.
Registration button hidden away under a separate programs tab
“The information about the programs was so scattered throughout the site that it (was) difficult to digest.”
For parents who were simply interested in learning more, on a monthly basis, around 65% of them never made it past the home page.
Based on website analysis, out of 800-900 people who visit the website every month, only about 25 registered for programs
For Returning Users
Returning parents who wanted to register their child in a program mostly accessed the website through mobile devices, and their main motivation was speed and efficiency when making the purchase.
They wanted to get to the sign up form fast and move through the whole process as quickly as possible.
If they wanted more information about the programs, we found that most of them preferred to email or search FAQs instead. They were loathe to read through the information presented on the site because the text was so dense that it became somewhat of a “too-long, didn’t-read” situation.
“…the text was so dense that it became somewhat of a ‘too long, didn’t read’ situation.”
Synthesizing the interviews and task flows further illuminated why parents were dropping off and/or frustrated.
There were a general lack of CTA buttons, which resulted in parents wandering around the website, looking for one.
If there was a button to “sign up”, it led to another button that read “more info” and then to another button that said “Register.” This is a rather unnecessarily long-winded way to purchase a service.
There was a lot of information that was presented, but not in any particular order or system. It was like random bits of knowledge was strewn about everywhere, like a messy room.
Site Map of Current State
Drawing out the site map below helped us understand what the users meant by ‘frustrations.’
*The red circles indicate pain points.
Overall, we established that the information architecture could be simplified.
Being presented with so much information for users to multitask through was overwhelming.
Some the pages were nestled under titles that did not belong.
For example, clicking “NYC Programs” gives users 5 different options including “Gift Cards” and “FAQs,” which is confusing because they are not programs.
Here is a zoomed in portion of the site map above.
Task Flow of Current State
The task flow (below) illustrates where the hiccups happen in the user journey to completing a program sign-up.
The red dots indicate the pain points and the Low Fidelity sketches were my initial thoughts on how things could be improved.
The first thing I noticed was the lack of a CTA button, or any kind of indicator that leads users to a the main destination, which is registering for a program.
It takes too many scrolls and clicks for the users to get from the homepage to the registration page.
Registration terminology is inconsistent. First it gets invites users to “Sign Up,” then is led to click a button that says “More Info,” which then has user click a “Register" button. Finally, the user is presented with either a log-in procedure or a form to fill, based on whether they are logged in or not.
The Solution
These are the potential solutions we decided would help solve our problems.
Add clear buttons in the homepage that initiates registration and leads users in the right direction.
Since The School of Wonder uses a third-party (Sawyer) for purchases, we couldn’t redesign the sign-up forms or the structure of the registration process itself, but we could reduce the number of clicks it took to get there.
The Process to High Fidelity Wireframes
Current State
The homepage lacks a Call to Action button, which leads the user to either scroll around for it or try to find what they need by clicking through the navigation bar.
High Fidelity Wireframes
The homepage lacks a Call to Action button, which leads the user to either scroll around for it or try to find what they need by clicking through the navigation bar.
Lofi Solution Sketch
Emphasized the CTA buttons.
Current State
The homepage lacks a Call to Action button, which leads the user to either scroll around for it or try to find what they need by clicking through the navigation bar.
High Fidelity Wireframes
Condensed the text to make it more readable.
Gave users an option to learn more on a separate page if they are interested.
Lofi Solution Sketch
Organized the IA so programs are clearly laid out.
Current State
The homepage lacks a Call to Action button, which leads the user to either scroll around for it or try to find what they need by clicking through the navigation bar.
High Fidelity Wireframes
Separated the two programs into 2 sections in tandem (This is the first section). Information is more digestible if presented one at a time. Also added buttons to lead users toward registration, which is the goal.
Lofi Solution Sketch
Camps are a huge part of this program, so gave it its own section.
Current State
Sign-up calendar is reached when a user clicks on a program.
Sign up calendar lies far down the page (see the red star).
Sign-Up buttons take the users down to the calendar, but all that info in the middle is bypassed.
Lofi Solution Sketches
Calendar should be the first thing users encounter on a ‘Calendar’ page.
This page is also where users would be led if they clicked on a CTA button in the home page.
High Fidelity Wireframes
Placed this calendar in a tab on the Nav menu called “Calendar,” so it’s conspicuous.
The calendar is also the first thing on the page, so users don’t have to look for it.
This is helpful not only for new users, who don’t want to wander needlessly through the website, but also for returning users, who just want to register quickly, with minimum scrolling.
I also grouped relevant features together and simplified this menu so users know exactly what they're getting when they click on a feature.
School of Wonder 2.0
A total of 8 users participated in usability testing. They were in-person, and I was able to observe their reactions to the features.
Some of the text was still TLDR
Only the most essential features were chosen to stay on the home page. The major changes include the addition of CTA buttons and simplification of the site map.
In the previous version, features like About and Programs didn't have their own spaces; instead, they were spread out over the expansive website (see sitemap).
In the 2.0 version, all information has its own category and page that they live in--for example, the education approach exists in the About tab and curriculum products exist in the Curriculum tab.
Design System
Branding
School of Wonder’s branding incorporates a lot of hand-drawn, whimsical elements. I developed most of the illustrations and visual language for their website and products:
Logos
Colors
Graphics
Font
Illustrations
FUTURE IMPACT
As a result of clarity and simplification made to the website, we expect a higher program registration rate within current users.
We also anticipate an increase in new users due to a simplified registration process as well as clarity of information throughout the entire site.