A comprehensive website serving as the hub for design system libraries, guidelines, documentation, coded components, and all the resources a team needs to adopt a tailored design language system for a leading oil and gas company.
Skills: UI Design, UX Design, Information Architecture, Illustration, Logo Design
Tools: Figma
Timeframe: 8 weeks
*Logo and company name changed to protect client confidentiality
Clean, modern design
Drawing inspiration from Microsoft Fluent, Apple, and Oil Solution’s unique brand identity, we crafted a sleek and modern design that reflects both industry standards and the company’s personality. We conducted extensive research across various design system platforms to benchmark best practices and ensure our approach aligned with today’s top design standards. This allowed us to create a visually engaging and user-friendly experience that feels both contemporary and authentic to Oil Solution’s brand.
Custom illustrations
To enhance the visual appeal and uniqueness of the design system, we developed a set of custom illustrations tailored to Oil Solution’s brand identity. These illustrations were crafted to visually communicate key aspects of the system, making complex concepts easier to understand while adding a friendly, approachable feel to the site. Each illustration was designed with a cohesive style that complements the overall aesthetic, bringing personality and vibrancy to the user experience. The custom artwork not only reinforces brand recognition but also helps users connect with the content in a memorable way.
Revamped information architecture
To accommodate the addition of robust new pages covering various elements of the design system—including design principles, news updates, and contact information—we developed a fresh information architecture. We began by creating a comprehensive site map to outline each page and establish the site’s structure. From there, we progressed through wireframes and ultimately developed detailed mockups, ensuring a clear, intuitive layout that aligns with users' needs and optimizes navigation.
StoryBook integration
Previously, Oil Solution’s design language system was maintained both on Storybook and their main website, which created inconsistencies due to the need for updates on both platforms, often leading to one being out of sync. With our redesign, Storybook is now fully integrated within the design system’s website, consolidating everything into a single source of truth. This streamlined approach reduces maintenance efforts and ensures that the most current version of the design system is always available to users.
Preview the site
