Let's Roam
Design System & Reskin
The Challenge
Let's Roam is an interactive scavenger hunt application available on iOS and Android. The mobile application struggled with various design and flow inconsistencies throughout the interface which led to a diminished visual and user experience.
To solve this problem, I imported the application in Figma using standardized components, typography, colors, effects, and grids. This allowed me to reskin the mobile application to fix the inconsistencies and develop a design system to make our workflow in Figma more modular and efficient.
Design System
Figma
Components
I broke out components in terms of their functionality and all of their states (placeholder, value, hover, focus, error, disabled, etc.). Every component is nested to help with organization of the system and reduce the number of components.
Styles
The system has defined text, color, and effect styles. This allows designers to use the system without referring to the documentation and helps avoid deviation from the design constraints of the system.
Spacing
For spacing the system uses 10-pt grid. Since the content can be unpredictable and we care about its display, we will use strict internal padding to allow element sizes to be dictated by their content.
Design System
Documentation
In addition to the system in Figma, I developed a documentation website that helps various teams work together with unified assets, use cases, and terminology that go beyond the product's components.

Within the organization, utilization of the system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience.
iOS and Android
Mobile app reskin
Using the components, styling, and principles outlined above, I was able to do a complete reskin of the mobile application. Using Figma's comment feature I noted every change I made for the reskin helping the dev team keep track of the changes needed to be made. The end result was a more unified and consistent styling, a more aesthetically pleasing ui, and simplified user flows.