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
Clear buttons were added in the homepage to give users a much more direct path to initiate the registration process.
The architecture and content of the website was also significantly restructured and simplified.
My Role
I was responsible for everything related to UX :
user interviews
user flows
wireframes
testing
The team consisted of a UX Designer, the CEO (the stakeholder), a Product Manager, and two Advisors.
The Design Process
-
Quantitative and qualitative interviews with 12 educators from diverse backgrounds
Affinity mapping to clarify user motivations and pain points
-
Determined pain points in current site map
Restructured site map to reflect solutions to pain points
-
Low/Mid/High fidelity wireframes for desktop and mobile
Iterating based on feedback
Prototypes
-
Conducted usability tests with 7 participants
Mapped out pain points
Iterated on areas based on user feedback
-
Worked with product team to create branding concepts based on company values and stories
Produced full design system with component library
Created hand drawn illustrations used throughout the website
-
Restructuring the information architecture and simplifying the content increased visits and engagement by over 110% during the month the new website was launched, and were sustained by at least 90% for the next 4 months.
The Problem
I was initially approached by the School of Wonder in regards to rebranding and redesigning their website. As their business had grown, they were seeking a way to elevate the overall look of the site with the hopes of boosting sales.
However, while performing initial user interviews that largely stemmed from a userbase of parents, it became apparent that branding was not the solution for increasing sales.
These initial interviews revealed that there were some essential user experience issues within the homepage itself and all throughout the program registration process.
New parents were either:
spending too much time registering for a program
giving up during the registration process as a result of frustration
“…around 65% of new users never made it past the home page.”
Research
For New Users
For parents who were serious about registering for a program, the average time it took to get from the homepage to the end of a program registration task was around 5-10 minutes. This range depended on whether or not they spent time to learn more about the programs themselves.
Approximately 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.
The Registration button was hidden away under a separate programs tab which made it hard to find.
Users claimed “The information about the programs was so scattered throughout the site that it was difficult to digest.”
Month-to-month user analytics revealed that around 65% of new users never made it past the home page.
Out of the average monthly 800-900 users visiting the website, only about 25 actually registered for programs
For Returning Users
Returning parents who wanted to register their child in a program mostly accessed the website through mobile devices. Their main priority was speed and efficiency when making the purchase.
Parents who simply wanted information about the programs mostly preferred to search FAQs or email the school itself rather than attempt to navigate the school’s website and read the overly lengthy program descriptions.
In regards to program descriptions, users claimed that 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 becoming frustrated with the process.
There was a general lack of CTA buttons, which resulted in users wandering around the website in search of them
“sign up” buttons led to other buttons that read “more info”, which then led to other buttons that said “register.” This arduous journey led to increased user frustration
Often an overwhelming amount of information was presented, and in a seemingly arbitrary manner
Site Map of Current State
Drawing out the site map below helped illustrate what the users meant by ‘frustrations’ in the program registration process
*The red circles indicate pain points.
Overall, it was determined that the information architecture could be simplified
Users were often overwhelmed in the face of so much information being presented to them
Some the pages were nestled under titles that did not belong:
For example, clicking “NYC Programs” gave users 5 different options including “Gift Cards” and “FAQs” which are not themselves 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.
Major Hiccups
Lack of a CTA button, or any kind of indicator that leads users to register 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.
Zoomed in shots of Task Flow Above
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.
Lofi Solution Sketch
Emphasized the CTA buttons.
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.
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.
Lofi Solution Sketch
Organized the IA so programs are clearly laid out.
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.
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.
Lofi Solution Sketch
Camps are a huge part of this program, so gave it its own section.
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.
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
Results
Visits to the website
Blue: Program Subscriptions
Green & Orange: 2 different Newsletter Sign-Ups
Restructuring the information architecture and simplifying the content increased visits to the website by over 110% during the month of its launch, and was sustained by at least 90% for the next 4 months. Program subscriptions and newsletter signups also increased, spiking during the month of launch.
We hope to see continued and sustained engagement as well as new growth as we continue to evolve the usability of the School of Wonder’s website.