Introduction

As the Senior Mobile Product Designer at With App, I led the creation of a comprehensive design system and the development of key features aimed at enhancing user engagement for both iOS and Android platforms. This project was particularly challenging as we were designing for an app still determining its product-market fit. Our goal was to create a group chat app that would disrupt traditional messaging platforms like iMessage, while incorporating unique, engaging features to keep users coming back.

Problem Statement

With App faced several challenges in their mobile application:

1. Determining product-market fit for a new group chat app in a competitive landscape
2. Integrating innovative features like an endless scroll with customizable backgrounds, stickers, and drawing capabilities
3. Developing a timeline feature allowing users to "scrub" through past activities
4. Creating a camera feature with cutout abilities and fun filters
5. Identifying which features would drive user retention versus those that might bloat the app
6. Establishing a cohesive visual identity across the app for both iOS and Android
7. Ensuring compliance with COPPA regulations by preventing users under 13 from using the app

The primary goal was to create a scalable design system and implement features that would help identify the app's unique value proposition, while positioning With App as a leading social media platform for users aged 13 and above on both iOS and Android, particularly focusing on the Gen Z demographic.

User Research

To inform our design decisions and help determine product-market fit, we conducted extensive user research using a combination of qualitative and quantitative methods:

1. Competitor analysis of popular messaging and social media apps
2. Focus group interviews with high school and college students, conducted by our User Researcher
3. Analysis of user behavior and engagement metrics within the existing app
4. Continuous feedback loops to understand feature usage and stickiness

Key insights:

• Users were intrigued by the idea of a more interactive and visual group chat experience
• The timeline feature was seen as a unique selling point, allowing users to catch up on missed interactions
• Creative features like stickers, drawing, and camera filters were highly appealing to the target demographic
• Users valued the ability to customize their chat environments
• It was crucial to balance feature richness with app simplicity to prevent overwhelming users
• Determining which features kept users coming back versus those used once and forgotten was essential

Design Process

Feature Exploration and Prioritization

Given the exploratory nature of our product, I worked closely with the product team to:

1. Develop a feature prioritization framework based on potential impact on user retention and technical feasibility
2. Create rapid prototypes of various features for user testing
3. Establish metrics for measuring feature success and user engagement
4. Design A/B tests to compare different feature implementations

User Flow Creation

I mapped out user journeys for each of our key features, focusing on intuitive navigation and engaging interactions across both iOS and Android:

1. Group Chat: From creating a chat to customizing backgrounds and using interactive elements
2. Timeline Scrubbing: Navigating through past activities and interactions
3. Camera and Filters: Capturing photos, applying filters, creating cutouts, and sharing
4. Stickers and Drawing: Accessing, creating, and applying visual elements to chats

To visualize these journeys and identify opportunities for improvement, I used FigJam, creating collaborative boards with sticky notes to map out each step of the user experience. This approach allowed for easy iteration and team input throughout the process, particularly when designing new features and ensuring consistency across both platforms.

Wireframing and Prototyping

Using Figma, I developed low-fidelity wireframes for key screens and user flows for both iOS and Android. These wireframes focused on:

• Intuitive navigation patterns for accessing new features, respecting platform-specific design guidelines
• Clear visual hierarchy to guide users through complex interactions
• Strategic placement of key elements like the camera button and sticker drawer, optimized for each platform
• Seamless integration of the timeline scrubbing feature
• An age verification process that was straightforward yet effective in preventing users under 13 from accessing the app

After iterating on the wireframes based on stakeholder feedback, I created high-fidelity prototypes for both iOS and Android. These prototypes included interactive elements to simulate the user experience on each platform and were used for usability testing and feature validation.

Visual Design

The visual design approach centered on creating a vibrant, youthful aesthetic that would appeal to Gen Z users while maintaining accessibility standards. Key elements included:

• Custom icons for various features like Image Search, GIF, and Timeline Scrubbing
• A "bubbly" GIF font designed to resemble an icon
• A star-shaped camera sticker button that closes like a shutter when a photo is taken
• Visual cues to distinguish between different features and functions
• Thoughtful use of the electric Gen Z bright green, balancing visual appeal with accessibility needs
• Customizable chat backgrounds that didn't interfere with readability

I personally crafted these custom elements, ensuring they not only enhanced visual engagement but also improved usability and feature recognition. One of the main challenges was incorporating the trendy, bright green color favored by our Gen Z audience while maintaining sufficient contrast and readability for all users. This required careful color pairing and strategic use of the bright green as an accent rather than a primary background or text color.

Design System Development

The design system I created was comprehensive and detailed, ensuring consistency across all aspects of With App. It included:

1. A component library with detailed specifications for buttons, input fields, cards, and other UI elements
2. An extensive pattern library covering major UI patterns and interactions
3. Design tokens for colors, typography, spacing, and other foundational elements
4. Guidelines for implementing new features within the existing design framework
5. Best practices for using and contributing to the design system

To document the design system and ensure its adoption, I created:

• A detailed Figma file with all components, patterns, and their variants
• A comprehensive guide on how to use and contribute to the design system
• Training sessions for other designers on how to effectively use components in Figma

Cross-functional Collaboration

Throughout the project, I worked closely with:

• Product Managers to align designs with business goals, prioritize features, and develop metrics for measuring success
• User Researchers to continuously gather insights and validate feature ideas
• Development team to ensure feasibility of design implementations and quick iteration on features
• Data Analysts to understand user behavior and feature adoption rates
• Legal team to ensure all designs and features were compliant with COPPA regulations
• Other designers to promote adoption and proper use of the design system

Challenges included:

• Balancing innovative design ideas with technical constraints and the need for rapid iteration
• Ensuring the design system was flexible enough to accommodate frequent feature changes and additions
• Maintaining a cohesive user experience while introducing and testing various new features
• Designing an engaging experience for Gen Z users while implementing necessary restrictions and prioritizing simplicity

To overcome these challenges, I:

• Held regular cross-functional meetings to gather feedback, align on priorities, and discuss feature performance
• Created a flexible design system that allowed for quick prototyping and iteration
• Developed a visual language that clearly distinguished features while maintaining app-wide consistency
• Implemented a process for quickly testing and iterating on new feature ideas

Usability Testing

I conducted extensive usability testing throughout the development process:

1. Early concept testing with paper prototypes and low-fidelity wireframes
2. Feature-specific testing to validate individual elements like the timeline scrubbing and camera features
3. Prototype testing with representatives from our target user group (Gen Z, ages 13 and older)
4. Post-implementation testing to gather feedback on live features and inform iteration

Feedback was incorporated iteratively, leading to improvements such as:

• Simplification of the timeline scrubbing interface for easier navigation
• Refinements to the sticker and drawing tools for more intuitive use
• Adjustments to the camera interface to highlight unique features like cutouts
• Optimizations to the group chat experience to balance customization with ease of use

Accessibility Considerations

To ensure an inclusive design, I:

• Implemented a color scheme with sufficient contrast ratios, particularly challenging with the bright green Gen Z color
• Designed components to be easily tappable on various mobile devices
• Included descriptive labels for all interactive elements
• Ensured that custom illustrations and icons had clear meaning and purpose
• Used the bright green color strategically to maintain visual appeal without compromising readability
• Conducted color contrast checks and adjusted shades where necessary to meet WCAG guidelines

Final Deliverables

The final deliverables included:

• A complete component library in Figma for both iOS and Android
• Detailed documentation of the design system, including platform-specific guidelines
• High-fidelity prototypes of the GIF drawer, camera with sticker cutouts, and photo drawer for both platforms
• Custom icons and interaction designs optimized for iOS and Android
• User flow documentation for new features, including age verification, accounting for platform differences

Implementation and Impact

The design system and new features were implemented across With App, resulting in:

• Increased user engagement, particularly among Gen Z users (13 and older)
• Identification of key features driving user retention (e.g., timeline scrubbing)
• Faster design and development cycles for new feature testing
• Improved understanding of our target market and unique value proposition
• Positive feedback from users on the app's unique blend of messaging and social features

Lessons Learned and Future Improvements

Key learnings:

1. The importance of rapid prototyping and testing when determining product-market fit
2. The value of a flexible design system in supporting quick iteration and feature exploration
3. The challenge of balancing feature richness with app simplicity and user retention
4. The power of cross-functional collaboration in navigating the uncertainties of a new product
5. The importance of establishing clear metrics for feature success and user engagement

Future improvements:

• Continued refinement of core features based on user feedback and engagement metrics
• Development of more sophisticated A/B testing frameworks for feature validation
• Exploration of additional unique selling points to further differentiate the app in the market
• Enhanced onboarding process to quickly familiarize new users with unique features while ensuring they understand the app's core value proposition

This project showcased my ability to lead an end-to-end design process for a mobile application still finding its market fit. It demonstrated my skills in translating evolving product strategies into engaging features, optimizing for both user experience and business goals, and establishing design practices that support rapid iteration and product discovery.