Games for Good is a collection of events and challenges intended to engage employees beyond the work environment.
During this annual Mindgrub event, employees are split into teams to earn points and medals. At the end of the six-week initiative, each team donates their earned charitable contributions to their own selected nonprofits.
∙ iOS and Android Mobile App Design
∙ Admin Web App Design
∙ Mobile and Web Design System
Create a distinct mobile and web platform to track progress and involvement in Games for Good activities, allowing for cross-departmental coworker motivation and team building.
iOS, Android, and Web Feature Index
The developer feature index served as the starting point of the Figma Design External file we compiled within the design team that we used for handoff for the engineering to reference when replicating the designs into the final iOS and Android mobile screens—with each title and number corresponding to the JIRA ticket linking to the respective Figma page with the full flow of final screen designs at the ready to inspect and export.
Preliminary Style Tiles
These two style tiles served to help define separate and distinct style directions during the exploration phase of the design process. Meant to capture the overall idea of what the visual design could look like, rather than final iterations of any screens, the style tiles helped define the two directions I had explored at this beginning stage of the project.
The first option was ultimately picked for its fun and colorful qualities—along with its similarity in color scheme to the Mindgrub primary orange and secondary purple brand colors—making
Color and Gradient Styles
After defining a distinct style direction with the first style tile option selected by the team, I was tasked to establish the basis of a Design System starting with a comprehensive set of color and gradient styles using the provided Games for Good logo as original color inspiration.
Two distinct gradient styles allowed for further flexibility when establishing the system—the 'monochromatic' gradients designed for up to 10 team colors, with the purple and orange gradients also used for primary and secondary buttons. The two-tone 'hue shift' gradients are used specifically to color-code challenges and events into categories: green-blue for nature and sustainability, pink-purple for fun and games, and orange-yellow for Mindgrub-specific company events, for example.
Mobile Interface Design
Selected Screen Templates
Using source wireframes to inform my interface design decisions, I was able to creating an intuitive, visually appealing, and accessible design style across the entire app while using the established structure created by the UX team before I joined the project phase.
I designed keeping visual accessibility in mind, with colors compliant to WCAG AA guidelines, larger native typography size scaling by default, and filled versus stroke iconography in the tab bar to clearly indicate the active tab without the need for color.
Both iOS and Android screens were designed for every respective screen and flow, with the majority of the design styling the same across both platforms—while typefaces, card and button widths, and select iconography changed specifically to keep experiences on both platforms as familiar to the platform-specific native patterns.
Web App Design
Admin Dashboard – Team Captain User
The web app extension of Games for Good serves as a place for team captains to have an overview of their teams, events and challenges they have created, and a place to manage all of the info that show up on the mobile app for all players and captains.
While keeping the bold, colorful and fun design language of the mobile app, the web app offers a more utilitarian approach to managing data—allowing for the administrator user to quickly and easily be able to add or edit events and challenges, view and edit team configurations, invite and manage all team players, and export data at the click of a button.
Atomic Design System
Atoms, Molecules, and Organisms
A final comprehensive design system was created using all interactive components from both mobile and web, based on Atomic Design principles, with the most complex elements structured from smaller atoms and molecules.
The scale and flexibility of the design system allowed for most elements—like input fields, typographic, and gradient overlay card styling—to be used dynamically across both mobile and web. Overall, this overlapping design system creates a visual connection between both platforms, ensuring a strong visual cohesion between the two products.
By the end of the project, the full Design System served as a visual resource to inform designers who may return to the project in the future of how to use all styles in context—and for the engineering team to have a detailed library of component templates to more efficiently develop the final iOS and Android mobile applications and desktop web app.