Skincare and Wellness App Design

Christian

Christian Toro

Overview

KALA is a skincare and wellness app designed to empower users to lead healthier, and track their insights. The platform simplifies managing beauty and health routines, streamlines appointment scheduling, manage and acquire products, and fosters community engagement.
The design process was rooted in HUman-Centered Design, that makes self-care accessible, manageable, and enjoyable, focusing on creating intuitive workflows and interfaces that addressed the needs of KALA's users.

Process

Discover (Empathize)

Conducted user-centric meetings with the Project Manager to align with customer pain points and goals.
Gathered insights into user behaviors, needs, and expectations for managing wellness routines, ensuring the app met real-world demands.
Explored competitor analysis and industry benchmarks to inform best practices in usability and visual design.
User-Centered Approach. Despite the lack of direct user data, I applied UCD principles by working closely with stakeholders to understand the end users’ expectations and pain points. Each design decision was made to enhance usability, accessibility, and alignment with the users' wellness goals.

Define

Synthesized gathered insights into actionable design goals, ensuring a clear focus on user journey optimization.
Defined user personas and their workflows, aligning them with brand values and app objectives.
Collaborated closely with stakeholders to establish a shared vision for the product.

Develop (Ideate & Prototype)

Ideated visual elements and UI patterns that adhered to brand guidelines while promoting intuitive navigation and interaction.
Developed wireframes and user flows to visualize the journey across key app functionalities.
Created iterative prototypes, transitioning from low-fidelity sketches to high-fidelity, pixel-perfect designs.
Designed a comprehensive atomic design system, including components such as typography foundations, color palettes, buttons, modals, breadcrumbs, and chips.
Introduced design tokens to maintain consistency and scalability across development environments.

Deliver (Test & Implement)

Delivered a fully structured design system within the Builder UIW framework, optimized for seamless developer handoff.
Documented screen functionalities, user interaction goals, and technical specifications, providing clarity for cross-functional teams.
Used a cross-functional naming convention for design layers to enhance collaboration and efficiency.
Participated in ongoing feedback loops with stakeholders and developers to ensure design feasibility and alignment.

Challenges

Limited Initial User Insights

While direct access to user data was unavailable, UCD principles ensured that user needs remained the core focus. By interpreting stakeholder feedback and mapping it to potential user behaviors, I crafted designs that prioritized ease of use and engagement.

Balancing Brand Guidelines with Innovation

Ensuring the design adhered to the existing brand guidelines while introducing modern, intuitive visual elements that elevated the user experience. Solution: Prototyped multiple design concepts and validated them through collaborative discussions with stakeholders to achieve a balance between brand identity and usability.

Comprehensive Design System Creation

Developing an atomic design system from scratch, including detailed components and tokens, required a meticulous approach to maintain consistency and scalability across the app. Solution: Leveraged design frameworks and tools like Figma to document and test components iteratively, ensuring they were functional and developer-ready.

Efficient Developer Handoff

Communicating complex design intentions clearly to developers and ensuring seamless implementation without deviations was a critical challenge. Solution: Created detailed documentation for each screen, component, and interaction, highlighting functionality and user goals. A structured layer naming convention further streamlined collaboration.

Outcome

The project resulted in a cohesive, user-friendly app that elevated the self-care experience for users. By implementing a scalable design system and focusing on a seamless user journey, KALA achieved its goal of making wellness management intuitive and engaging. The use of atomic design principles and design tokens ensured a consistent and efficient development process, aligning with the app's mission to help users feel their best, inside and out.

Key UX Contributions

Improved user engagement by crafting workflows that prioritized ease of use and accessibility.
Developed a scalable design system that maintained brand consistency and reduced development time for future updates.
Implemented user-centered design principles to ensure the app resonated with its target audience.
Enhanced the usability of the app by applying best practices in interaction design and visual hierarchy.
Strengthened collaboration between design and development teams through detailed documentation and clear communication.
Like this project

Posted Aug 26, 2025

Designed a user-friendly skincare and wellness app with a scalable design system for KALA.

Likes

0

Views

1

Timeline

Feb 15, 2024 - Sep 15, 2024

Clients

KALA