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