Mobile Design System

MY ROLES: User Testing; Iterations; High-Fidelity Prototype; Research

The main goal of the Snap! Raise mobile design system is to unify a set of UX design rules and patterns for use in the entire Snap! Raise product ecosystem. It serves as the second generation user interface for our internal CRM app redesign. It gives us the flexibility we need to work with unknown devices in the near future, which makes developers' lives easier. Finally it promotes collaboration by aligning the product to our team values and principles.

Before vs After

- Maintains similar look and feel to the native iOS library UI.

- Lighter theme is easier to read during daytime.

- Use system font instead of a custom for faster loading times, better type scaling, and better support for different screen resolutions.

iOS

Nearly 90% of our internal reps are iOS users. Focusing on improving their experience and understanding the iOS native library was crucial. The iOS design system started with a rough audit of the existing UI, which involved getting the whole team onboard from the beginning, and collaborating with them throughout the process. The process led to improvements in the design: product success requires constantly experimenting and communicating.

Android

There are approximately 30 sales reps using Android devices. Because we had feature parity with both Android and iOS, my main concern when creating the Android design system was to maintain this parity. I explored popular applications and looked into material design, making sure to design with the affordance in mind.

Implementation

The goal of this redesign is to improve our current sales reps' mobile experience, including eliminating unnecessary features, optimizing existing workflows, and creating a compelling, refreshed UI for our users.

INTERACTIVE PROTOTYPE