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
timeline
Feb 2022 - June 2022
The team
1 x Product Designer
1 x Product Manager
2 x Testers
6 x Developers
Background
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.
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.
Constraints
- 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
Process
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.
Finalize Donation User Flowchart View full flow chart here
With a plan in place, I dove into the design phase. My objective was to make the donation process engaging. To achieve this, I introduced subtle nudges, such as incremental buttons, to encourage users to increase their donations. Additionally, if users opted to decrease their pledge, a prompt would appear, encouraging them to reconsider.
Lowered Donation Overlay Interactions
Donation Add-On Buttons Interactions
The final designs incorporated all the necessary specifications and created a streamlined, engaging user experience.
Finalize Donation Final Mocks
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.
Drawer Designs
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.
.gif)
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
In PlaytoCare, each game progresses through a series of stages, and the host controls this journey by selecting buttons that initiate new stages and determine what players see.
Game Progression Flowchart
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.
.gif)
Host Control Designs
.gif)
Host Control Designs
Clicking on any button triggers an overlay with a preview of the next stage, enabling hosts to communicate upcoming actions to players. Additionally, a 'Not Yet' button offered an easy way to correct any mistakes.
Host Controls Designs
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.
Delivery
I place a strong emphasis on outlining design specifications to eliminate any ambiguity in the design-to-development process. Drawing from my background in hardware design, I've cultivated an understanding of real-world constraints and the importance of empathetic communication with those who have to build a design.
Working with an offshore development team presented communication challenges. To overcome these hurdles, I created extensive design specifications within Figma for the team to reference while implementing design changes. These documents were organized into categories, each related to specific flows within the app.
Design Specifications in Figma
Each screen in the documentation featured before-and-after images, highlighting specific interaction changes. Additionally, I included detailed notes on the slides to clarify any changes that might not be immediately apparent. For instance, in the example below, I used comments to explain how the drawer expands, ensuring clarity for the development team.
Design to Development Screen Specifications
In addition to individual screen specifications, I also documented each of the three game flows. This visualization not only aided the development team but also allowed the product team to plan for various edge cases, ensuring comprehensive coverage.
Figma Game Flow Documentation
These flows also offered a side-by-side comparison of design changes. This accessible resource facilitated a quick overview of the design evolution, making it a valuable asset for everyone involved in the project.
By embracing this commitment to comprehensive design documentation, I aimed to bridge communication gaps, promote understanding, and facilitate a seamless transition from design concepts to fully realized features within the P2C project.