UX Research & Strategy
Information Architecture
UX Writing
UI Design
Visual Identity
Over the course of my 10-week internship at NASA Jet Propulsion Laboratory, I was the sole Design Lead tasked with scaling and growing PIXLISE, a revolutionary data analysis tool used by NASA geoscientists to search for life on Mars. I helped make this tool accessible to scientists on our home planet with a public communications strategy and a research-informed website experience, currently in implementation.
Summer 2022 - Present
This was a solo project completed on Figma, with close collaboration with NASA JPL’s PIXLISE & PIXL Team. Check out my final report for an in-depth look at my summer internship. 

Upon extension of my internship, I am working with the team to adapt my design in support of implementation and to design a trial experience for prospective and returning PIXLISE users.




FINAL DESIGN
 






CONTEXT


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︎︎︎
PIXLISE’s current site︎︎︎




PROBLEM




MY MISSION





PROCESS

I embraced a custom UX research, synthesis, and design process across the duration of my internship.





RESEARCH + SYNTHESIS

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.


INFORMATION ARCHITECTURE
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.









The final feature heirarchy table includes six 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.






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.




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

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.





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
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 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!









HI-FI DESIGN

For my final presentation, I presented an interactive Figma prototype of the high-fidelity website design! Here are some standout interactions:



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.




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~



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! :)







© ELYSHA TSAI 2023