Sequoia Design System and codebase — the evolution of Oracle.com and the Redwood design system

The catalyst

The existing design system was beautiful but inconsistent, slow, and not accessible or SEO friendly.

A rushed design process

The existing codebase was designed page by page. While it looked good from a distance, working with it became a nightmare. Spacing between components, buttons, and text were all on a per page or component basis. Same goes for the type ramp itself. Header styles were not all the same, which led to more uncertainty when trying to learn and use the system. This piecemeal process also resulted in a lot of bloat and one-off components.

Coding wasn’t given enough time to do their job

There was an extreme rush to get the old codebase live. This resulted in the front-end development team borrowing old code from the previous codebase and no one QAing their work. This created numerous issues

• The live site did not match the design files.
• SEO and accessibility were harmed by using incorrect header tags
• Carried over existing accessibility debt as well.
• Slow loading pages due to code bloat.

Our north star

Build a consistent, yet flexible design system that makes it easier to create and maintain user-friendly, accessible and scalable experiences on Oracle.com

What does success look like?

Our criteria for evaluating our system

• Stay on brand
• Establish consistent design rules
• Extend the product design system
• Ensure best in class SEO
• Adapt to local regions
• Measure and test our system
• Achieve AA compliant accessibility
• Improve page load times.

The process

Discover, definition, design & dev, and deliver

The team

We worked with brand, product, engineering, publishing, seo, accessibility, and executive leadership in order to inform, review, and validate our design decisions and execution.

Discover — audit

An audit of existing components, and standards was conducted. We also interviewed the publishing teams to hear first hand which components were used across the site. This led us to a kill, keep, and optimize list.

A few screenshots from the audit process.

We conducted a competitive analysis and drew inspiration from all around the web. We were most interested in finding sites that also dealt with large amounts of text or complicated products.

Design

While our goal was to align as closely as possible to the existing product design system, we chose to pivot in certain areas in order to optimize for a marketing website. While data density and small type is important to those who use Oracle’s applications, those principles are not desirable when story telling or driving sales leads.

Build

We worked in a agile process with our development team. Using 2 weeks sprints we staggered our design process to nestle into the development sprints while also giving us time for QA and stakeholder reviews of finished components.

The results

Faster page designs, compliant code, user friendly, and performant.

In multiple test scenarios we have received scores of 100 on desktop and mobile from Google Lighthouse. While the SEO team continues to get pages to rank for certain keywords. It has been our SEO optimized approach which gives us the biggest advantage when competing for keywords.

We have also received scores of 100 on desktop and mobile from Google Lighthouse when it comes to accessibility. We continue to audit and test web pages as they go out to make sure we have implemented and optimized each page for AA compliance.

While Sequoia has not been rolled out across our core product pages, it has been deployed on the Oracle AI World Event site. The decrease in load times, improved SEO as well as the plug and play integration with third party services has allowed us to increase organic website registrations by 12% at this time year over year.