Uber Money
Project Overview
Uber Money was a significant initiative by Uber to enter the financial services industry, offering new financial products like real-time earnings, Uber Wallet, Uber Debit Account, and the relaunch of the Uber Credit Card. The goal was to provide drivers, couriers, and consumers with seamless financial tools that integrate into the existing Uber ecosystem, enhancing their experience and delivering value "at Uber speed."
Our team was tasked with creating 30+ landing pages to support this launch, all transitioning from Uber’s older Tetra design system to the newer, more dynamic Samba design system. This required not only a visual update but also a complete rethink of user flows, interactions, and content strategy to ensure consistency and a user-friendly experience across all platforms.
Key insight
Transition to Financial Services
Uber Money aimed to deliver a suite of financial products like the Uber Debit Account, Uber Wallet, and Uber Credit Card. These products were designed to offer more value to Uber’s community by providing real-time access to earnings, cash-back rewards, and easy money management tools.
Tetra to Samba
The project involved moving away from Uber's older Tetra design system to the new Samba system. This required careful adaptation to maintain brand consistency while embracing a fresher, more engaging visual style that Samba offered. We updated all components, typography, and layouts to reflect the new guidelines, ensuring a cohesive look across the new landing pages.
Creating Modular and Scalable Designs
We designed a modular system for Uber Money’s landing pages to allow for rapid updates and optimizations, which was crucial for a product with frequent feature releases. This approach facilitated scalability, enabling the easy addition of new sections and content without requiring extensive redesigns.
.png)
%20(1).png)
Content Blocks
Content blocks play a crucial role within the Samba Design System, ensuring design consistency and development efficiency across all Uber platforms, from websites to apps. These content blocks are predefined guidelines in the design system, created to maintain a cohesive visual language and user experience throughout Uber’s digital ecosystem. By providing standardized design patterns, content blocks enable designers and developers to work more efficiently, adhering to precise specifications that ensure seamless integration across mobile, tablet, and desktop environments.
Specific rules within the design system guide the effective use of content blocks. For instance, the amount of copy in each item’s headline, body, and CTA should be consistent to maintain visual harmony. While the block can contain several items, it is recommended to use no more than four, especially for mobile responsiveness, to prevent overwhelming the user and ensure readability.
.
.png)
.png)
.png)
.png)
.png)
%20(1).png)
Design Approach
Our design approach centered around leveraging the new Samba design system to create landing pages that were both flexible and scalable. We developed a component-based structure that allowed for easy updates as new financial products and features were rolled out. This modular design approach ensured that each page was not only visually aligned with Uber’s updated brand identity but also adaptable for future growth.
We focused on a user-centric approach, ensuring that the new financial tools were easy to understand and access. This involved creating clear and intuitive layouts, using visuals to enhance comprehension, and incorporating engaging call-to-actions that encouraged users to explore and adopt the new financial products.
.png)
Color, Typography and Assets
%20(1).png)
.png)
.png)
.png)
.png)
