UX Research & Strategy
Information Architecture
UX Writing
UI Design
Visual Identity
Information Architecture
UX Writing
UI Design
Visual Identity
In 10 weeks, I worked cross-functionally with NASA scientists and developers to design a public communications strategy and website experience to make powerful Mars geoscience tools like PIXLISE accessible to scientists on Earth. Upon extension of my internship, I helped develop end-to-end product strategy and design a trial experience to onboard new users. My redesign is currently in implementation.
Update (April 2023): PIXLISE received the JPL’s Software of the Year Award!
Summer - Fall 2022
Role: Design Lead (UX Designer, UI/Visual Designer, Brand Designer, Content Designer)
Tool: Figma
Collaborators: PIXLISE, PIXL Instrument team (NASA Jet Propulsion Laboratory)
Tool: Figma
Collaborators: PIXLISE, PIXL Instrument team (NASA Jet Propulsion Laboratory)
Reimagining Mars geoscience software for the Earth scientist.
PIXLISE is a science analysis tool used by NASA scientists to search for life on Mars. It is due for a redesign.
Interact with the final prototype here.
Interact with the final prototype here.
1 — Refresh the landing page to better understand what PIXLISE stands for.
2 — Explore different product features by clicking on the informational cards.
3 — Investigate the three core pillars of the PIXLISE product.
4 — Explore PIXLISE tools in isolation and in context of the workspace.
Website before
CONTEXT
We’re bringing Mars science tools back to our home planet.
Mars 2020 is an ongoing NASA flagship mission to seek signs of ancient life and collect samples of rock on the Jezero Crater on the Red Planet. In July 2020, NASA launched the Perseverance rover to space. Perseverance is equipped with seven state-of-the-art science instruments to acquire information about Martian geology, atmosphere, environmental conditions, and potential biosignatures.
PIXLISE is a planetary geoscience tool designed to analyze XRF spectrospcopy data from the PIXL instrument. The robust tool was born out of a multi-year close collaboration between scientists, engineers, and designers from all over the world. This type of user-centered design is rare in the landscape of science tools.
The PIXLISE team is currently funded to advance Mars 2020. However, PIXLISE’s powerful interface is able to aid scientists beyond planetary discovery. PIXLISE is currently seeking to expand its user base to include Earth geoscientists to make strides in XRF science on our home planet.
Learn more about Mars 2020︎︎︎ and PIXL︎︎︎
The PIXLISE team is currently funded to advance Mars 2020. However, PIXLISE’s powerful interface is able to aid scientists beyond planetary discovery. PIXLISE is currently seeking to expand its user base to include Earth geoscientists to make strides in XRF science on our home planet.
Learn more about Mars 2020︎︎︎ and PIXL︎︎︎
PROBLEM
Built for Mars, PIXLISE was never intended for the Earth scientist.
The original PIXLISE site only contains the most basic information about the tool. Without intentional restructuring, the tool will never grow beyond its current user base.
Similar to the way PIXLISE was originally developed with a scientist-centered approach, we wanted to turn our attention to the ways we may appeal to Earth scientists.
Similar to the way PIXLISE was originally developed with a scientist-centered approach, we wanted to turn our attention to the ways we may appeal to Earth scientists.
MY MISSION
PROCESS
I embraced a custom UX research, synthesis, and design process across the duration of my internship.
RESEARCH + SYNTHESIS
Understanding the tool, user, business, and competition.
During the first five weeks, I built a foundation of knowledge about PIXLISE, its current user experience, and the mission of the team. I conducted four main types of research.
A custom Notion setup helped me stay organized with my research. I continuously updated and referenced this helpful repository of information throughout the project.
Despite feeling much more knowledgeable about the problem space than before, I felt blocked in ideation. I switched gears and started creating visual UX artifacts to effectively synthesize the research I had conducted.
Despite feeling much more knowledgeable about the problem space than before, I felt blocked in ideation. I switched gears and started creating visual UX artifacts to effectively synthesize the research I had conducted.
INFORMATION ARCHITECTURE
Translating research into accurate and considerate user flows.
One key requirement of the website is a detail-rich yet digestible organization of product feature information. In order to break down the complexity of PIXLISE features, I attempted to organize them in the form of a table.
UX Synthesis Artifact 01 — Features Hierarchy Table
The final feature heirarchy table includes seven levels of information, with varying levels of granularity. It translated gracefully into my first iteration of wireframes for the Landing and Product pages.
Just who are the users of this website? We started with “code-literate scientist,” then built nuance into target user groups with additional research and articulation of their journeys.
By the end of this stage, I was able to articulate who our target users are and their core actions on the website.
By the end of this stage, I was able to articulate who our target users are and their core actions on the website.
UX Synthesis Artifact 02 — User Groups and Journeys
Personas
Determining user journeys was instrumental in defining the call to action of the site: to direct users to explore PIXLISE’s features in the trial version.
This manifested in a recurring section at the bottom of every page and the main navigation. The deployment plan also translated into the content above-the-fold of the Resources page.
Thinking beyond product features and iterating on a grander site hierarchy afforded a comprehensive web experience that could adapt to the growing product.
UX Synthesis Artifact 03 — Site Map
Final Site Map
This process was quite messy. Attempting to concretize large amounts of very technical information involved a lot of shots in the dark to even move forward. It was very much an iterative process.
VISUAL IDENTITY
A visual system that reflects the product’s origins, current capabilities, and vision for the future.
The public site should be inspired by the product, but better yet, present a more expressive side of the PIXLISE brand.
Weeks of research helped me dissolve the essence of PIXLISE into four core values. It was important that these were reflected in the visual design.
Weeks of research helped me dissolve the essence of PIXLISE into four core values. It was important that these were reflected in the visual design.
I strived to communicate the sophistication and quality of this revolutionary tool, yet still stay grounded in the grassroots origins of the product. This comprehensive visual system reflects a take on PIXLISE’s brand and mission that considers the product and team in its past, present, and future states.
Final Visual System
The final visual system retains the dark look of the UI. We highlight with the same PIXLISE yellow spot color, but now with an additional poppy vermillion, inspired by PIXLISE’s Red Planet muse. The energetic type duo ties it all together: the geometric yet approachable sans serif Faktum and the clean monospace variation of GT America.
UI DESIGN
At last, the website comes together with an intentional combination of type, imagery, and interaction.
The extensive content hierarchy work established the fundamental structure for the UI, but a lot of design tweaks brought wireframes to fidelity.
At this point, I started considering layout and imagery in the communication of information.
At this point, I started considering layout and imagery in the communication of information.
At first, I relied solely on product screenshots to supplement the copywriting. In later iterations of wireframing, I found that simple illustrations helped communicate abstract ideas that literal photos could not. I also opted to use hi-res geography photos to bring context and atmosphere to the experience.
Screen Iterations per Page
Sketching is an integral part of my visual design practice. It helped a lot in the evolution of the landing page illustration communicating the abstract concept of real-time collaboration!
FINAL THOUGHTS
What I accomplished and next steps—
I’m satisfied with my ability to derive insights and innovate in the face of great ambiguity of our target user and high level of content complexity—and in that way, define the UX process for myself. Upon finishing my final presentation to the Mars 2020 PIXL science team, it was very gratifying to see scientists get excited about my process, and even more so, the impact of design on scientific inquiry. This project reinforced my belief in the importance of design and user-centered processes in communicating with people and its ability to create change.
The website is not finished. I look forward to continue systemizing design components to optimize implementation for the developer team. I’m also applying my knowledge from this summer to design the PIXLISE trial experience! Stay tuned~
I’m satisfied with my ability to derive insights and innovate in the face of great ambiguity of our target user and high level of content complexity—and in that way, define the UX process for myself. Upon finishing my final presentation to the Mars 2020 PIXL science team, it was very gratifying to see scientists get excited about my process, and even more so, the impact of design on scientific inquiry. This project reinforced my belief in the importance of design and user-centered processes in communicating with people and its ability to create change.
The website is not finished. I look forward to continue systemizing design components to optimize implementation for the developer team. I’m also applying my knowledge from this summer to design the PIXLISE trial experience! Stay tuned~
Visiting the lab for the final week of the internship + my final presentation!Key Learnings—
1 — Writing is Design
I’ve never done so much copywriting in my life. In this particular project, it was important to balance precision, concision, and accuracy with writing that’s more punchy and “marketable.” I loved that I was able to workshop, negotiate, and iterate on writing style in order to communicate most effectively. As a designer who cares deeply about good visual design, I can now say that I value written design to the same degree.
2 — Working with Ambiguity
This internship taught me that asking questions is simply not enough to derive insights. At around Week 4, I started creating visual artifacts for the team to respond to, and that was much more effective. Moving forward, I feel much more capable navigating tough UX problems, working with the strengths of a product team, and defining end-to-end product strategy. It is ok, and if anything, essential to take risks during the process!
3 — Design for Accessibility
Working closely with scientist users allowed me to contextualize my role as a designer in the field of science for the first time. Beyond creating delightful and visually-pleasing experiences for people, designers have the power to inform, grant access, and redefine boundaries in significant ways. This experience raised my standards in my consumption of design and continues to motivate me to use design for the greater good of people. This time, I designed to increase access to science tools. I’m excited to see how I may continue to design to contribute to the grander conversation of accessibility.
I am incredibly grateful to have been granted the trust of full autonomy over this ambitious project. I have much to learn, but I definitely got my hands dirty and was challenged critically, creatively, and collaboratively. Shoutout to all the incredible people at NASA JPL I had the privilege of meeting and working with! :)
1 — Writing is Design
I’ve never done so much copywriting in my life. In this particular project, it was important to balance precision, concision, and accuracy with writing that’s more punchy and “marketable.” I loved that I was able to workshop, negotiate, and iterate on writing style in order to communicate most effectively. As a designer who cares deeply about good visual design, I can now say that I value written design to the same degree.
2 — Working with Ambiguity
This internship taught me that asking questions is simply not enough to derive insights. At around Week 4, I started creating visual artifacts for the team to respond to, and that was much more effective. Moving forward, I feel much more capable navigating tough UX problems, working with the strengths of a product team, and defining end-to-end product strategy. It is ok, and if anything, essential to take risks during the process!
3 — Design for Accessibility
Working closely with scientist users allowed me to contextualize my role as a designer in the field of science for the first time. Beyond creating delightful and visually-pleasing experiences for people, designers have the power to inform, grant access, and redefine boundaries in significant ways. This experience raised my standards in my consumption of design and continues to motivate me to use design for the greater good of people. This time, I designed to increase access to science tools. I’m excited to see how I may continue to design to contribute to the grander conversation of accessibility.
I am incredibly grateful to have been granted the trust of full autonomy over this ambitious project. I have much to learn, but I definitely got my hands dirty and was challenged critically, creatively, and collaboratively. Shoutout to all the incredible people at NASA JPL I had the privilege of meeting and working with! :)
