Sample of our Dev Handoff file
Beyond Habits
A German B2C mobile app to help you build better habits and make a positive change in the world
Overview
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.
Process
Research
Ideation
Design
Dev Handoff
Prototype
Conclusion
Tools
Figma
Adobe Illustrator
Microsoft Word
Zoom
Slack
Role
UX/UI Designer and Researcher in a team of 5
Timeline
8 Weeks
Research
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:
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
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
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.
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.
Ideation
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:
As a user, I want to create an account and log in
As a user, I want to view possible challenges, I want to participate in a challenge
As a user, I want to view the charities I want to donate to
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
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.
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
Design
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
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.
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.
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
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.
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.
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
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.
Sample of our annotations
Prototype
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.
Conclusion
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!