Responsibility
To kick off the migration, I helped audit and organize the existing design file and reviewed each frame to understand which repeated components to design, and reorganized each user flow so that the rest of the product designers can focus on redesigning the app.
I organized the files from their previous app design to establish a clear and consistent foundation for our design system. This helped streamline collaboration, reduce back-and-forth communication, and ensure the entire team had easy access to reference materials before beginning the redesign process.
Where it started — This was the previous design concept that I audited to identify recurring UI components, visual patterns, and inconsistencies. This process laid the groundwork for creating our design tokens to create a more scalable, consistent design system.
Deliverables
With a clear foundation in place, I began creating our new UI components for our redesigned app so they’re aligned with our updated visual direction. I aligned with my PD Lead to identify our foundational elements like colors, typography, and spacing. From there, I built out key patterns like such as buttons, input fields, and modals that were cohesive and scalable across the app.
An overview of the design system I helped create, organizing core UI components like buttons, inputs, modals, and icons for consistency and scalability. I collaborated with my PD lead to define component standards, while the custom illustrations on the right were created by our visual designers to align with the app’s concept and branding.
A closer look at the button components I defined as part of our design system. I designed different states (default, disabled, focused) and variants to support diverse use cases across the app. This helped us stay consistent early on and align on spacing, styles, and interaction patterns.
%202.png)
I laid out different input fields to make sure everything felt intuitive and consistent across the app. We spent time making sure the spacing, text hierarchy, and contrast all worked well together, especially for things like validation and accessibility. It also helped the team stay aligned since we had all the edge cases visualized and documented early on.
%202.png)
List-based components supported key user flows like selecting payment methods, choosing contacts, and making quick decisions using checkboxes or radio buttons. The goal was to make each action feel simple and intuitive, while still being functional and accessible across different screens.
