Monterey Institute for Research in Astronomy

The people at MIRA, The Monterey Institute for Research in Astronomy, conduct research and educate the public with the assistance of their website. I came across the site and observed its age, wondering how I might help them realize its potential as a scientific and educational resource.

Poorly organized & formatted website that does not scale for mobile device.
MIRA’s original website

I interviewed people there who ran and visited the site to understand for who and how it is used; I did not want to come in throwing around buckets of paint and calling it a day, I needed to make things actually better for the people who need to use it.

Myself and stakeholders meeting.
Discussing how peer websites meet their users’ needs

After the interviewing and doing more research on their peers and users, I diagnosed MIRA’s specific issues and began experimenting with solutions that better serve the needs of their staff and visitors. Below you can follow the process I took to discover a design that delights both and will allow MIRA to meet their needs for a long time to come.

drawing of a child.

Maricia (She/her)

Student; 9 3/4 years old

Maricia is a third grader with boundless curiosity and a need to explore. With the help of her grandfather, Willis, she found MIRA and the sizable treasure trove of information it contains about the cosmos we all share.

Goals:

  • Be entertained
  • To know
  • Be respected
A persona crafted from research, for keeping the user always in mind

Problems

  • Visitors lost, stuck, unaware
  • Visitor goals not being met
  • Staff resources not being noticed

Solution Needs

  • Curiosity-friendly navigation
  • Showcase staff materials
  • Expose timely information

Wireframe sketches and high-fidelity interactive prototype.
Testing information hierarchy and interactivity
prototype homepage design annotations. search bar is prominent in global navigation. "search anything from anywhere, instantly available if you already know what you're looking for". Article title link is first content on homepage. "Hooks attention with random article, good way to jump in". Upcoming Events section is next on page. "Pulls urgent info to surface".
different visual options for the website design, testing things like color, materials, and fonts.
Ideations on visual appeal and functionality
Prototype global navigation mobile menu that partially obscures the page the user is currently on. Global navigation menu background color. "Less saturated purple holds interest without overpowering like the blue did". The global navigation menu has been expanded into an overlay on top of the current page the user is on, part of the screen space is reserved for a view of the page below with a frosted blur effect applied on top. "Frosting keeps sense of place without competing with the navigation".
Explains design thinking behind the prototype

Play around with the prototype below, putting yourself in Maricia’s place. To fulfill her needs of knowledge and entertainment, find an entry that tells her something about the universe.