Earth and Space Research

UI | UX | REDESIGN | BRANDING | PAGE CREATION

A full website redesign and branding overhaul for a nonprofit science institute partnered with NASA, aimed at boosting sponsor engagement and visitor retention.

ROLE

Prototyper, UX Interviewer, Brand Designer

TIMELINE

4 Months

TOOLS

Figma, Illustrator

Earth and Space Research Website Mockup

Interactive Prototype

Explore the final ESR redesign below

Prototype Live Site

About Earth and Space Research

Earth and Space Research is a nonprofit science research and study institute that partnered with NASA and other space and earth organizations. They cover a range of topics including oceanography and equatorial studies, as well as conduct education outreach activities, valuing education about earth and space.

The Problem

ESR's website was outdated and failing to attract its target audience of potential sponsors and science enthusiasts. Approximately 40% of visitors landed on the homepage and left without exploring further, while the remaining pages each received under 10% of traffic.

Main Issue: The website needed a complete redesign to encourage general users and potential sponsors to engage with ESR's research and mission.

Original Site Analysis

39.72%

Went to Homepage

10.32%

Went to Login Page

3.10%

Went to OSCAR Project Page

Research & Discovery

We conducted 30-minute interviews with 5 stakeholders, asking them to browse the site and provide feedback. Key insight: all participants wanted a dark background, so I built the color schemes around space and ice imagery from their own photography.

Initial Designs

Using one of the wireframes that the UX researcher has made, we both started refining the homepage file finalizing color palettes. Here are the initial pages:

Initial Design Frame 3
Initial Design Edited
Initial Design 2
Initial Design 3

Branding Packet

Branding Guidelines Cover
Branding Guidelines Page 1
Branding Guidelines Page 2
Branding Guidelines Page 3
Branding Guidelines Page 4
Branding Guidelines Page 5
Branding Guidelines Page 6
Branding Guidelines Page 7
Branding Guidelines Page 8
Branding Guidelines Page 9
Branding Guidelines Page 10
Branding Guidelines Page 11
Branding Guidelines Page 12
Branding Guidelines Page 13
Branding Guidelines Page 14
Branding Guidelines Page 15
View PDF Download PDF

Prototyping & Iterations

I prototyped for three rounds of usability testing, which helped stakeholders visualize changes and provide actionable feedback on navigation flow.

Prototype Interactions

Blue arrows showing unique interactions between pages to create a prototype similar to the real website