A new language for learning
Connecting education programs through clearer navigation and a visual language aligned with GitHub’s brand.
- My role
- Design lead · UI/UX · Art direction
- Team
- PM, engineering lead, illustrator
- Scope
- Site structure and program-page concepts
Website design · Information architecture · Art direction
Connect the offering.
Give it a shared language.
GitHub Education’s website had confusing navigation, dated visual content, and inconsistent experiences across pages. I restructured the sitemap, developed page designs, and guided the illustration direction.
I worked with a project manager, an engineering lead, and an illustrator. My contribution connects information architecture, UI/UX, and art direction.
Design the relationships
before the pages.
Navigation and page structure were considered alongside content and visual direction, so education programs could feel connected.
Bring the education offering into an understandable structure, then use that structure to guide the page experience.
A visual system
that belongs to the experience.
Characters.
Geometry.
Learning metaphors.
A consistent family of forms creates recognition across programs. Individual pages can emphasize different content while sharing a visual language.
Illustrations were developed with an illustrator. My contribution covered direction and integration into the website.
Bring the product into the visual story.
Interface imagery, characters, and geometric environments were explored together. The illustration direction carries the product context into the marketing experience, rather than existing as a separate decoration.
Explore the visual-direction studiesView original designs
Carry the system
across the program pages.
Original page concepts show how content hierarchy, illustration, and calls to action work together.
The page tells
one connected story.
The hero introduces the program, the following section explains its purpose, and cards organize ways to participate. The same visual vocabulary continues through the content.
A recognizable entry
Shared navigation and clear hero hierarchy connect the pages.
Program-specific emphasis
The visual language adapts to classroom, partner, and student content.
A structured next step
Content groups and calls to action make the offering easier to navigate.
View the complete page conceptsView original designs
A contribution that
continued to evolve.
Elements of this illustration direction can be seen on the current GitHub Education site, including corresponding characters and geometric forms in the partner section. The explorations here document my contribution; the website has continued to evolve beyond this work.