App Details Redesign
Enhanced usability, readability, and user comprehension to guide customers in making better parenting decisions for kids' phone app use.
Pinwheel is a tech startup dedicated to helping children and youth develop healthy technology habits. It provides caregivers with tools and knowledge to ensure kids use technology safely and appropriately.
During my internship, I contributed to a broader project aimed at enhancing customer satisfaction with the Pinwheel App Library, a core value proposition within the Caregiver Portal app.
This case study highlights the redesign of the App Details Card, a key feature within the App Library. The new design makes it easier for caregivers to make informed decisions about an app’s appropriateness for their child, creating a more satisfying and user-friendly experience.
The Goal
Support caregivers in making informed decisions about whether an app is appropriate for their child.
What I Did
I took on dual roles as a product manager and designer, and collaborated with cross-functional teams. I contributed to the design process through discovery research, information architecture, design ideation and wireframing.
My Role
Product Design
Product Management
Timeline
8 Weeks
Team
1 Product Designer
Third-Party App
Engineering
Skills
UI Design
Information Architecture
Continuous Discovery
Design Audit
App Details with a safety level system to inform caregiver app selection.
Warning Labels
App information is too overwhelming to navigate and comprehend.
Though customers appreciate the comprehensive App Details provided, the current design makes it difficult for them to quickly find, navigate, and understand the specific information they need.
Current App Details Card Design
Current App Management Flow
Fragmented information architecture is causing user navigation inefficiency.
The current design separates app details, downloading, and management across distinct pages, requiring users to navigate multiple steps to complete the process, resulting in inefficiency.
A redesigned All-in-One App Details Card to better support caregivers to make informed app decisions.
Our redesign of the App Details card aimed to enhance its clarity and usability. The new design was crafted to more effectively inform caregivers about potential risks and empower them to intervene appropriately, while the all-in-one design also simplified the app management process.
Easier Information Navigation and Findability
Different types of information are organized into tabs and sections, improving navigation and helping users quickly find what matters most.
App Details Card Front Page
App Warning Details
Improved Warning Clarity and Actionability
A clear structure and visual hierarchy, enhanced by collapsible sections, make content easier to digest, allowing users to quickly understand key information. The highlighted recommendation section enables users to confidently take appropriate actions.
Streamlined App Management Workflow
Download and management buttons are integrated on the same page, allowing users to read app details, make download decisions, and manage app use seamlessly—all in one place, with minimal navigation effort.
App Management Tab
Research
Observed polarized user engagement patterns.
To identify potential opportunities, we reviewed Hotjar recordings of customer interactions with the App Library. From there, we observed two interesting behavior patterns:
Some users spent very little time, quickly skimming through the content and taking action within seconds.
Others spend too much time reading in detail.
Others spent a long time reading app labels and details, lingering on the page for several minutes before making a decision.
Uncover user perspectives through 3 research goals.
To better understand the user behavior patterns we observed, I conducted 15 user interviews through phone calls and engaged with our Facebook customer group.
What information do they care about in the warnings?
Do they understand what each warning means?
How important are the warnings to them? Does it affect their download decision?
Caregivers prioritize different concerns based on their unique values and needs (e.g. some families focus on social media access, while others prioritize internet safety). However, the current system makes it hard to quickly find risk information relevant to their priorities, forcing them to sift through comprehensive details to find what matters most.
Users struggle to understand the reasoning behind risk level warnings.
While detailed risk reasoning information is available, the current design makes it difficult for users to quickly interpret why certain risks are labeled with specific severity levels.
Users are uncertain about the appropriate actions in response to risk warnings.
While app functionality ultimately drives download decisions, the unclear presentation and actionability of warnings prevents users from making fully informed choices about downloading and managing apps.
“I don’t know what to do with the warnings.”
Discovered excessive clicks in app management workflow.
In addition to gathering customer feedback, we also used the App Library ourselves to identify potential opportunities. We discovered that the app download and management workflow was inefficient, with tasks like reading app details, downloading, and managing schedules requiring excessive clicks and disrupting the natural user flow. As a result, I suggested streamlining this process to improve app management efficiency for users.
Design goals
How might we support users to quickly find relevant details without missing critical content?
Revamp the information architecture for the card layout.
Upon closer examination, I found that the current warning information lacked a consistent hierarchy. Warnings were mixed, with some offering general information, others highlighting technical constraints, and some focusing on healthy app use. Hence, to improve navigation, I began by redesigning the information architecture.
Choosing option C as the core layout.
User research revealed that users prioritize specific types of warnings over general warning levels or categories. This insight informed the decision to adopt Option C, which provides a clear and organized hierarchy, ensuring users can easily find the information that matters most to them.
How might we make risk warnings clearer and easier to act on?
Enhance the structural and visual hierarchy for the information display.
To enhance readability, comprehension, and actionability, I explored several design ideations, including different collapsible sections, text hierarchies, and display formats.
Collapsible warnings with titles and key messages improve readability by allowing users to quickly find relevant information and expand for more details, accommodating both experienced and new users.
Warning details were broken into individual sentences, with key recommendations highlighted, to improve clarity, understanding, and actionability.
I opted for a full-page display over a pop-up to maximize space, allowing for larger fonts and better text arrangement, which improves readability.
How might we make the app management process more efficient?
Integrate buttons into the card page.
We integrated the app management flow directly into the app details page by adding an "Install/Uninstall" button and a "Schedule" tab. This allows users to manage the app and select modes immediately after reading the details, resulting in a smoother user flow and transition.
App Details Page Layout — Enhanced Information Navigation & Findability
Before
A pop-up modal with flat, scrollable layout stacks all types of information vertically, making it overwhelming and difficult to navigate.
After
A full-page layout with information organized into tabs and sections improves navigation, helping users quickly find what matters most.
App Information Display — Improved Warning Clarity and Actionability
Before
Insufficient hierarchy due to similar font size and weight, making the text difficult to read and comprehend.
After
Improved readability and efficiency through clearer visual hierarchy (color, typography, and highlighted recommendations) in collapsible sections.
App Download & Management Flow — Increased Navigation Efficiency
Before
Required multiple clicks/taps and switching between modals, making app management cumbersome.
After
Management options and a scroll-to-top button integrated on the same page, enabling users to read app details, make download decisions, and manage app use seamlessly, all in one place, eliminating excessive navigation.
Positive user feedback.
In a preliminary round of feedback, caregivers found the new design more visually engaging and clear. They noted that the information was easier to comprehend and expressed interest in seeing the design implemented.
Internal stakeholder buy-ins.
The App team has expressed strong support for the redesign, recognizing its potential to help customers make more informed decisions. Based on their prior interactions with users, they acknowledged that the current labeling system falls short in effectively conveying critical information to parents. The new design addresses these gaps and is seen as a valuable improvement.
Moderated usability tests.
Additional insights are needed from users interacting with the new designs through moderated usability tests to uncover issues and iterate on the designs.
Label re-evaluation and re-organization.
The current warning labels vary in the information they provide. With the new design featuring multiple information display areas, the team will reevaluate and reorganize these warnings to ensure they are neatly sorted into the appropriate sections.
Be flexible with asking broad questions during user interviews.
In the early interviews, I began with specific questions that aimed to test my hypotheses but struggled to uncover clear patterns in the responses. After recognizing this, I shifted to broader questions, which allowed users to share more freely and helped me uncover new opportunities and insights that were more aligned with their needs and experiences.
Show users something concrete. Don’t let them imagine.
In design, users often struggle to articulate their needs or envision improvements, especially when they are accustomed to the current experience. Asking them to imagine changes can lead to unclear or misleading feedback. Instead, showing users concrete examples or concepts allows them to react more effectively, providing clearer insights into their preferences and needs. This approach can be especially valuable in iterative design, where quick feedback and progress are key.