This UX case study explores the development of the O'Keeffee's Care mobile app, which seamlessly integrates e-commerce with personalized medical recommendations. The app focuses on helping users effectively manage skin issues like cracks and bruises. Through user-centered design principles, research, and iterative development, this case study outlines the journey of creating an innovative solution that empowers users to address their health care needs conveniently and intuitively.
The primary objective of this project was to enhance the user experience by seamlessly integrating e-commerce functionalities into the existing O'Keeffee's Care brand. This integration aimed to provide users with a user-friendly and intuitive mobile app that offers personalized medical recommendations, empowering them to effectively manage skin issues
The proposed solution involves the creation of a mobile app by enabling users to select their specific skin condition, assess its severity, and receive accurate dosage recommendations for the right product usage, the app bridges the gap between health care products and user-centric e-commerce, providing an all-encompassing solution to manage skin issues effectively.
The project initiated a comprehensive investigative process. This included conducting primary and secondary research, interviewing users, and analyzing the existing website's strengths and weaknesses to identify areas for improvement. The design approach involved combining user-centered design principles with data-driven personalization. By understanding user needs and integrating medical recommendations, the app aimed to empower users to make informed choices about their skin care routines.
To further refine the user experience of the O'Keeffee's Care mobile app, a comprehensive Baymard analysis was conducted. Baymard Institute's extensive research on e-commerce usability and best practices served as a valuable resource for evaluating and improving the website’s usability and conversion potential.
Through a thorough heuristic evaluation, we achieved a remarkable transformation in the website's e-commerce score, catapulting it from 8 to an outstanding 97.6. Furthermore, our redesign introduces an enticing enhancement, the inclusion of complimentary product samples with every purchase. This innovative feature is poised to stimulate substantial sales growth.
Key findings from the heuristic evaluation included enhancements in information hierarchy, streamlined navigation, improved error handling, and a responsive design that ensured seamless user experiences across various devices. These improvements collectively elevated the app's usability and contributed to its impressive score.
Before diving into the design process, a thorough secondary research phase was conducted to gain a deeper understanding of the health care products market, user preferences, and existing solutions. This research provided valuable insights that informed the design decisions and helped position O'keeffe's Care app as a unique and valuable offering. Studying user behavior patterns within the health care and e-commerce sectors helped identify common pain points and expectations. Understanding how users navigate similar apps and make purchase decisions informed the app's design to ensure a familiar and intuitive experience.
Current website with 'no' E-commerce Integration
Options like "Add to cart" or "Buy now" are unavailable on the existing site
The Novel innovation and SaaS Solution Implementation for O'keeffe's website
The current website serves as a platform for product display and basic information. It allows users to browse the product catalog and see in which stores the product is available. The product listings page provides the product description in each category and also guides user how to use the product.
However, the website lacks personalization and fails to offer tailored recommendations. Users are left to navigate a vast array of products without guidance, resulting in confusion. Additionally, the absence of a user profile system limits the ability to track purchases and user preferences effectively.
1. Product Selection Confusion
2. Lack of Personalization
3. Complex Dosage Decisions
4. Navigational Challenges
5. Limited User Engagement
1. Personalized Recommendations
2. Intuitive Information Architecture
3. User Profiles and Engagement
4. Mobile Optimization
5. Streamlined Checkout
"How can we improve O'Keefee's customer experience with a dedicated app for healthcare product purchases and personalized skin condition-based recommendations?"
The target audience consisted of individuals seeking effective health care products for managing skin issues such as cracks and bruises. This included people of various age groups who were looking for specialized solutions to alleviate their skin problems.
To create a user-centric design for the O'keeffee's Care mobile app, a comprehensive understanding of the target audience was essential. This involved conducting thorough secondary research to identify common pain points, preferences, and behaviors within the health care products and e-commerce sectors. Building on this research, a detailed persona was crafted to represent a typical user, allowing for a more empathetic and tailored approach to the app's design.
The proposed solution was to create a mobile app enabling users to choose their specific skin condition, assess its severity, and receive accurate dosage recommendations for appropriate product usage. By having four distinct sections, allowing users to sign up, receive personalized medical recommendations, and make purchases seamlessly.
Card sorting exercises were conducted to determine the most intuitive information architecture for the app. This helped organize the content and features in a way that made sense to users.
Card sorting
Based on card sorting results, the information architecture was structured, creating a hierarchy that allowed users to easily navigate between sections, understand product offerings, and access medical recommendations.
User Flow
Low-fidelity wireframes were developed to outline the app's layout, interactions, and functionalities. These wireframes served as a blueprint for the app's design and were refined through user feedback.
Low-fidelity wireframes were developed to outline the app's layout, interactions, and functionalities. These wireframes served as a blueprint for the app's design and were refined through user feedback.
Style Guide
UI Components
Low-fidelity wireframes were developed to outline the app's layout, interactions, and functionalities. These wireframes served as a blueprint for the app's design and were refined through user feedback.
On-boarding Screens
User Preferences
Product Usage
