To showcase the strength of our design capabilities and to practice what we preach, we’ve launched a fresh DOOR3 website using our new in-house design system roadmap.
After having crafted similar design systems for numerous clients, we wanted to enjoy the same benefits. We put together a set of reusable, modular components and a comprehensive visual language to guide our design process—ensuring consistency, scalability, and the easy implementation of future updates.
The step-by-step process to rebuild a website with the DOOR3 design system roadmap:
We began by gathering reference materials and studying the websites of the leading software and design agencies. We cast a wide net and documented our findings in order to help us understand how our vision fits into the contemporary context.
Before starting on the website redesign, we took the opportunity to update our company branding. We created the DOOR3 Brand Book to set the standards and guidelines used throughout the company for all digital and print assets, including social media, marketing materials, and pitch decks.
We wanted to keep the familiar personality of our brand — clean and sharp, with a deep reserve of technological expertise — while establishing a more contemporary feel that would highlight our design capabilities.
We chose a new font pairing (PT Serif and Public Sans), generated an updated type scale, created a more vibrant color palette centered around our new shade of primary blue, and produced a whole new set of illustrations.
The style definitions we set in the Brand Book provided the foundation for the new site and established the standards for all of our communications materials moving forward.
After the Brand Book was completed, we performed a comprehensive content and UX audit of the current site—identifying all the different content sections, analyzing the structure, deciding what to keep, what to update, and what was no longer relevant. Once we’d identified all of the different patterns and layers that were needed, we were ready to begin creating the design system.
As an extension of the new Brand Book and our audit findings, we built a comprehensive design system in Figma that included all of the guidelines, components, and patterns that we’d need to start designing new pages for the site.
Adhering to the principles of atomic design, we created a design library from the ground up with scalable, adaptive components to maintain consistency and ensure that future changes could be easily incorporated and implemented.
Once we had our component library, it was a simple task to begin redesigning our pages in Figma. Using the old site as a reference, we created each page using the elements of our design system. As we worked, we continued to iterate on and expand our component library, easily keeping our assets in sync across the whole project. Once the pages were complete and approved, we handed them off to the development team to be realized in code.
The new site launched on Friday, July 22. Because of the design system roadmap, we were able to easily coordinate the efforts of multiple designers working in tandem—rapidly creating new pages, staying in sync with the development team, all with greater efficiency and fewer headaches.
We’re proud to share the work we’ve done, and we believe that the new site is a reflection of who we are and the direction we’re headed. We’re a leading software development company with an eye for excellent design — empathetic, purposeful, and pragmatic.
Enterprise Design System: All the Basics You Need to Know Creating consistency in branding and content across the net is a daunting task for many enterprises. Moreover, the pace of...
“Our clients are confused and complain to us.” “The website is frustratingly slow.” “And, it looks dated.” “While our competitors look modern and rank higher.” “We are losing business!” Businesses...
Our old friend Lee Azzarello joins Jonathan Blessing and Liz Flyntz for an episode of D3TV! Back in the olden days of 2014- 2016 or so Lee has worked with...