Visualizing Astronomical Research Data
Cosmos & Canvas - Visualizing Astronomical Research Data
All Images are courtesy of Professor Jayanne English, Member of the Order of Canada
Client
Professor Jayanne English, (CM)
Timeline
2021-2023 including additions
Summary:
The client for this site design is a Professor at the University of Manitoba, specializing in astrophotography. In Septemper 2021. After publishing new images and articles, NASA requested Professor Jayanne English, (CM) move her website from Google Sites to Wordpress where NASA believed she would have more of an online presence to create a space that consolidated their work. I was hired to own this project from initial concept through to implementation, functioning as a Researcher, Information Architect, and UI/UX Designer
Concept: Effectively curate work in astrophotography for the media, academic institutions, and for laypeople seeking public education. My primary task was to design a scalable site to curate existing images and make spaces for new releases.
Approach: Determine an engaging layout that focuses on the visual representation of astronomical insights and the curation of images, press releases, and the client’s work in the media. It was important to consolidate work from across the web to organize a sitemap that was scalable and adaptable to new research the client produced.
Persona
The primary viewership of this website are media outlets, astronomy societies or institutions, and universities. However, the client stressed that they wanted the website to be accessible to the public and anyone interested in astronomy. Therefore, multiple personas had to be understood: the academics and the laypeople or public.
Practices
When the client decided they wanted the website to target the public and anyone curious they created a persona that cast a wide net. However, they still wanted the images categorized by data focus.
Gathering these needs and requirements allowed me to focus on user flow, the hierarchy, and basic navigation principles for the interface. Conducting frequent cognitive walkthroughs revealed user opinions and challenges as well as the clients high priority of avoiding a "corporate" look and feel.
Design Challenge 1 - Layout
Initially the client wanted a single page website using a grid layout for the images. I generated a mockup of that product as well as a list view that linked to new pages.
Research insights from interviews and cognitive walkthroughs helped my client empathize with pain points such as scrolling and wayfinding while assisting me further in layout development.
Layout Lifecycle
Single Page List View Prototype
Horizontal Navigation Prototype
These layout iterations impacted a high priority "All Images" page where a grid layout was the solution to economizing space while providing a full view of multiple images:
Atomic Design System
With a background in fine arts, my client had a detailed vision of the aesthetics. After choosing a layout, typography and colour were decided collaboratively - particularly the value gradient used across the homepage buttons and basic elements that construct the design language as a whole.
Part way through, the stakeholder decided archives of past imaging needed to be added to ensure they stay available online.
Combining external and internal links ensured scalability and allowed both academics and the public to find relevant links. Mapping site content organized information and assisted the client in envisioning the product. Adding anchor links aids access to this extra layer of content; explore the sitemap in detail here.