Earth & Space Research
UI | UX | REDESIGN | BRANDING | PAGE CREATION
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.
Methodology of Design
Design methodologies that I implemented in this redesign were:
01.
Design
Thinking
Empathize
Define
Ideate
Prototype
Test
02.
User-Centered
Design
Participatory Design
Iterative Redesign
Usability
Interviews
04.
Activity-Centered
Design
Interviews
Interaction focused
Navigational flow
Usability
Timeline
Stakeholder Concerns
Original Site Statistics
User Concerns & Branding
Archetypes and User Focus
Designer Scope
Competitive Analysis
Interviewing Stakeholders
Usability Studies
UX Findings
Wireframes
Initial Solutions and Testing
Usability Testing & Final Iterations
Concerns
The target audience/users stakeholders of ESR wanted are potential sponsors, businesses, or the general population that is interested in science research and findings. But on the original site, the main users that visited the sites were researchers and bots.
​
The homepage was the main concern because the site analysis showed that approximately 40% of individuals alone went to the homepage and the other pages were 10% or below which led me to believe that users that did come to the site eventually left.
​
Through IONOS' site analysis, however, we noted that the top 3 pages that were visited was the homepage, login page, and the OSCAR project. The stakeholders wanted more traffic on the site while making the navigation easier with a modern aesthetic.
​
So the main concerns and issue was that the website was not updated and wanted us, me as an Interface designer , a UX researcher, and a developer, to design and develop a modern website that encourages general users and potential sponsors to view the site.
Original Site Analysis
39.72% - Went to Homepage
10.32% - Went to Login Page
3.10% - Went to OSCAR Project Page
Most of the users accessed the site through Chrome:
- 44.63% just on Chrome
- 19% on Firefox
​
48.15% of users used Windows and users tended to view the site using a computer.
Interviews & Analysis
After defining stakeholder concerns and understand who the users were, we decided to gather information on the current site's navigation as well as what designs are realistic for developers to put on Squarespace. Gathering insights from similar websites that are earth or space research, I started conducting interviews to understand any initial ideas the participants would like to add to the site. With a 30 minute interview with 5 stakeholders, we asked them to browse each of the pages and give feedback on what they liked/disliked.
​
General Questions
Who is your target audience?
Who is the audience you want to reach out to?
What are the motivations and key values you want to emphasize on the site?
How would you like your target audience to view your site?
What are the current strengths and weaknesses of the website?
What are the top three pages you would like visited?
Would you like the website to be more interactive or static?
​
What colors or fonts do you prefer or would like to avoid on the pages?
What pages should we add to the site?
What sites similar to ESR do you like? What are the elements you like about it?
At the same time of testing usability, we also wanted to understand the visual brand and create a branding packet of the new design. Gathering images, I discussed with the team as well as the managers of ESR of what colors and texts work the best. While they wanted blue, I encouraged them to choose other colors and gave them options of what color palettes could be used on the site. Everyone that I interviewed wanted a dark background to the site so I based off the color schemes with this in mind taking inspiration of color from their photos and photos of space and ice:
Discussion Findings
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:
Branding Packet
Prototyping & Final Iterations
During the design process, I decided to prototype for the three sets of usability testing so users and stakeholders understand the changes being made to the site. This immensly helped with understanding more about the requirements users would like on the site to create a design that fits their navigation flow better.
I used blue arrows shown in the picture to create unique interactions between sites to create a prototype similar to the real website.
Here is the Figma file I worked on to create the final prototype. These show all the pages, in dev format, and the branding guideline. If you would like to see the final showcase, click the button below. If you would like to go to the site itself, go here: