Project Type
Lose It! Themes — the premium feel, rebuilt
Role
Sole Designer
Platform
iOS, iPad, Android
Team
1 Designer, 2 Engineer
Timeline
8 weeks
Lose It! Themes — the premium feel, rebuilt
Project Overview
Lose It! is a health and nutrition app offering both free and Premium subscriptions. Premium users can access Themes, which allow customization of the app’s appearance.
I redesigned all 28 themes across iOS, iPadOS, and Android, ensuring both light and dark modes delivered a more compelling experience.
Project Overview
Lose It! is a health and nutrition app offering both free and Premium subscriptions. Premium users can access Themes, which allow customization of the app’s appearance.
I redesigned all 28 themes across iOS, iPadOS, and Android, ensuring both light and dark modes delivered a more compelling experience.
The Problem
How do you systematize subjective taste?
The previous themes were outdated and low-resolution, which is not acceptable for a paid feature.
During the Android redesign, the plus button was removed from the bottom navigation bar. This button previously changed with each theme, so its removal reduced the visibility of Premium themes. As a result, themes no longer stood out and required a significant update. The redesign also strengthened the value proposition for Premium.
The main challenge was not simply designing 28 attractive themes, but creating a system that translated subjective taste into a clear, consistent, and broadly appealing experience.
The Problem
How do you systematize subjective taste?
The previous themes were outdated and low-resolution, which is not acceptable for a paid feature.
During the Android redesign, the plus button was removed from the bottom navigation bar. This button previously changed with each theme, so its removal reduced the visibility of Premium themes. As a result, themes no longer stood out and required a significant update. The redesign also strengthened the value proposition for Premium.
The main challenge was not simply designing 28 attractive themes, but creating a system that translated subjective taste into a clear, consistent, and broadly appealing experience.
The Messy Middle
My approach began with core system decisions.
Audit: I reviewed all existing themes and illustration styles to identify strengths and areas for improvement.
Map the header: I identified safe areas within the header, ensuring illustrations did not interfere with tap targets such as the date, profile, icons, and buttons. Each theme remained visually distinct. Define base colors: I established a limited set of base colors to simplify implementation and avoid excessive complexity for engineering.
Set the illustration style: I established an illustration style consistent with the Lose It! brand.
Explore headers: After defining the system, I developed header concepts for each theme.
Throughout the process, I considered the following key questions:
How can 28 themes remain distinct yet cohesive? Each theme needed a unique identity without creating visual inconsistency.
How can themes be decorative without distracting from core content? Users access the app for their data, and themes appear in the header behind this information.
How can themes feel both premium and personal without excluding users? Overly specific aesthetics risk making themes feel less inclusive.
I worked mostly in Illustrator and Figma and used Adobe’s AI tools to generate illustration components when I needed a fast starting point, then reworked them by hand until the style, placement, and quality fit. I also ran broader AI explorations to test directions but set most aside. Throughout the process, I paid careful attention to accessibility by ensuring sufficient color contrast between text, backgrounds, and illustrations for maximum readability across all themes. I avoided color combinations that could be problematic for users with color vision deficiencies, and I verified that illustration details did not interfere with screen elements or reduce information clarity. This work had too many real constraints—such as accessibility, safe areas, platform differences, and cultural nuance—for a generated image to satisfy.
Collaboration was enjoyable; PMs occasionally provided rough sketches of theme ideas, which I then developed into final designs.
The Messy Middle
My approach began with core system decisions.
Audit: I reviewed all existing themes and illustration styles to identify strengths and areas for improvement.
Map the header: I identified safe areas within the header, ensuring illustrations did not interfere with tap targets such as the date, profile, icons, and buttons. Each theme remained visually distinct. Define base colors: I established a limited set of base colors to simplify implementation and avoid excessive complexity for engineering.
Set the illustration style: I established an illustration style consistent with the Lose It! brand.
Explore headers: After defining the system, I developed header concepts for each theme.
Throughout the process, I considered the following key questions:
How can 28 themes remain distinct yet cohesive? Each theme needed a unique identity without creating visual inconsistency.
How can themes be decorative without distracting from core content? Users access the app for their data, and themes appear in the header behind this information.
How can themes feel both premium and personal without excluding users? Overly specific aesthetics risk making themes feel less inclusive.
I worked mostly in Illustrator and Figma and used Adobe’s AI tools to generate illustration components when I needed a fast starting point, then reworked them by hand until the style, placement, and quality fit. I also ran broader AI explorations to test directions but set most aside. Throughout the process, I paid careful attention to accessibility by ensuring sufficient color contrast between text, backgrounds, and illustrations for maximum readability across all themes. I avoided color combinations that could be problematic for users with color vision deficiencies, and I verified that illustration details did not interfere with screen elements or reduce information clarity. This work had too many real constraints—such as accessibility, safe areas, platform differences, and cultural nuance—for a generated image to satisfy.
Collaboration was enjoyable; PMs occasionally provided rough sketches of theme ideas, which I then developed into final designs.
Top 3 Design Decisions
Decision 1
How do 28 themes stay one family?
The problem: Creating a unique color set for each theme would result in an incoherent user experience and increased complexity for engineering.
What I did: I defined a limited set of base colors—purple, green, pink, blue, yellow, a brownish yellow, signature orange, and gray—and assigned each theme to one. Interface elements derive their colors from these bases, with only the header art varying. For example, both Space and Music use purple, while the green theme features a subtle gradient.
How it helped: The 28 themes are distinct yet cohesive, and engineers manage a streamlined set of color variations. This structure enhances both coherence and perceived value.
The tradeoff: Individual themes have less color flexibility, so some rely more on header art for distinction. However, this approach ensures greater consistency and ease of future theme development.
Decision 1
How do 28 themes stay one family?
The problem: Creating a unique color set for each theme would result in an incoherent user experience and increased complexity for engineering.
What I did: I defined a limited set of base colors—purple, green, pink, blue, yellow, a brownish yellow, signature orange, and gray—and assigned each theme to one. Interface elements derive their colors from these bases, with only the header art varying. For example, both Space and Music use purple, while the green theme features a subtle gradient.
How it helped: The 28 themes are distinct yet cohesive, and engineers manage a streamlined set of color variations. This structure enhances both coherence and perceived value.
The tradeoff: Individual themes have less color flexibility, so some rely more on header art for distinction. However, this approach ensures greater consistency and ease of future theme development.
Decision 2
How do you design inclusively without losing specificity?
The problem: A theme such as International Women’s Day could unintentionally represent a narrow perspective, potentially excluding users who do not identify with it.
What I did: I explored various styles, avoided overly specific representations, and chose silhouettes of women in diverse shapes and sizes, ensuring they were present but understated in both light and dark modes.
How it helped: The theme appears celebratory and inclusive, allowing more users to feel represented. This increases its personal relevance and Premium value.
The tradeoff: The result is a more understated, less illustrative design. However, a theme that appeals to a broader audience better supports the Premium experience.
Decision 2
How do you design inclusively without losing specificity?
The problem: A theme such as International Women’s Day could unintentionally represent a narrow perspective, potentially excluding users who do not identify with it.
What I did: I explored various styles, avoided overly specific representations, and chose silhouettes of women in diverse shapes and sizes, ensuring they were present but understated in both light and dark modes.
How it helped: The theme appears celebratory and inclusive, allowing more users to feel represented. This increases its personal relevance and Premium value.
The tradeoff: The result is a more understated, less illustrative design. However, a theme that appeals to a broader audience better supports the Premium experience.
Decision 3
Should artwork be universal or tailored for each platform?
The problem: On iPad, images appeared heavily zoomed and misaligned. Themes that looked correct on phones did not translate well to tablets. Older iOS versions and Liquid Glass also required different handling.
What I did: After extensive testing with engineering, I determined that layout adjustments, not improved exports, were needed. For iPad, I repositioned and resized scene elements for better balance. I created separate versions for older iOS and Liquid Glass, delivering WebP files at appropriate resolutions for Android and SVGs for iOS.
How it helped: Each theme now appears intentional and well-designed on every device, resulting in a polished user experience.
The tradeoff: This approach required designing and maintaining more assets. While using a single version would have been simpler, it would not deliver a premium experience. The additional effort resulted in a more polished product that aligns with user expectations for a paid feature.
Decision 3
Should artwork be universal or tailored for each platform?
The problem: On iPad, images appeared heavily zoomed and misaligned. Themes that looked correct on phones did not translate well to tablets. Older iOS versions and Liquid Glass also required different handling.
What I did: After extensive testing with engineering, I determined that layout adjustments, not improved exports, were needed. For iPad, I repositioned and resized scene elements for better balance. I created separate versions for older iOS and Liquid Glass, delivering WebP files at appropriate resolutions for Android and SVGs for iOS.
How it helped: Each theme now appears intentional and well-designed on every device, resulting in a polished user experience.
The tradeoff: This approach required designing and maintaining more assets. While using a single version would have been simpler, it would not deliver a premium experience. The additional effort resulted in a more polished product that aligns with user expectations for a paid feature.
The Challeges
The greatest challenge was not any single theme, but ensuring that subjective design choices could withstand diverse opinions while maintaining quality. Throughout the project, I regularly collaborated work-in-progress themes to PMs and engineering for feedback.
There were instances where opinions on illustration style, color intensity, or theme specificity diverged. In those situations, I facilitated focused discussions to clarify the rationale behind my design decisions and listened carefully to the concerns raised. When consensus wasn’t immediate, I explored quick mockups or alternative visualizations to test competing ideas with the group. This iterative process helped align the team and surface the best solutions. Ultimately, documenting the decision criteria ensured that even under ambiguity, our choices were intentional and supported the overall goals for Premium value and inclusivity.
The Challeges
The greatest challenge was not any single theme, but ensuring that subjective design choices could withstand diverse opinions while maintaining quality. Throughout the project, I regularly collaborated work-in-progress themes to PMs and engineering for feedback.
There were instances where opinions on illustration style, color intensity, or theme specificity diverged. In those situations, I facilitated focused discussions to clarify the rationale behind my design decisions and listened carefully to the concerns raised. When consensus wasn’t immediate, I explored quick mockups or alternative visualizations to test competing ideas with the group. This iterative process helped align the team and surface the best solutions. Ultimately, documenting the decision criteria ensured that even under ambiguity, our choices were intentional and supported the overall goals for Premium value and inclusivity.
The Outcome
Themes evolved from outdated, low-resolution visuals to a polished, cohesive system with a premium feel. Theme usage increased by over 7% on both platforms following the redesign, indicating strong user adoption. The new system is also more scalable, as each theme now begins with a defined base color and safe areas.
The Outcome
Themes evolved from outdated, low-resolution visuals to a polished, cohesive system with a premium feel. Theme usage increased by over 7% on both platforms following the redesign, indicating strong user adoption. The new system is also more scalable, as each theme now begins with a defined base color and safe areas.
My Reflection
Structure enables creativity rather than restricting it. Base colors, safe areas, and a unified illustration style allowed for expressive design across 28 themes without sacrificing consistency. Even subjective work benefits from rigor; with clear rules, taste can be scaled and remain inclusive.
My Reflection
Structure enables creativity rather than restricting it. Base colors, safe areas, and a unified illustration style allowed for expressive design across 28 themes without sacrificing consistency. Even subjective work benefits from rigor; with clear rules, taste can be scaled and remain inclusive.
