ELLIE LIN
Kept Health
An MVP Application Revolutionizing Digital Dermatology and Skincare, Catering to All Skin Tones.
Project Context
K’ept Health is an early-stage startup and new product focused on inclusive and holistic dermatological care using AI-powered technology. It helps users discover skincare issues, track progress and routine, and connect with licensed aestheticians and dermatologists with experience related to their concerns.
Business Goals
Our primary objective was to craft a high-fidelity wireframe capable of functioning as a Minimum Viable Product (MVP) application, thereby simplifying and demystifying the realm of dermatology. By achieving this, we aimed to make dermatological care more accessible and user-friendly.
Collaborative Approach
In this endeavor, I had the privilege of working closely with the founder and CEO of K'ept Health, as well as other talented designers. The founder entrusted me with the task of building upon the work of previous designers, and our collaboration was marked by ongoing engagement throughout the entire design process.
My Role
As a member of our agile and cohesive design team, I undertook various responsibilities, including the development of user interface (UI) features and high-fidelity wireframes. I also played a pivotal role in prototyping and establishing a robust design system to ensure consistency and scalability. Additionally, I conducted comprehensive user testing to validate functionality and iterated through multiple rounds of refinement. This multifaceted involvement allowed us to create a user-centered and effective solution for K'ept Health.
TEAM
DELIVERABLES
PLATFORM
-
3 UX Designer
-
Product Owner
-
Competitive Analysis
-
Solution Ideation
-
Site Map
-
Wireframe
-
Style Guide
-
Prototype
-
Usability Testing
-
Figma
-
Miro
Process
During our initial meeting, our team of three designers had a productive discussion with the product owner. We explored her anticipated deliverables, reviewed the existing wireframe, established a well-structured timeline, and gained a comprehensive understanding of the company's goals and limitations.
Discover
Competitive Analysis
Our design journey commenced with a comprehensive competitive analysis, enabling us to gain insights into similar products available in the market. We carefully examined their Unique Value Propositions (UVPs), useful features, and onboarding processes. This exercise served as a valuable foundation for refining our own approach.
Enhancing the K'ept Health Design
Upon evaluating the existing design, we recognized that it possessed the essential components but lacked the finesse exhibited by our competitors. This prompted us to elevate the execution to ensure our product could stand out in the competitive landscape.
User-Centric Approach
Our target audience consisted of three distinct yet interconnected groups of busy women with unique skin care needs and a shared desire to monitor their skin health effectively. These users had specific objectives in mind:
User Goals
-
Seamlessly monitor any skin condition.
-
Easily determine the most effective products, procedures, and routines tailored to their needs.
-
Conveniently access medical care and advice at their convenience.
Site Map
While reviewing the existing wireframes, we began to envision how users would interact with and navigate through the screens. A comprehensive site map was lacking in the previous design. Since our users prioritized tracking their progress and obtaining quick assistance, we honed in on the core functions needed to take center stage in the app's user experience.
The four primary landing pages within the app include:
-
Home: A hub for swiftly accessing information related to skin concerns.
-
Care: A gateway to seek expert assistance from aestheticians or dermatologists.
-
My Routine: A personalized space for tracking current products, treatments, and personal notes.
-
Profile: An area to monitor skin health, set goals, and review historical data.
Ideating Solution
Upon a thorough review of the existing wireframes and the development of the site map, our team identified several usability issues that required attention. We presented our stakeholders with a set of four primary issues that needed resolution:
Home
Profile
Skin Monitor
Skin Analysis
Yelp
-
The Home and Profile Screens require a dedicated redesign to align with their objectives.
-
The Skin Health Monitor and Skin Analysis Screens also warrant a redesign to focus on their respective goals.
MAIN ISSUES:
Key Findings
An absence of a clear hierarchy within the current wireframes poses a potential obstacle to user engagement, which could ultimately impact the product's overall success.
#1. Overlapping functionality exists across multiple screens, leading to redundancy.
#2. Determining where and how users can effectively "track progress" within the app remains unclear.
#3. Users require efficient organization and comprehension of information.
#4. Given that users tend to scan content, especially text-heavy sections, there is a risk of overlooking
critical information.
#5. While consistency and proximity assist users in scanning, visual distinctions are essential for
enhancing usability.
POTENTIAL SOLUTION:
#1. Establish distinct and focused goals for each screen to streamline user interactions.
#2. Incorporate a dedicated "track progress" feature for enhanced user engagement and goal tracking.
#3. Maintain proximity between information and relevant actions for improved clarity.
#4. Utilize visual differentiation to emphasize important information and calls to action on each page,
enhancing the overall user experience.
Design
Gathering Inspiration
In our pursuit of diverging from conventional cosmetic and beauty-oriented application designs, I opted for an editorial and retro aesthetic approach while upholding a sense of simplicity and sophistication. This creative choice was driven by our overarching goal of setting our product apart from the industry norms and effectively conveying our mission to educate and empower users with comprehensive skin knowledge.
Design system
While we've chosen monotone as our primary color, which imparts an elegant, clean, and even retro aesthetic, it was crucial to introduce a single accent color to enhance the design's appeal. This accent color not only makes the design more inviting but also assists users in quickly identifying important messages.
MVP Design Enhancements
In our MVP design phase, we made several crucial improvements:
-
Home Screen: We introduced four prominent buttons on the home screen: Questionnaire, Skin Goals, Analysis, and Routine. Furthermore, we relocated the virtual/chat session to the Navbar, specifically within the "Care" tab.
-
Redesigned Home and Profile: To enhance user clarity and distinguish between screens, we initiated a comprehensive redesign of both the Home and Profile screens.
-
Card UI Design: I conceptualized and implemented a Card UI design, which was consistently applied throughout the platform for a cohesive and intuitive user experience.
HOME
.png)
PROFILE
SKIN HEALTH MONITOR
QUESTIONNAIRE
Key Solutions Implemented
As part of these design enhancements, we implemented key solutions to optimize user interaction and comprehension:
-
Progress Bar: We introduced a visually informative progress bar to help users track their progress within the app, offering clear guidance on their journey.
-
Next Button Refinement: We refined the user interface by simplifying it, featuring the "Next" button as the sole action button on each page. Additionally, we reworded this button to provide users with a preview of what to expect on the subsequent page, thus enhancing user expectations.
-
Analysis Chart: We developed an Analysis Chart to empower users with an easy-to-follow tool for tracking their results, reinforcing our commitment to delivering a comprehensive, user-centric solution.
Testing with the Potential Users
Following the creation of a Hi-fi wireframe based on the insights gathered during the design audit, our primary focus was on effectively communicating the premium value to users. To accomplish this, we recruited five participants to evaluate our final Hi-fi prototype.
KEY FINDINGS:
#1. 4 out of 5 users found it unclear what information was available in the "care" tab.
#2. All 5 users expressed uncertainty about the purpose of completing the skin analysis.
#3. All 5 users noted that the descriptions for input fields were too vague.
#4. 4 out of 5 users were unsure about the distinction between a "skin health monitor" and an "analysis."
ITERATIVE SOLUTIONS:
#1. Eliminated the "care" tab and introduced individual icons in the Navbar for features such as virtual
visits and chat sessions.
#2. We enhanced the onboarding process to provide a comprehensive explanation of the skin analysis,
emphasizing its perceived value.
#3. We improved the clarity of input labels, ensuring users understand the available choices without
relying on dropdown menus.
#4. We removed the "Analysis" button from the Navbar and replaced it with the "Skin Analysis" function
on the home page, eliminating confusion about the terminology used.
Validation
One of the most significant challenges we encountered was deciding whether to keep the Virtual/Chat Session within the Care tab or as individual icons. The client strongly believed in maintaining them within the Care tab for a unified appearance. However, our validation testing revealed that all five users struggled to find Virtual/Chat sessions within the Care tab, leading to confusion. After extensive discussions, we reached a consensus to eliminate the Care tab and incorporate individual icons into the Navbar, providing a more intuitive solution.
Reflection
In hindsight, this project provided a valuable opportunity to collaborate as a team and enhance the clarity, navigation, and mobile experience of the existing wireframe. Looking ahead, I have a few suggestions for further improvement:
-
Consider incorporating additional information such as testimonials, user reviews, and other supportive data to establish trust and credibility with users.
-
Users expressed a preference for seeing results along with the next steps. Providing additional information that communicates accuracy can enhance the user experience.
-
When users submit a case, consider implementing an option that allows them to upload more photos, providing greater flexibility and utility in the process.