The tale of Moneybowl: from chaos to cohesion

Design system, hand-off guides, accessibility for a proprietary skill-based gamification app

My Role: Senior Product Designer

Team: Front-end developers, Lead product designer & myself as the Sr. Product Designer

Client: Bowlero Corporation

Platform: iOS & Android

Time: Jan - April 2023

About the project

Background

Being part of the Moneybowl project felt like solving a big puzzle in space. When I joined to support the lead designer, I faced a mix of design problems, accessibility issues, and technical challenges that needed a solution.

The urgency of a three-month app redesign added complexity, but our solutions shone as bright as shooting stars. This case study details how I helped turning chaos into order, tackled problems, and how I managed to smoothly blend design and development processes.

The Challenges tackled

Establishing a design system: The need to create a clear and cohesive design system from scratch to bring order to the chaotic design environment and establish comprehensive guidelines.
Simplified technical execution: To reduce technical implementation challenges and foster closer collaboration with the development team
Accessibility needs for iOS and Android: Addressing accessibility issues, particularly for visually impaired users.
Deadline adherence: Meeting a tight three-month deadline with efficient production support and clear design hand-off processes.

Chapter 1: the beginnings

Entering the design environment at Moneybowl, I found myself facing a black hole of information. The absence of clear guidelines and structure made the design landscape seem chaotic. Designs were inconsistent, and there were notable accessibility issues, particularly impacting visually impaired users' ability to use the app effectively.

A major redesign and the addition of new features within three months added a sense of urgency to our mission. It was as if we needed to find solutions with the swiftness of a shooting star. The challenge was not just to fix the existing problems, but to create a cohesive universe where design and development could coexist harmoniously.

Chapter 2: Our North Star, the design system

It became clear that collaborative meetings alone couldn't bridge the gap between designers and developers. It was time to take a bold step and initiate the creation of a design system.

Inspired by how astronauts plan their missions meticulously, I began breaking down our existing design elements. My goal? To build a framework that would lead us to better designs. As the lead designer on this project, I took on the roles of teacher and visionary. I entrusted a junior designer with refining text and color guidelines, encouraging teamwork and learning along the way.

The creation of the design system wasn't just about structure, it was about building a shared universe where both designers and developers could thrive. I set out to rebuild all elements using auto layout and constraints. It was a task that required careful attention and precision, much like assembling a spacecraft before an expedition into the unknown. I aimed for every pixel, every interaction, to align perfectly.

Just as an astronaut equips their spacecraft with essential tools, I equipped our team with these components and guides, ensuring that each element could be reused throughout the application's user interface. This was one of my main contributions: to provide a roadmap to make sure our team had everything they needed for success and a speedy delivery.

The responsibilities were weighty, but the reward was seeing chaos evolve into order, as the UI transformed into a harmonious symphony of design elements.

Chapter 3: accessibility

As our journey continued, a new obstacle surfaced: accessibility issues. I recognized that addressing these challenges was much like taking off on a mission to bridge the gap between distant planets. Collaborating closely with the iOS and Android development teams, we faced this new challenge with determination and stayed focused to find solutions.

As the leader of this mission, my goal was to ensure visually impaired users could easily use the app.

On the iOS front, the journey began by understanding Apple's Dynamic Type feature. This ingenious system allows users to adjust the font size system-wide according to their preference. In case of Android, Sp (scaled pixels) and Dp (density-independent pixels) units are the building blocks of responsive design. By integrating these features, the application's fonts responded dynamically to users' settings, ensuring readability and user comfort.

However, our pursuit of accessibility extended beyond responsive font scaling. Collaboratively, we identified the thresholds for both iOS & Android where layout adjustments should be triggered for accessibility, rather than dynamic changes. This approach ensured that users who required larger fonts experienced a truly optimized layout, enhancing both legibility and usability.

My approach included designing several screens that catered specifically to accessible font settings. By anticipating and accommodating the needs of users who preferred larger fonts, I created a suite of screens that seamlessly transitioned into a more accessible layout. This proactive strategy meant that the application wasn't just dynamically responsive, it was intentionally accessible.

Chapter 4: constellations of success

The implementation of the design system, the detailed documentation of designs prepared for hand-off brought order to the once messy environment. Consistency became the norm, speeding up development and reducing delays.

Our team, led by my efforts, successfully met the demanding three-month deadline, delivering the major redesign and implementing new features. The collaborative efforts had transformed the application, and the enhanced user experience was praised not just by our users, but got recognition from our leadership as well.

Chapter 5: guiding the cosmic legacy

With my upcoming departure on the horizon, I recognized the importance of a seamless transition. Just as an astronaut hands over the controls to a fellow explorer, I created a comprehensive hand-off guide document. This guide wasn't just a collection of design principles and technical details. It stood as evidence of the collaboration, empathy, and meticulous processes that had guided our journey.

It was a repository of valuable knowledge, ensuring other designers would have the tools to continue our vision. The guide covered everything from font scaling to the details of the design system and and shared best practices to avoid technical implementation hurdles. Additionally, it outlined the strategies that had fostered seamless collaboration between our design and development teams.

This hand-off guide document wasn't just a technical manual, it was a legacy of unity and empowerment. Just as astronauts communicate crucial information to mission control, I ensured that every detail was documented: every insight, every lesson learned.

Final chapter

To sum up, our journey has been like a beautiful dance in space - full of creativity, solving problems, and making connections. Our journey reminds us that with determination and collaboration, we can improve not just designs, but also our company's environment and atmosphere, little by little.