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

Joining the the Moneybowl project felt like a cosmic design challenge. The new lead designer and I both faced chaotic remnants from the first designer on the project, including inconsistent design, accessibility issues, and tech hurdles. 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 cosmos, converting challenges into constellations, and merging design with development seamlessly.

The Challenges

To create a clear and cohesive design system to bring order to the chaotic design environment and establish comprehensive guidelines
To reduce technical implementation challenges and foster closer collaboration with the development team
To address accessibility challenges for visually impaired users
Meet the three-month deadline by providing efficient production support and clear design hand-off protocols

Chapter 1: the beginnings

Entering the design realm at Moneybowl, I found myself facing a black hole of information. The lack of guidelines and structure left the design landscape in disarray, similarly to the aftermath of a comet's passage through the solar system. Inconsistent designs appeared like scattered asteroids, and accessibility issues loomed like a dark nebula, excluding visually impaired users from the application's reach.

The urgency of 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

In the middle of the cosmic challenges that engulfed the Moneybowl design environment, 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—a beacon of order in the midst of cosmic chaos.

Drawing inspiration from the meticulous planning of astronauts embarking on a mission, I initiated the deconstruction of the existing UI elements. My aim was to forge a unified framework that would illuminate the path to design excellence. As the lead designer on the design system, I embraced the dual role of mentor and visionary. I entrusted a junior designer with refining text and color guidelines, fostering collaboration and growth within our cosmic design journey.

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—a task that required careful attention and precision, much like assembling a spacecraft before a voyage into the unknown. I wanted every pixel, every interaction, to be in perfect alignment, much like stars forming constellations in the night sky.

Just as an astronaut equips their spacecraft with essential tools, I equipped our team with these components, ensuring that each element could be reused throughout the application. This was my contribution as the lead designer—to provide a roadmap through the cosmos of design challenges and empower our team with the tools they needed to succeed.

I oversaw the integration of components, much like an astronaut guiding a spacecraft through treacherous terrain. The responsibilities were weighty, but the reward was seeing chaos evolve into cosmos, as the UI transformed into a harmonious symphony of design elements.

Chapter 3: accessibility

As our journey through the cosmos of design challenges continued, a new frontier emerged—a daunting expanse of accessibility issues. I recognized that addressing these challenges was much like embarking on a mission to bridge the gap between distant planets. Collaborating closely with the iOS and Android development teams, we navigated this uncharted territory with determination and resolve.

As the leader of this mission, I took the helm to steer our efforts in the right direction, ensuring that visually impaired users would find a welcoming path through the application's universe.

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

As our journey continued, the chaos began to give way to constellations of success. The implementation of the design system, the detailed documentation of designs prepared for hand-off brought order to the once chaotic environment, much like a galaxy takes shape from a cloud of cosmic dust. The stars of consistency aligned, and the development process gained momentum, minimizing delays and inefficiencies.

With the swiftness of a meteor shower, we managed to meet the demanding three-month deadline, delivering the major redesign and new features. Our collaborative efforts had transformed the application, and the enhanced user experience was akin to discovering a new planet teeming with life.

Chapter 5: guiding the cosmic legacy

With my impending 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 embarked on the creation of a comprehensive hand-off guide document. This guide wasn't just a collection of design principles and technical details; it was a testament to the collaboration, empathy, and meticulous processes that had guided our journey.

Within the guide, I documented every hand-off practice, and every best practice that had emerged from my collaborative efforts with the development team. It was a compendium of cosmic wisdom, ensuring that the other designers would have the tools to carry forth the vision we had cultivated. The guide detailed the nuances of font scaling, the intricacies of the design system, and shared best practices to circumvent 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. This guide would serve as a guiding star for the new designers, allowing them to navigate the cosmos of design challenges with confidence and precision.

Final chapter

In closing, our journey has been a cosmic ballet - a dance of creativity, problem-solving, and the forging of connections. As we conclude this case study, we launch ourselves into the ever-expanding universe of design, armed with the knowledge that chaos can be transformed into constellations, and that collaboration is the fuel that propels us beyond the stars. Our story remains an inspiration, a reminder that with determination and unity, we can shape not only designs but the world around us, one pixel at a time.