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

  1. Outdated Branding

    The organization plans to rebrand the website, starting with the education web pages, which is my responsibility.

  2. 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.

  3. 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.

  4. 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.