현지

JOHANNA

현지

Modern Research Data Portal

Making it easier for researchers to access scientific datasets and transfer datasets through customizable data portals.

Team

Johanna Lee
James Kafader - Supervisor
Ken Miller - Client Point of Contact

DELIVERABLES

UX Prototype & Full Product Development

Year

Summer 2024

Role

UX Designer & Front End Engineer

I Introductions

Modern Research Data Portal (MRDP)

Traditional scientific data portals are struggling to keep pace with the massive growth in research datasets, leading to scalability and performance issues. Researchers face challenges in searching, accessing, and transferring large volumes of data, slowing down scientific progress. The Modern Research Data Portal (MRDP) addresses these limitations, by leveraging relevant technology, enabling scientists to effectively search.

PROBLEM

The current MRDP suffers from a complex and user-unfriendly interface and customization process, hindering efficient data portal management.

Empower researchers to efficiently manage data transfers and access datasets by improving the navigation and usability of MRDP

II Research

UX Audit

	About Page (Informal Landing Page) No proper landing page, lacking immediate user orientation Defines key components such as Terra and Globus Search Strong hierarchical organization
	Transfer Page The navigation is complicated and unclear, and the file browser's functionality was unreliable Limitation in scalability Visually unappealing
	Search Page Organized file browsing system Shows a maximum of only 100 results across 10 pages Unclear how transfer and search page are relevant

Competitor Research

I conducted competitive analysis, exploring numerous software tool landing pages and competitor interfaces. I then synthesized my findings into a FigJam brainstorm, visually organizing key insights.

Figjam Board

Interview with Client Point of Contact

In a meeting with our client point of contact, we discussed the current user pain points of MRDP.

Key Takeaways
MRDP needs a proper landing page dedicated to customizable content catered to host institution
The data search functionality can be removed for now to simplify userflow.
Implement customization entry points to allow research institutions to add custom pages (e.g., "Our Team" or institution-specific pages) using Django template functionality.
Needs a more intuitive transfer page(s) user flow.

III Design

Paper Sketches

I determined that the essential user needs of MRDP could be addressed through two pivotal pages, distilling the user flow to the landing page and the transfer page.

Landing Page:
How can we make the landing page a central hub to guide users and allow customization for host institutions?
Transfer Page:
How can we create a more intuitive and efficient way to input data transfer details?

Low-fidelity Mockups

I translated my paper mockups to low-fidelity wireframes.

Landing Page	Transfer Page
I crafted a landing page to incorporate: Landing Frame with summary and login entry point Instruction Section with step-by-step guide Featured Datasets Section to highlight dataset collections from host research institution Customization section e.g., team or institution introductions	By merging the two transfer pages, I guide the user to find the source, destination, and datasets to transfer. Source and destination search expands so that users can choose and scroll through Search engine allows users to filter through datasets Once selected, the dataset should be added to the transfer queue

Student Poster Session

Midway through my internship, I had the opportunity to present my findings and mockups to the Lawrence Berkeley National Lab Computing Sciences Area team. I learned how to adapt my storytelling to different audiences and was able to gain feedback on the overall user flow.

High-fidelity Mockups

Following usability testing and client approval, I developed a high-fidelity prototype with design changes based on feedback. This prototype featured ESNet branding and tailored content to illustrate example host institution customization.

IV Reflection

Target Audience

My project aimed to design for a niche group of lab researchers, shifting my focus from previous GenZ targeting design projects. Another focus was creating templates that future developers could easily customize, ensuring that my design was both user-friendly for end-users and adaptable for developers. This experience broadened my perspective on user experience design and highlighted the importance of balancing technical requirements with usability.

Next Steps

In the next phase of development and deployment, I will focus on implementing search capabilities within MRDP, a necessary feature for a current and user-friendly data portal.

Mid-Fidelity	High-Fidelity

Poster session feedback led to a visual redesign of the landing frame, replacing the redundant logo and illustration with a branded banner and cleaner text layout.

Per client point of contact feedback, I replaced the static collection list with interactive elements for direct transfer initiation, and enlarged the transfer button for better user guidance.

The instruction section and customization entry point were well-received. I maintained the content while applying ESnet's branding and design system in the high-fidelity mockups, using 'Meet the Team' as an example host customization content.

After discussions with my supervisor (also the engineer on this project), we drastically revised the transfer page, shifting from a detailed input form to a source collection overview linking directly to Globus. This simplification reduced engineering complexity and better aligned MRDP with its primary function: showcasing dataset collections.