SigFig
Digital Wealth — Mobile Onboarding
One of the challenges we faced was transitioning to mobile-first. The original Digital Wealth product was designed and built for web, but over the last several years there’d been a dramatic shift to mobile banking. Accelerated by the pandemic, more people than ever were managing every aspect of their finances from their mobile devices, and, in turn, banks were prioritizing their resources towards innovating their native experiences.
Onboarding in particular presented a challenge, because so much of it is filling out questionnaires and forms (paperwork), much of which have regulatory requirements. As part of our design system overhaul, we emphasized responsiveness, scalability, flexibility, and accessibility, in order to best support the unique needs of a regulated industry, while bringing trust, simplicity, and delightfulness to our users.
Legacy Mobile Onboarding
The legacy Digital Wealth mobile experience was build as desktop-first responsive web. It would launch in a browser from the bank’s mobile app, causing confusion and a lack of continuity between the bank’s native app and SigFig’s experience.
The interface was clunky and outdated, and the typography was difficult to read. Because the products were designed as responsive web rather than native mobile, the patterns and interactions were lacking, and the already dense forms and content were made even more so by the limitations of responsive behaviors.
Redesign of Mobile Onboarding
In addition to the redesigned web-based product, the mobile experience was done so as fully native so it could be seamlessly integrated with the banks’ native apps. The new design system was created as native-compatible, and responsive, to give us as much flexibility as possible as the product suite expanded. We also prioritized accessibility in the design system and across all UIs.
The interface was designed with a neutral color palette, legible typography, and in high-contrast to minimize the density and volume of content. Color and depth are used intentionally to emphasize hierarchy within the pages, and the overall workflow. Interactions, patterns, and behaviors are modern and purposeful, to help the users stay focused and engaged.