Education Webpage
Project
SaveTheWater.org aims to add an education section to its website
My Role
Design 12 web pages through wireframing, visual design, prototype, and user flow
Goal
Increase school program sign-up rate by providing enriched education resources
Team
3 Designers, 3 Engineers, 1 Project Manager, 1 UX writer
Pain Point
Overwhelming Content & Confusing Label
Solution
Information Architecture by Card Sorting
Improve Landing Page User Flow
A previous designer made a landing page wireframe. I modified the wireframe to improve the user flow of the landing page. The education section's landing page aims to get our target audience's (K-G8 and teachers) attention and guide them to the resources they want.
Micro Interaction
Users can choose Educator or Student on the landing page to see curated information.
Use flipping animation to make the trivia section more fun.
Floating player and active sound indicator is more user friendly
Slides with vivid illustrations are more age-appropriate for the target audience
Constraints and Challenges
Outdated Branding
The organization plans to rebrand the website, starting with the education web pages, which is my responsibility.
Inconsistent Design System
Another designer and I did an audit of the whole website and came up with a list of design inconsistencies and a lack of UX. While working on the education webpages design, I was also involved in the design system upgrade with the other two designers.
Personnel Shortage
The technology team had only three engineers and had to work on different projects for the whole organization. We removed some content to make it technologically feasible.
Tight Deadline
The webpages’ content came from the Education Department. Some were finished contents, and some contents were still in progress. The UX writer and I must gather their work and prioritize the content to meet the first release date.
Handoff
Streamlined and efficient handoff.
Validation
Design validation was conducted with five teachers and five students. Here are some data points.
Here are ideas for future improvement:
Add multiple program signup entry points to the website to increase the education program signup rate.
Consider adding a video of the program as social proof to build users' trust.