Redesigning PlayToCare

In this case study, I embarked on the redesign of PlayToCare (P2C), a trivia game app with a charitable twist.
Discover how I improved visual continuity, streamlined core functionalities, and addressed edge cases in user flows, all while ensuring smooth design-to-development handoffs.
my contributions
Product Design
Feb 2022 - June 2022
The team
1 x Product Designer
1 x  Product Manager
2 x  Testers
6 x Developers


PlayToCare, or P2C for short, is a mobile app that offers users the opportunity to participate in trivia games hosted by celebrities via livestream. While engaging with celebrity hosts and enjoying interactive games, users also have the chance to make donations to associated charitable causes.
Taking cues from popular platforms like TikTok and Instagram Live, P2C is designed to captivate the younger generation by providing a dynamic, engaging livestream experience with a philanthropic twist.
I joined the P2C project in March 2022, approximately a year into its development. Initially, an external design agency crafted the design system and outlined user journeys. However, without a dedicated designer, the app had strayed far from its original design concept. It no longer resembled the initial Figma mocks, and numerous user flows had significant gaps. My role as a designer was to realign the app and elevate it to MVP status.
  • A design system and architecture were in place
  • Visual design elements were disconnected
  • User journeys were incomplete
Working as an extension of my primary company, our P2C team operated with limited resources and a lean team. Our team consisted of a product manager, two collaborators handling administrative tasks, and myself as the designer, collaborating with an offshore development team.
  • Limited resources
  • Tight time constraints
  • Restricted design freedom
Given these challenges, my primary mission was to redesign the app without implementing large structural changes. The overarching question was how to enhance the app's appeal and functionality given these constraints.
To address this, I charted out three pivotal design objectives: increase visual continuity, minimize user friction in essential features, and pinpoint and remedy edge cases in primary functions.
Design Goals
  • Enhance visual consistency
  • Minimize user friction in essential features
  • Identify and resolve edge cases in primary functions


Observe & Document

I approached this redesign the way I approach many things. My first step is to observe and document. I find that when coming into a new scenario, it's very easy to have lots of ideas and solutions, but taking a second to understand why something was the way it was is important.
In this case, I spent time analyzing the discrepancies between the app and the Figma designs. This involved taking screenshots in the app and piecing them together to understand the different user flows associated with the three different game types.
I asked a lot of questions and began to understand why things were the way they were and where there were gaps that could be filled or things that could be improved.

Iterative Design & Feedback

After grasping the existing design and its limitations, I embarked on a journey of iterative improvements, collaborating closely with the team for feedback. While I was initially guided to make only minimal adjustments, the team soon realized the transformative potential of the new designs and became open to exploring these broader enhancements.

Design Solutions

When crafting design solutions, I always begin with a holistic perspective. Understanding the project's requirements and planning out the feature's architecture are my initial steps before I dive into the visual design. I find that this method ensures a solid foundation that reduces cycle time down the road. When I do get into the visual design phase, I enjoy crafting new features while leveraging existing design components and expanding the design system when necessary.

Finalize Donation Flow

One significant challenge we encountered during the project was the need to finalize the donation process within the app. Although players could pledge amounts throughout gameplay, these pledges remained non-committal until the user completed the donation by entering their payment information. Given that the primary purpose of the app was to raise money for charity, this step was essential but had not been designed when I joined the project.
I approached this challenge by first understanding the feature requirements.
Requirement #1
Allow users to finalize their donation using a payment method.
Requirement #2
Enable users to modify their pledged sum.
Requirement #3
Allow users to add or modify payment card details.
Requirement #4
Consider how the design accommodates users reducing their pledged amount.
Requirement #5
Encourage donations without binding users to their pledges.
When dealing with intricate designs and flows, I often turn to visual planning. Flowcharts, in particular, allow me to map out intricate user journeys and logic. They prove invaluable in providing a path towards a solution. For this donation flow, I crafted a flowchart that captured the logic required to fulfill the specifications above. This visualization not only guided the design process but also provided clarity for the development team.

Drawer Navigation

One significant issue with the original app was its navigation. Moving from screen to screen provided no context about your current location or where you had been. There were few "breadcrumbs" to guide the user, which placed a heavy cognitive load on them as they tried to mentally map out the app's structure.
Early on, I recognized the need to address this navigation problem. However, I faced constraints in altering the app's structure, so I needed to think creatively. My goal was to reduce the cognitive load on users by creating a solution that aligned with the content's relationship between screens.
To solve this challenge, I drew inspiration from apps like Instagram and Duolingo, which effectively used drawers when screens had a parent-child relationship. With this concept in mind, I began designing and refining how these drawers would look and function.
I integrated these drawers throughout the app wherever there was a parent-child relationship, as demonstrated in the GIF below. In this example, while engaged in a game, users could access game stats using buttons at the top of the screen. These drawers allowed users to maintain their sense of location while accessing essential information.
This seemingly simple idea transformed the app's feel and functionality. It enabled screens to interact logically with the content they contained, providing users with a clear mental model of their location within the app. This improvement greatly enhanced both navigation and information display within the app.

Host Controls

Before I stepped in, host controls were an afterthought, resulting in a cumbersome experience. Hosts often made errors or got stuck, affecting not just their experience but also that of the players. This had a cascading effect, undermining the value that the app could deliver to charitable organizations.
Knowing that hosts were likely new to the app and had little time to practice, my design objectives were straightforward: ensure clarity in controls, include error mitigation features, and provide contextual cues for upcoming actions.
To dive deeper into the problem, I consulted our play testers, who had been actively hosting games and had invaluable feedback on existing issues.
Armed with this feedback, I designed a set of simple, intuitive buttons placed at the bottom of the live-streaming screen. These buttons were intended to be easily noticeable and user-friendly.
Through close consultation with play testers and a targeted approach to design, I was able to revamp the host controls to be more intuitive, error-resistant, and context-aware. This not only enhanced the experience for the hosts but also indirectly improved the game for players, thereby increasing the app's value to charitable organizations.