OctoAI Site & Design System

Background:

OctoML makes AI more sustainable through efficient model execution and automation to scale services and reduce engineering burden. We make AI more accessible by enabling models to run on a broad set of devices and easier to deploy without specialized skills.

The Problem:

OctoML went to market with the OctoML Platform that reduced costs and optimized machine learning models for ML Engineers. The main audience for the offering was ML Leaders, but they remained skeptical about the offering, not seeing it as a must have addition to their current production workflows given their current level of in-house resources/expertise.

With lessons learned, and a large shift in the generative AI market, OctoML is moving to create and launch the OctoML compute service, aimed at application developers seeking to build AI into their apps.

Their goals:

1. Findability + Discoverable: Attract visitors by achieving higher organic search rankings for popular models with content on the marketing and documentation site.

2. Conversion: Convert visitors by showcasing the value of OctoML’s open access endpoints with the fastest and cost reduced popular models.

3. Nurture & Retention: Support OctoML users with a rich set of content aimed to support their product use: documentation, tutorials, guides, and more.

The Solution:

A site redesign that caters to the right demographic, easily display most popular models, and Support OctoML users with a rich set of content aimed to support their product use.

We’ll do this through the following stages:

• Design Discovery

• Landing Pages

• Design System

• Page Build Outs

The launch of OctoAI's rebrand was covered in Tech Crunch which you can read here.

"The previous platform was focused on ML engineers and optimizing and packaging the models into containers that could be deployed across different sets of hardware"

Design Discovery:

During the Design Discovery phase with OctoML, we conducted several activities to gain a deep understanding of the client's brand positioning, business goals, and target audience. To ensure the client understood how we would create their Design Systems, we walked them through the Atomic Design process. We also presented mood boards to help identify the visual style and branding, drawing inspiration from other companies to set the tone for the new website.

To gain insights into how the client wanted their website to be conveyed, we facilitated a word association exercise. Through this exercise, we identified that OctoML wanted the website to feel established, contemporary, and expensive. These activities allowed us to align our design vision with OctoML’s brand identity and business goals, setting the stage for a successful website redesign.

Designing Landing Page Discovery:

After the design discovery meeting, three landing page mockups were created to determine the visual direction the team wanted to take. The goal was to present OctoML with options that reflect their brand identity while keeping in mind their new target audience. Each landing page design focused on a different theme, with unique layouts, typography, and color schemes. These mockups allowed the team to explore different design styles and gather feedback from OctoML on what resonated with their brand. By presenting a range of options, the team was able to collaborate with OctoML to refine the visual direction for their website and establish a shared understanding of their design preferences.

Design System:

Once we picked, collaborated and refined one landing page that represented OctoMl’s brand the best, we began to build out the design system. We used the new landing page as a base for the atoms, molecules, and components built in the design system.

At Webstacks, we leverage atomic design to create our clients' design systems. This design methodology comprises four key levels: atoms, molecules, organisms, and pages. Beginning with atoms, which include typography, color, shadows, we assemble molecules like buttons and input fields. These molecules come together to form organisms such as heroes and switchbacks, card decks, header navigation, and more. We incorporate prototyping to showcase any hover effects, transitions, and animations necessary to give the client a full picture of the website. Finally, we utilize atoms, molecules, and organisms to build complete pages, bringing the atomic design process full circle.

The beauty of this approach is that it allows us to build a comprehensive and organized design system that gives OctoML complete control through their CMS. By adhering to atomic design principles, we were able to create a visually stunning and intuitive website that aligns seamlessly with Lineup's brand identity.

After the client approved the design system, I used components from the design system to create several pages, including the homepage, pricing page, blog listing page, blog detail page, and model pages. These pages followed the established design system, with consistent typography, color schemes, and layout, ensuring a cohesive visual identity for the entire website. Check out The Before (left) & After (Right) of the new homepage!

Conclusion

The website redesign for OctoML was a success, thanks to a comprehensive and collaborative design process. By leveraging a design system that incorporated atomic design principles, I was able to create consistent, visually appealing, and user-friendly page designs that aligned with the client's brand identity and business goals. Through user testing and client feedback, we were able to refine the design and ensure a seamless user experience.

Check out the live site here