Most recently I was a UX/UI Designer on the digital experience team at Funko.
Select a project from the tabs below to see what I worked on.
Mobile App Design System
Overview
The Funko mobile app utilizes Atomic Design methodology for its design system. This method allows the mobile app to have a scalable design system using all five stages of the atomic design method to breakdown the design elements into small, reusable components.
Atoms
Atoms are the base level of any design system, components broken down as far as they can be without ceasing functionality.
Icons used thoughout the mobile app
Grid for mobile phones and tablets
Breakdown of search bar molecule into its individual atoms.
Breakdown of product card bar molecule into its individual atoms.
List library ribbon
Buttons
Molecules
The molecules are groups of atoms put together to create UI elements.
Search form molecule composed of label, input and button atoms
Organisms
Organisms are more complex UI components made up of molecules and atoms.
Funko mobile app header and footer components
Recommended products carousel
PLP Product card grid in use
Templates/Pages
Combining all the design system components creating templates to work off of. These templates allow for easy iteration and creating new features.
Funko mobile app home screen
Product Display Page
Product List Page
Modal
This is an example of the basic structure of modals in the funko app. It can be used as a template to adapt to different needs.
Mobile App List Library
