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.
Timeline
10 weeks (5 two-week sprints)
Mobile Interface Design: 6 weeks
Web App Design: 4 weeks

Managers
Evan Reisberg, Interactive Design Manager
Kendall Kiernan, Senior Interactive Designer
My Role
Lead Designer
∙ iOS and Android Mobile App Design
∙ Admin Web App Design
∙ Mobile and Web Design System
Project Brief
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.​​​​​​​
Process
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. 
Design Exploration
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.
High-Fidelity Wireframes
Designed by Evan Reisberg, Interactive Design Manager
Manager Evan Reisberg produced preliminary wireframes for the different flows and sections of the mobile app, laying out the overall structure. I designed components and elements with improvements to the UX structure of each screen—like changing data visualization from the graph in the wireframe to a horizontal progress bar to allow for more elements to fit within challenge cards.
I removed many of the buttons from all cards on the challenges and event screens, as users need to first tap to open the cards primarily in order to view event information, decide whether a challenge catches their interest, and then join the event or challenge. Removing these buttons helps alleviate redundancy and make usability more clear.
I also combined elements from different sections—like leaderboard and profile–so that the final leaderboard screens have the user's profile, avatar and standings all directly at the top of that section. Additionally, user profile settings were combined into one flow and fixed as an element in the primary navigation bar. 
Mobile Interface Design
Selected Screen Templates
Using the 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. 
Leaderboard Team Color Variations
Using all primary, secondary, and accent colors from the Design System allows for up to ten teams to be represented and stored within the Games for Good experience—allowing for Mindgrub to market the product for use in large companies, where hundreds of team players can be split up into the color-coded teams.
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.

more you might like

Back to Top