Achieve’s Native Design System

Problem

When I joined Achieve, they had just rebranded and developed a new design system that was strictly web based. The company had recently acquired GOOD from Nationwide, and using that as a jumping off point created MoLO (Money Left Over) as a proof of concept for testing in market. Neither app followed native best practices, used a design system or had Achieve branding applied. As I began the design process for Achieve Money, using the new design system as a jumping off point, I began a holistic approach to bring GOOD into the fold. Despite my initial effort to apply best practices to MoLO, we decided to allow that app to act as a “lab” for experimentation and essentially let it go rouge.

I shifted my focus to build out a design system that would encompass both GOOD and Money, follow native patterns and allow for continued growth along side the web based system.

Action

I was designing Money from the ground up and GOOD was dated and clunky. I dug into GOOD to understand its existing patterns, usability and core components. Essentially mining the app to identify corresponding component opportunities to align with a new banking app and refresh the GOOD UI.

Engineering would be building Money in React Native and using React Native Paper as its base. My job was to merge Paper with Ascend into a native centric library. Creating a Figma branch off of Ascend (Achieve’s new DS) I began to build out the essential needs for native, identifying bottom sheets, menus, iOS/Android input controls, and typography that would play nice across both platforms just to name a few. As we nailed down patterns and styling with Money, I then applied that to shared components with GOOD.

As I was the common thread between these experiences, I stood up a bi-weekly native app meeting to get engineering, product and stakeholders from both Money and GOOD in the “room” to discuss and share knowledge across the two apps. There was a clear opportunity to divide and conquer the building of shared components. In addition, we included the internal tools team that was leading the effort to componentize for web. We would all know what the left and right hands were doing and how we should collaborate most effectively.

Results

For a little more than a year, I developed the library, standardizing components across the apps, and sharing that out with stakeholders. I designed light and dark modes together. This allowed the engineers to bake this in early. Not long after, I worked with the FDR team to bring their hackathon project to life. They were able to expedite the design process, using the native library as a base.