Skyportal

Restructuring an astronomy analytics platform to improve accessibility among astronomers.

Team Members

Darlene Chen

Angela Lee

Arina Miyadi

Role

Product Design Lead

Timeline

Oct 2023 - Feb 2024

Skills

Prototyping

Visual Design

Interaction Design

Communication

Project Management

Project Type

Client Work

OVERVIEW

What is Skyportal and what do we set to accomplish for them?

Skyportal is a developing web application that records and tracks astronomical data on infrastructure to help analyzing astronomy be more accessible among academia.

I was in charge of the redesign as lead designer of my team of 4 with the product design timeline and initiating meetings with the Skyportal developers.

First meeting with Skyportal’s developers, they provided us with a user walkthrough to help my team gain insight on the current flow. The developers felt many aspects of Skyportal’s current interface weren’t visually optimized and at times confusing. Thus, our given task was to identify Skyportal’s most used pages for a visual reconstruction of its existing functions.

Skyportal’s developers giving us a walkthrough

While my team and I weren’t the most familiar with astronomy datasets, we immediately knew during the walkthrough that Skyportal’s UI didn’t provide clear guidance for analyzing present-day astronomy. Skyportal’s cluttered web interface contrasted their wishes to break the walls of astronomy data down, and it was my team’s responsibility to assist Skyportal in designing a web platform with clear, concise data and information.

USER RESEARCH AND FINDINGS

Examining where Skyportal faltered

My team distributed user surveys with Skyportal to identify users’ most commonly used pages and overall habits. Collecting 30+ surveys, we focused on these aspects and statistics for an intrateam critique session to analyze these identified pages:

CANDIDATES PAGE

84% of users always check their Candidates page

HOWEVER, the Candidates page’s horizontal layout requires excessive scrolling to access certain functionalities.

SOURCES PAGE

89.5% of users always check their Sources page

HOWEVER, the Sources Page also lacks efficient usage of space which makes it difficult for users to focus on needed elements.

NAVIGATION

65% of users use Skyportal on the daily

HOWEVER, Skyportal’s navigation bar lacks clear page indicators for and informational hierarchy which leads to interface confusion.

Our research ultimately revealed that our main priority for redesigning Skyportal was establishing a clear, efficient visual hierarchy for the Sources and Candidates Page.

COMPETITIVE ANALYSIS

Studying a ‘Clean Visual Hierarchy’

We conducted competitive analysis for 3 modern applications that successfully compile lots of educative information into clean interfaces to see how Skyportal can be improved:

Reviewing the takeaways and design choices for each company, we utilized them to finalize our plan to create a clean, concise interface.

TAKEAWAYS

The plan for a clear visual hierarchy

We planned to construct a more visually communicative Skyportal by prioritizing 3 elements:

CONTRASTING COLORS

Skyportal’s pages have lots of information that users can easily miss or be overwhelmed by. Applying color can help certain elements draw attention. To support this vision, we developed new color kits with contrasting accents to differentiate information.

GROUPING INFORMATION

Skyportal’s information architecture was structured in a hectic manner, making it difficult for users to track certain information. We plan to strategically group information together to improve user understanding.

CONSISTENT TYPOGRAPHY

Some of Skyportal’s pages contained varying font sizes that made it unclear what information a user should prioritize. Our solution would have clear size guidelines for the body text, subheaders, and headers.

LO-FI

Creating the Optimal Candidates/Sources Experience

With our design approach solidified, we developed our first iterations of the Candidates and Sources page.

We first modified the navigation bar to encourage simple viewing through:

  • The ability to minimize the navigation bar

  • Separating the navigation bar tabs into category groups

  • Highlighting what tab a user is on in the navigation bars

For the Candidates page, we condensed all functions to be displayed in a single viewing by gridding subtab’s functions together. Users would no longer need to scroll down for tasks like checking source data or selecting a program.

For the Sources page, we minimized white space by rearranging functions and tidied up the table functions by condensing them into one dropdown menu.

MID-FI

Finalizing the Skyportal Flow

Our mid-fis moved forward with all our planned ideas while also grouping the requested functions into switchable tabs. We also proposed blue color palettes through page samples to the developers. Option A was chosen for its muted, serious tone that aligned with Skyportal’s academic mission.

Option A

Option B

Option C

PROTOTYPING (HI-FI)

Finalizing the Skyportal Flow

After the foundational design of the Sources and Candidates page was finalized, we then designed the rest of the user flow. We fleshed out test cases such as clicking on a source or switching between the different subtabs, and from here, our work was finished. Here is the final iterations we designed for Skyportal.

Intuitive navigation and a seamless display of candidates.

Our efficient, user-friendly sources layout

IMPACT

Successfully Achieving our Astronnomical Vision

As of now, my team’s high fidelity prototypes are being developed by Skyportal! They’ve recently implemented our Candidates page onto the official platform and are currently working on our Sources page. It’s been amazing seeing our vision come to life. :)

Below is the shipped rendition of the Candidates page and navigation bar, with some adjustments made with the developer’s astronomical knowledge.

REFLECTION

Looking back on Skyportal and beyond

Skyportal was my first design project where I truly felt out of my comfort zone. My team and I didn’t have much knowledge in the field of astronomy datasets. However, we pushed through and applied our design skills of efficient white space and info hierarchy to emphasize Skyportal’s vision streamlining the distribution of astronomy data.

Redesigning Skyportal was a reminder that the fundamentals of product design can be universally applied to fields beyond my initial expertise. As a sendoff, I just want to thank my team for making the redesign process as amazing as it was, and thank you for reading!

Check out my other work here!

Leading the modernization of UC Berkeley’s most popular gaming club’s site.

USER EXPERIENCE • WEB • CLIENT WORK