Ramp

Ramp is a leading fintech company with a mission to make corporate financial management easier. Combining AI, corporate cards and finance operations software, their tools can be used to simplify complex activities, like tracking income, expenditures and reimbursements, so that clients can reduce costs and close their books faster. With an $8.1 billion valuation just three years after it was founded in 2019, Ramp is among the top 10 fastest-growing US start-ups ever, was recently named one of Time magazine’s 100 most influential companies, and is ranked #1 most innovative company in North America by Fast Company for helping businesses save more.

The company has grown exponentially since 2019. Its initial offering included a spending and reimbursement card but has expanded to a wide range of sophisticated products and services. With such rapid growth, a gap had emerged between the size and complexity of Ramp’s offer and their strategy for communicating around it. Our job was to help bridge this gap, aligning the needs of different teams and developing a consistent visual system to communicate the features and benefits of their products more effectively.

"Bento box" design system

We started by immersing ourselves in Ramp, speaking to both the brand and product teams to identify inconsistencies within the existing brand language and to find ways of communicating complex workflows in a more digestible way. With this holistic approach, we created a product graphic system that works for existing content while also being scalable, allowing the site to keep growing.

Much of Ramp’s technology operates behind the scenes, with complex financial operations working invisibly, so a primary goal was to communicate these hidden flows quickly and easily to all website visitors. As well as explaining how the tools work, we also needed to demonstrate specific features by showcasing product UI in an instantly graspable way — one that would resonate with the customer and with Ramp as a business.

The system we developed is nicknamed the ‘bento box’: a single framework upon which all elements are arranged when creating full workflows or simple UI interactions. Depending on the required scale, the design system uses either a four- or eight-block grid to guide the layout when creating product visuals, with specified margins and gutters between all blocks. Additional rows or columns can be added to fit portrait and landscape formats, making it incredibly flexible.

Ultimately, the grid allows for a sliding scale of complexity — from low-density visuals showing conceptual or abstract information (like a contract being analysed by AI) to higher-density visuals (like multiple transactions moving from one currency to another), which more closely reflect the product’s true UI. Somewhere in the middle we also established a stripped-back version of the UI, allowing for a sharper narrative that retains recognisable product features. All have a place within the bento box framework.

This led us to step back and revisit things holistically, thinking about how we could create a product graphic system that would work for the current content whilst being scalable to allow it to grow in the future.

Cross-content consistency

Ramp partners with many different clients and offers a wide range of integrations, so it was important to create a system that works with third-party logos. Based on the grid system, we defined specific type scales that work at different sizes, as well as the alignment and spacing of icons, components and logos. This added much-needed consistency across all product visuals.

Colour also played a key role. We derived the graphics colour palette from the existing brand palette, creating subtle tints that can increase brand presence even when full saturation isn’t appropriate. We also established simple and coherent motion expressions that help to tell Ramp’s story; defined characteristics such as rotation, scaling and opacity meant we could infuse the brand into moments of product display. Finally, we delivered over 40 product graphics, now in use online and on social media.

With this work we created a complete design system that bridges the gap between brand and product, allowing Ramp to easily showcase its applications and the benefits they bring. The guidelines we created are already being implemented by Ramp’s internal team, allowing them to create exciting new content as they continue to expand.

Collaborators

• Robin Barnes (CGI artist)
• Plan 8 (sound design)
• Usiel Bautista (motion design)
• Remy van der Winden (motion design)
• Calango (motion design)