Project Overview
The Paesani Research Group at UC San Diego develops MBX, a many-body energy and force calculator used in molecular dynamics simulations. As the group’s work has expanded and gained visibility in computational chemistry and physics communities, it has become clear that MBX needed a dedicated, user-friendly web presence to support adoption, documentation, and engagement.
This case study outlines our design process for creating a professional, easy-to-navigate, and visually compelling website for MBX, designed to support researchers, lab members, and curious collaborators alike.
Problem
The MBX software was hosted on GitHub with scattered documentation and no dedicated website. New users found it difficult to learn about MBX, install it properly, or understand its applications. There was no centralized place for tutorials, version downloads, contributor recognition, or real-time updates. The lack of visual branding and structure made the platform feel inaccessible to newcomers.
Solution
The goal of this project was to design a centralized, professional, and maintainable website that reflects the research group’s credibility while making MBX more approachable and easier to use.
Design Process
Research & Competitive Analysis
To better understand the needs of the target users, we met with members of the Paesani Lab to identify key frustrations and desired features. We also reviewed websites of similar computational research tools and academic software projects such as LAMMPS, GROMACS, and CP2K.
These findings helped us define the design direction: a clean, readable interface with minimal friction, easy navigation, and modular content blocks.
Site Architecture & Content Strategy
Low Fidelity Wireframes
We began the design process by creating low-fidelity wireframes in Figma to establish the site’s foundational layout, content hierarchy, and user flow. These wireframes focused on clarity and usability, prioritizing scannable sections for tutorials, a simplified publication display, and a responsive team layout. We tested early versions of the navigation bar, sidebar components, and call-to-action buttons to refine the user experience before introducing visual styling.
Branding Guide
We wanted the visual identity of MBX to reflect both the credibility of an academic research group and the dynamic nature of molecular systems. Drawing from the Paesani Lab’s existing palette, we leaned into vibrant blues and deep reds to create a bold, energetic contrast that distinguished MBX from more conventional academic websites. To simulate the interaction of molecules, we incorporated a custom animated blob background, subtle and fluid, mimicking molecular motion and combination. Typography was chosen for high legibility in both body and code-based text.
High Fidelity Wireframes
The final interface combines professionalism with energy, balancing dense research information with inviting, user-friendly layouts. All primary content areas—tutorials, publications, and team profiles—were built using responsive, modular components for ease of scanning and long-term scalability. The homepage introduces MBX with a strong visual hierarchy and direct CTAs, while tutorials support multimedia embedding and markdown formatting. The publications and team pages feature dynamic filtering and grid-based layouts for quick access and reference. Throughout the site, the animated background and vivid color palette provide visual cohesion and brand identity, reinforcing MBX’s unique position in the computational science landscape.
Outcome & Reflection
The MBX website redesign successfully centralized all critical information about the project in a format that is both user-friendly and visually consistent with the values of the scientific community. It now serves as an onboarding resource for new collaborators, a reference hub for ongoing research, and a showcase of the lab’s impact.
Working on this project taught me how to balance clarity, scientific depth, and flexibility in design, especially when working on a platform that supports both new and highly experienced users. It also emphasized the importance of modularity for long-term content management.
