MongoDB.(re)design
I led the redesign for mongodb.design—the homepage page for MongoDB's design system
Overview
mongodb.design serves as hub for MongoDB designers and engineers to look up components, read documentation, and find source code. The site was designed in 2020, before MongoDB and LeafyGreen's brand refresh. We had the opportunity to redesign the website to reflect our new visual design, as well as modernize the site to make the experience better for designers and engineers.
Search explorations
One problem that our users faced was difficulty finding the component they needed. I spent time prototyping explorations for the search experience to make that process easier.
Breadcrumb -> component name, too noisy to scan easily
After several explorations, we landed on this design with component name, description, and thumbnail. The component name+thumbnail was enough to help users pinpoint most components, and the description helped in situations where users were looking through similar components.
Final search prototype
Sidenav
I explored different options and narrowed it down to a top nav, a custom sidenav, and the LeafyGreen sidenav component. Although the custom sidenav design was well received internally, we decided to use our actual component to be good stewards of our design system.
Visual explorations
I explored different layouts for our homepage using "blobs" from our visual design team.
After a couple cycles of iterations, we decided to move towards highlighting our components, foundations, and resources pages. I designed these cards for to use for our final look.
