Beyond Habits

A German B2C mobile app to help you build better habits and make a positive change in the world

Image alt tag


Beyond Habits is Germany's pioneering mobile app that turns habit-building into a rewarding journey, inviting users to embrace eco-friendly and wellness practices through daily challenges. Missions missed also serve a purpose, becoming a chance to donate towards a greener earth. Tasked with its redesign, our team aimed to inject gamification and lighthearted elements into the app while preserving a minimalist interface, ensuring an engaging yet straightforward user experience.

The Challenge

Beyond Habits offered a compelling concept but needed a UX/UI refresh to fully realize its vision. Entrusted with user stories from the client, our task was to elevate the interface into a sleek, striking design, adding in gamification elements to maintain user interest and enhance engagement. Aiming to boost daily interactions, encourage challenge completions, and increase charity donations, our objective was to transform Beyond Habits into a visually and interactively enticing app that balances playful elements with intuitive simplicity—blending design with purpose.

The Solution

Informed by rigorous research, we undertook a sweeping transformation of the interface. Respecting the client's wishes, we retained the brand's primary color and typeface, while elevating the brand's aesthetics with strategic additions: fresh avatars, lively illustrations, and video-game-inspired hues to amplify the app's playfulness—a quality it previously lacked.

Our UI redesign wasn't just about aesthetics; it was firmly rooted in solid UX principles, ensuring adherence to best practices and accessibility guidelines. The final product was not just visually appealing but also user-centric.


  • Research

  • Ideation

  • Design

  • Dev Handoff

  • Prototype

  • Conclusion


  • Figma

  • Adobe Illustrator

  • Microsoft Word

  • Zoom

  • Slack


UX/UI Designer and Researcher in a team of 5


8 Weeks

Beyond Habits

Understanding the Product

Our first challenge in this project was navigating an application entirely in German! Engaging in meticulous translation, we ensured both linguistic accuracy and preservation of original sentiment to keep our design in sync with the product’s core values and objectives. A client-provided video walkthrough of the current app gave us valuable insights into its challenges and facilitated our initial dive. Direct testing allowed us to identify specific issues:

  • Several color choices failed contrast checks, posing accessibility challenges

  • The colors used were in discord, lacking aesthetic harmony from a color theory perspective

  • A disregard for visual design best practices was evident, such as inconsistent element spacing and the absence of an 8-point grid

  • While gamification elements were present, they did not successfully elevate the UI or enhance the user experience

Heuristic Evaluation

We believed a heuristic evaluation would be invaluable in identifying pain points and setting a solid foundation for our redesign. I took on this assessment, allowing me to highlight multiple interface and usability challenges:

  1. Typography & Imagery Issues: While using a single typeface is not inherently problematic, inconsistencies in its sizes, weights, and line heights undermined its effectiveness. Moreover, the use of mismatched and irrelevant illustrations cluttered the interface, violating aesthetic and minimalist design principles

  2. Iconography Confusion: The app's icon usage lacked consistency, with mismatched styles and, at times, ambiguous meanings. Particularly troubling was the navigation bar’s unlabelled icons, which placed a cognitive load on users to recall icon functions, thereby infringing the 'recognition over recall' design principle

  3. Tutorial Oversights: While the app commendably offered a tutorial for newcomers, its excessive length and clarity issues hampered its efficacy, coming into conflict with the 'help and documentation' principle

Competitive Analysis

Additionally, we conducted a competitive analysis to provide us with an insightful peek into the interfaces of comparable apps, offering valuable inspiration for our upcoming redesign.

Beyond Habits

Client Insights

In our initial discussions with the client, our team sought clarity on product vision, user expectations, and design preferences. Here's what we noted:

  • Aesthetic Balance: The client liked vibrant colors but expressed a desire for a minimalistic design

  • User Experience: An aspiration for a game-like, fun interface, but also straightforward, simple, and user-friendly

  • Initial Feedback: The current app design was deemed unprofessional. The client's goal was for the app to be visually compelling.

  • Design Flexibility: The client entrusted us with creative autonomy to set the design direction

  • MVP Attributes: The client wanted the MVP to be perceived as simple, clean, and friendly

We took these insights as our guide into our Ideation phase.


User Stories

The client had prepared five user stories that we used as guidance moving forward. They helped us focus on what's most important in terms of functionality and features of the app. These user stories are as follows:

  1. As a user, I want to create an account and log in

  2. As a user, I want to view possible challenges, I want to participate in a challenge

  3. As a user, I want to view the charities I want to donate to

  4. As a user, I want to interact with the challenge I'm participating in. This includes completing the challenge and donating if I don't complete it

  5. As a user, I want to access my profile

User Flows

My team and I then moved on to creating user flows. By figuring out what steps a user needs to take to achieve a goal, we ensure we are designing an intuitive and seamless user experience. By dividing the tasks, I was responsible for user flows one and five.

Beyond Habits

Low and Medium Fidelity Wireframes

My objective was to integrate the existing app screens with innovative design elements for improved user experience.

Tutorial Section

  • Streamlined content for better comprehension

  • Transitioned from bulky text to bite-sized, digestible information

  • Enhanced that part of the journey by ensuring user clarity

Dashboard Screen

  • Prioritized the 'Your Challenges' section at the top, emphasizing its importance

  • Introduced a 'Featured Challenge' card to spotlight new app challenges and engage users

  • Added charity highlighting cards, to foster user connection and awareness

Profile Screen

  • Designed for cohesion with the dashboard

  • Incorporated engaging elements:

    • Stats, badges, and streak days to celebrate user achievements

    • A friends' leaderboard to inspire healthy competition and camaraderie

Beyond Habits

UI Design Exploration & Inspiration

In our exploration of UI design, we identified 'Fabulous' as our main visual inspiration, due to its effective use of vibrant colors and engaging illustrations, aligning with Beyond Habits' healthy habit-building theme. It mirrored the client's descriptive vision and helped guide our design strategy. We also explored a variety of apps to invigorate our creativity, giving us fresh ideas.

  • Sourced inspiration from established and aesthetically pleasing apps like Instagram and other social media apps

  • Explored utilizing vibrant colors strategically to infuse a playful yet minimalist and professional aesthetic

  • Observed a predominant serious and straightforward design approach in various charity apps

  • Aspired to blend a minimalistic aesthetic with a dash of color, fun, and gamification elements

Beyond Habits

UI Iterations

We focused on iterating the dashboard screen due to its high user engagement within the app. Seeking to "test the waters", our team offered a variety of design styles, with each member contributing distinct iterations, aiming to pinpoint the client’s aesthetic preferences.

The client expressed a preference for one of the designs I crafted, feeling it aligned closely with his vision for Beyond Habits.

Beyond Habits
Beyond Habits
Beyond Habits

Color Exploration

I experimented with bold shades, aiming to not only complement the original blue but also to craft harmonious gradients when paired. Engaging in a vivid visual dialogue through color, I opted to introduce neon despite its trickiness, seeking to sprinkle an element of fun into the design. The introduction of purple, orange, and green was meant to breathe life and vibrancy into the minimalistic design, ensuring a captivating interface experience.

Beyond Habits

Style Guide

We honored the client's choice, we retained the app's primary blue color, existing logo, and fonts. Our collaborative color explorations, followed by team voting, facilitated our color selection to incorporate into the style guide. Moreover, I spearheaded the following enhancements:

  • Updated Buttons: We adhered to Google's best practice recommendations, elevating its height to 60 px and I devised both primary and secondary styles. A subtle gradient was integrated, drawing inspiration from Airbnb's button designs in their style guide

  • Illustration Selection: I curated the majority of the newly introduced illustrations, ensuring stylistic and color coherence throughout

  • Bespoke Emoji-Style Illustrations: To enhance the app's playful and gamified atmosphere, I crafted bespoke emoji-style illustrations. These were used both as badges and alternative icons throughout the app, infusing additional engaging elements to the interface. This was accomplished by colorizing icons, thereby bolstering the fun and engaging aspects of the user experience

Beyond Habits
Beyond Habits

Final Designs

With the client-approved dashboard design as our guiding aesthetic, we ensured visual and functional coherence across all subsequent screens. All teammates continued to work on our original flows: I developed high-fidelity designs for the onboarding and profile/settings screens, while further refining the dashboard.

Beyond Habits

Bespoke Emoji-Style Illustrations

I was initially drawn to an open-source colored icon set that seemed ideal for our redesign due to its fun aesthetic. However, upon download, the images were pixelated and unusable. Inspired by the initial idea, I created a bespoke set. By adding color to a similar icon set, I created unique and high-quality visuals, that enhanced the vibrancy and aesthetics of the platform.

Dashboard Redesign

After numerous iterations and informed by collaborative feedback, the final dashboard design aimed to:

  • Encourage Daily Interaction: Seamlessly blend clean aesthetics and functionality, making the app a daily delight.

  • Highlight Key Elements: Emphasize the challenge card and ensure all vital dashboard elements are visible without unnecessary scrolling, adhering to client and user-friendly specifications.

  • Boost and Maintain Engagement: Incorporate motivating and rewarding statistical feedback to promote continuous challenge completion.

Beyond Habits

Tutorial Redesign

The redesigned tutorial aimed to familiarize new users with the platform, establish a positive initial impression, and boost user engagement from the start.

  • I condensed the original, somewhat overwhelming 5-step tutorial to a succinct 3-step, refining the text for brevity

  • Enhanced the process with engaging illustrations to entertain and delight the user during onboarding

  • Clearly tracked the progress so the user would know where they were in the onboarding process

  • Provided options to skip the tutorial, directing users straight to sign-up/login, for those preferring immediate platform access

Beyond Habits

Profile and Settings

The original profile screen contained both user information and settings. I redefined the information architecture, creating dedicated screens for each profile and setting, to ensure intuitive navigation. This separation allowed me to introduce game-like elements into the user's profile page, like user stats, badge achievements, and friends leaderboard, to sustain engagement across the app. Access to the settings page was seamlessly embedded within the profile screen.

Dev Handoff

Measurements + Annotations

As we approached the final stages of this project, my team and I created developer handoff documents by using the Figma plugin 'Measure'. These documents detailed the measurements of every on-screen element, the spacing between them, and their respective padding. As UX/UI designers, we're acutely aware that developers breathe life into our designs by turning them into code. Therefore, ensuring this process goes off smoothly is paramount. By providing precise measurements, and comprehensive annotations, along with design systems, we aim to foster seamless collaboration between teams, ensuring our design decisions are accurately translated into the final product.

Beyond Habits

Sample of our Dev Handoff file

Beyond Habits

Sample of our annotations


Though not explicitly requested, I decided that creating a prototype, specifically for the app's onboarding process, would be beneficial. During one of our concluding conversations, I perceived some ambiguity concerning the animation screens among team members as well as the client. Recognizing that static visuals often fall short of conveying dynamic interactions, I took the initiative to craft a prototype. This allowed me to more effectively communicate my envisioned animations, eliminating any potential confusion and ensuring the client fully grasped the intended user experience.


Participating in this redesign project was a joyful experience, especially with my design iteration being chosen by the client, allowing me to lead our UI process, felt incredibly rewarding. My passion for visual and UI design extends from exploring colors and spacing to manipulating UI elements, all of which I find exciting, as I like to believe I have an eye for design. I valued the constructive criticism from the team on our Figma file, which honed my design skills. The client, with his passion for the product and dedication to sustainability, was delightful to work with, and his constructive feedback facilitated our redesign process.

While team dynamics brought challenges due to occasional communication gaps and resultant design deviations, it taught me the important role of stepping forward to guide the team when needed, ensuring alignment and open communication. I'm grateful for the team’s collaborative input on the dashboard gamification; although I was responsible for that screen, everyone contributed ideas and designs, enabling a collective, pleasing final result for both the client and our team. I can't wait for the day I can download 'Beyond Habits' from the Apple Store shortly!