ReproServer UX DESIGN

TEAM: Product managers, Software engineers

ROLE: UX/UI Design, User Research, Prototyping, User Testing, Web Design

TIMELINE: 15 weeks

CLIENT: ReproServer simplifies the replication of research by allowing users to unpack ReproZip packages directly from their web browser, making it easier to share and recreate their work.

I was a solo designer working on this web application with a team of product managers and engineers.

The initial website that our engineers designed lacked usability for people who are not technically fluent, clear instructions for steps to take and things to input, and a clean and concise design. As a result, visitors struggle to find the information they need, leading to a high bounce rate and missed opportunities. Moving away from the old website required a ground-up rethinking of the way the system is structured, user flow, and information hierarchy.

THE PROBLEM

Simplify web research reproduction for all users, improve UX to boost engagement and retention, attract new users, and drive adoption by research institutions.

GOALS

BEFORE REDESIGN

This is what the initial website looked like. User feedback has highlighted challenges in usability and accessibility. It needed a complete rethinking and redesigning to make it user easy to use for users who are not technically fluent.

To make the web app work the way users want, we conducted four rounds of user testing with iterations based on feedback. These iterations were heavily informed by input from our primary user group, digital archivists. While these users are technically proficient, their insights highlighted that our initial designs were skewed towards our team's internal perspective, given our deep familiarity with the app's workflow. However, as we progressed through a series of iterations, we deconstructed the steps users needed to take, resulting in a more streamlined and user-friendly website that accommodates both technically proficient and non-technical users.

RESEARCH

We implemented the following design solutions based on our research and iterations:

  1. Streamlined step-by-step workflow: User testing revealed a common challenge where users struggled to navigate through the process. To address this, I restructured the platform, simplifying the user flow of uploading of .rpz file, manual or automated app recording, replaying the app, and result retrieval. Now, users are guided through one task per page, ensuring a clear and focused experience

  2. Example research data: We added a dedicated 'Use Example Data' feature, allowing users to explore ReproServer even without an initial .rpz file. This enhancement simplifies access for new users who want to experiment and familiarize themselves with the platform.

  3. Enhanced Information Clarity & Accessibility: Through the development of a cohesive design system and a user-centric approach to organizing complex technical information, ReproServer becomes more user-friendly and intuitive, ensuring a smoother user experience.

THE PROCESS

USER FLOW

FINAL DESIGNS

Simplified and clear text

One action per page

Minimalistic and intuitive design

Clear Information Structure:
A unanimous 100% of research participants reported that the redesigned structure made it abundantly clear what actions they needed to take and why.

Enhanced trust:
Initially, participants expressed doubts about the safety of uploading confidential files to ReproServer. However, with the final professional and well-structured website, all participants affirmed their trust in the platform for their research needs.

IMPACT

The impact of this redesign was multi-faceted and instrumental in reshaping the user experience for ReproServer:

  • Enhanced Usability: The streamlined step-by-step workflow, one-action-per-page approach, and a minimalist design significantly improved usability. Users found it easier to navigate the platform, which reduced confusion and frustration.

  • Improved Accessibility: The introduction of an "Use Example Data" feature allowed new users to experiment with ReproServer without an initial .rpz file, thereby lowering the barrier to entry for new users and making the platform more accessible.

  • Clarity and Trust: The redesign made complex technical information more user-friendly, and users unanimously reported clarity about the actions they needed to take. This clarity, coupled with the professional and well-structured website, enhanced users' trust in ReproServer, particularly regarding the security of their confidential files.

  • User Confidence: Users expressed increased confidence in using ReproServer, partly due to their improved understanding of the platform and the simplified workflow. This boosted user engagement and satisfaction.

  • User Uptake: The improvements attracted new users, as the platform became more appealing to those who were initially deterred by its complexity. As a result, user retention increased.