Zea Education
An online tutoring service that specializes in standardized tests, including SAT and ACT.
This project presents an approach to designing an official website for the tutoring service, focusing on the sign-up flow.
Context
Zea Education is an online tutoring service for high school students and those studying for standardized tests.
Right now, the business only has an online presence through Facebook. Therefore, the client wants to create a website to streamline the sign-up process, as well as potentially utilize this website as its own online learning platform with video lectures.
Goals
Zea Education wants to cultivate a professional web presence.
At this stage, they want to prioritize the sign-up flow, focusing on the application, payment, and schedule pages based on 4 goals:
🗂
Show available courses and services
🤝
Establish credibility
and trust
🧭
Provide information about class structure
✨
Enhance brand identity through the website
Research
I did an Adjacent Industry Audit and a Competitive Audit to see industry standards and how competitors in the online tutoring space are representing themselves.
Adjacent Industry Audit
Varsity Tutors and Ivy Network Tutors are direct competitors that also offer online tutoring for standardized tests. They both show a variety of options for tutors, but their UX/UI has room for improvement. Besides, both sign-up processes are not intuitive.
Duolingo is also in the online learning space but offers language lessons. While it is not Zea’s direct competitor, the app has strong branding and a fairly straightforward sign-up flow, that Zea can reference.
Competitive Audit
I also looked at some good examples of application, payment, and schedule pages to reference and incorporate into the design process in the next step.
Some of the patterns I notice
Form/Application
Progress Bar
Question Fields
Payment
Billing Structure
Projected Payment
Schedule
Calendar view
Product tile
Ideation
I came up with a user flow with 2 variations, and divergent sketches for designs and user testing.
For the three focused areas, I listed out some main criteria to include in the design:
Application: Rename to intake form and breakdown information into multiple pages
Schedule: Provide more information about tutors and subjects, and present multiple options on the page
Payment: Place before confirmation and provide payment summary and options
User Flows
I want to test if the placement of account creation affects the sign-up rate.
Divergent Sketches
With these criteria in mind, I sketched some directions to explore different ways to show the progress bar for the application, a calendar view and tutor selection for scheduling, and the payment page.
Lofi Prototype
After consolidating the sketches, I designed a low-fidelity prototype with 2 flows:
Account Creation (Sign-Up Page) is required before filling out the Intake Form.
Account Creation (Sign-Up Pop-Up) is required before Payment.
A prototype walkthrough video for flow 2
User Testing
I tested the 2 flows with 4 students from the age of 17 to 25 that are in Zea’s target user group.
The hypothesis to test is that the landing page with clear information incentivizes users to sign up.
Affinity Map
Based on the interview and testing notes, I organized the insights into an affinity map. The two themes that provide the most opportunities are UX/UI/Interaction and Promoting the free class.
Key Takeaways
People like the free lessons - Zea’s business model offers the first class for free to encourage students to try the service and increase sign-ups.
If enough information is provided, on top of the free lessons, people don’t mind when to sign up.
Break information into smaller chunks to reduce cognitive load (especially during course selection).
People prefer tutor qualification (education, experience) to testimony.
Secure Checkout - people like to see logos and secure signs to have trust in the checkout process.
⏩ The hypothesis of the landing page is true.
Synthesis
After consolidating the key takeaways, I brainstormed the approach based on user feedback with 4 goals in mind:
🍫
Break down information into smaller chunks
🚪
Provide multiple
entry points to help decision-making
✨
Add more branding and visual identities
📋
Add more information and instructions
Branding
I’m using Zea’s predefined branding. So far, the client only has brand colors and logos.
Iterations
Based on initial user feedback from the lo-fi prototype, I made updates and went through more user testing.
Landing Page
Sign Up Page
Course Selection Page
Scheduling Page
Final Design
After a couple more rounds of user testing, here is the final prototype!
Updates
After working in the education industry for 8 years, the client decided to put this business on hold as they venture to other businesses. Hopefully, we can work on this project again in the future!