Bloom

  • Date

    Feb 2024 - Aug 2024

  • Type

    Full Stack, UI/UX Design

  • Languages

    JavaScript

  • Tools

    React.js, Next.js, Material UI, Figma

  • Live Version

    https://bloom.crso.unc.edu/ (only available to UNC and UNC-Health accounts)

Bloom is an award-winning process mapping web application that assists research teams in understanding and navigating the steps required to initiate clinical research studies (Innovation Challenge at the 2023 MAGI East Clinical Research Conference). I overhauled the application by migrating from Create React App to Next.js and redesigning the user interface.

CRA to Next.js

Since Create React App (CRA) was no longer the recommended approach for building React applications, I proposed migrating Bloom to the Next.js framework. We considered using Vite instead, as it offered an easier migration path for the existing app. However, we ultimately chose Next.js due to its Server-Side Rendering (SSR) capabilities, which greatly enhance performance and reduce initial load times.

Theming

To ensure a cohesive UI design, I used Material UI (MUI) for theme customization. The MUI theme provider enables seamless transitions between themes. I created both a default theme and an accessibility-focused theme, incorporating color choices that are more accommodating for color blind users.

Accessibility Theme Toggle

Design

Another objective of this overhaul is to improve the user experience, with the aim of retaining more active users in the application.

My Studies Page

The initial design presented information scattered across the table, making navigation overwhelming for users. To improve clarity, I relocated non-essential details, like the study description and collaborators, to a dedicated "Study Details" page. Additionally, I nested the delete process map button under an ellipsis icon to prevent accidental clicks.

Study Table Before RedesignStudy Table After Redesign

Process Map Page

The left navigation bar took up too much space, so I relocated it to the top of the page to free up horizontal space. Additionally, I introduced two side panels for the checklist and node descriptions, which can overlay the process map. Users can now zoom in and out of the process map using the mouse scroll, eliminating the need to scroll the entire page to adjust their view.

Process Map Before RedesignProcess Map After Redesign

Metrics

30% increase in active users

Bon Voyage & Far