2018 – current
A full UI/UX redesign of the Center for Open Science’s flagship product that supports open research and promotes collaboration.
User research
Information design
UI/UX design
Prototyping
User testing
Frontend design
Problem
Launched in 2012, the Open Science Framework was due for a UX-driven redesign for desktop, as well as optimization for mobile and tablet screens. With limited resources, however, the work could not interfere with ongoing engineering tasks and had to fit within a strict yearly budget. New initiatives were also in the pipeline, and the organization had to be deliberate about how they proceeded.
Solution
A phased redesign of the OSF, section by section over time. Because the redesign was to be divided into discrete projects, the process had to allow for future issues that were sure to arise. Instead of a fully imagined design system for OSF 2.0, more flexible design cheat sheets were created and refined as needed across projects.
Summary
The massive project started with a site audit. From there the team prioritized which sections to tackle first based on user feedback that most closely aligned with donor goals. An Atomic Design-like methodology was used for the cheat sheets to clarify elements like colors and typography before larger components were redesigned. As work moves from one project to the next over the course of several years, a running list of UI issues is being compiled to address as a separate and final project.
Mapping all of the OSF to identify sections, pages, and components that could be divided into separate projects.
A design system is a goal for when the redesign reaches a critical mass, but for now simplified cheat sheets are used to provide guidance to the dev team while also preserving UI redesign flexibility. Shown here are two examples of cheat sheets: link styles on the left, typography and iconography on the right. Both were built in UXPin, a prototyping tool that allows the dev team to interact with the design and export assets/CSS as needed.
Before
After
A recently completed project is the redesign of the OSF Files page. This is where users organize and share files related to their project. The old design’s default view had performance issues loading the full contents at once. The new design follows the model of popular cloud storage apps by loading only one level at a time. It also simplified the file list view by removing some of the metadata users rarely engaged with.
Before
After
The Files component appears on multiple pages throughout OSF. On Overview pages, the landing page for a project, the small component was the primary interface researchers used to manage their files. In addition to the confined real estate, the component’s learning curve was steep as several functions were revealed only by unintuitive clicks. The redesign made those functions more predictable with a green “Omni” button (a component being introduced throughout the OSF) and menu options for each item. A wider page facilitates drag and drop uploads, which is the primary way users add new files.
Before
After
The old design kept the file tree default visible in a sidebar. The new design opens files in a new tab to use the screen’s full real estate. It also puts information like revision history, tags, and file metadata in expand/collapse side panels.
Before
After (coming soon)
Related to the Files section redesign is a future project to clean up the Project Overview section. Several UI/UX decisions made in previous projects will culminate here. This includes a new sitewide top navigation bar, title banner, left navigation column, main content column, metadata right column, and a full width grid layout to replace the original Bootstrap framework.
Results
As of 2022, the redesign has completed UX work on five sections and engineering work on three. OSF’s mission to promote open science continues to show an increase in registered users and participation in collaborative research with files shared, projects registered, and preprints published. OSF’s unique users increased from just under 2M in 2019 to over 13M in 2021. In turn, COS’s fundraising efforts have doubled their revenue from roughly $5M in 2019 to an expected $10.5M in 2022.
