Rocket

Rocket

UI

UX

Front End Development

Adobe XD

2018


Design System and Onboarding Experience


What we did

  • Branding and identity
  • Experience design
  • Interface design
  • Design System development

Industry

  • Finance
  • Technology

Context

Rocket is a Fintech company based in Mexico that provides financial tools for millenials. Financial Analysis, launched in 2017, is a tool that allows users to authenticate directly with Buró de Crédito (Mexico’s Credit Agency) and obtain an easy to understand overview of their credit history, with recommended actions and articles to improve their score and the best credit options for each person.

After a few months of launching, it was clear that the tool was solving a real problem for our users. We identified areas where we could improve the Onboarding experience for new users and offer greater value to existing ones so they would continue to use the app. My role as Design Director was refreshing the visual language and aligning the name of the brand with the value offer, and creating a Design System that would help the product team iterate faster as the base for the new Onboarding experience.

Objectives

  • Streamlining the process and communicating clearly Rocket's value offer
  • Create a fun, yet easy-to-use onboarding experience, refreshing the visual language and brand using Rocket as a metaphor for the service
  • Improve conversion rates of the onboarding experience and continued use of the tool over time (retention)
  • Create a Design System and maintain an updated components library,
  • Make product iterations and developing new features easier by using ready-made components

Refreshing the visual language and brand

Rocket is a name that brings to mind images of space travel, speed, and great power. We wanted to associate those images with the capabilities of the new Financial Analysis tool. To achieve this, we created a new visual language that makes effective use of white space, clean and simple design, and a vibrant color scheme. We also developed our own style of illustrations to make the product friendlier. Credits to [] for creating the Space Icons we used.

tumblr inline pel9sqcwjB1qcja74 500 Landing Page

Improving user retention rates

A big objective for the redesign of this tool was to achieve better user retention rates by providing the user always up to date content recommendations and tips to improve their credit score. I redesigned the Dashboard view to highlight the most important actions and make it easier for the user to find out what they are interested in and get there faster.

tumblr inline pel9sryopn1qcja74 500 Personal Information Form

Creating a Design System

We wanted to use our new visual language in the Onboarding experience and across all new User Interfaces. To achieve this, we made sure from the design process to create reusable, flexible components to make product iterations faster, reduce ad hoc styling and have a more consistent look & feel throughout the User Experience. Then we created our own live pattern library to make easier to reuse these components for developers.

tumblr inline pel9sqK7LH1qcja74 500 Credit Score and Financial Analysis