Client
A Fortune 500 financial services company
Duration
8 months, 2022
Team
PMs, Researchers, Devs
Role
Web UX Design
Design System
A simple, consistent, and engaging modern marketing site experience redesign to drive customer conversion and retention.
Overview
Challenge
CareFin* is a leading healthcare credit card company under a Fortune 500 financial service group. It provides 0% interest special healthcare financing options for treatments and procedures that typically are not covered by insurance.
CareFin marketing site provides info, tools, and channel for prospective customers to apply for its credit card and for cardholders to explore the use of the card. However, the previous version of the site has complex information hierarchy, inconsistent design, and out-of-date visuals.
CareFin marketing site provides info, tools, and channel for prospective customers to apply for its credit card and for cardholders to explore the use of the card. However, the previous version of the site has complex information hierarchy, inconsistent design, and out-of-date visuals.
My Outcome
I redesigned and shipped part of core pages and a core tool with satisfying results from user tests. I also managed and contributed to a UI library with various reusable website building blocks.
Our Workflow
We took an agile approach for the page design. For each sprint, I took ownership of the end-to-end design of one webpage, working closely with project manager, design manager, and researcher from EY, and PMs from CareFin. After 4-5 sprints, I participated in user tests and worked with developers to hand off my design.
Final Design
A simpler way to learn about CareFin
We made the How It Works page content more cohesive and tailored to prospective customers by answering what they care about most: What’s CareFin, why CareFin, and how and where to use CareFin.
.png)
An aggregation of all the ways to use CareFin
A plain card layout including all accepted healthcare categories and retail partners for customers to easily find inspirations and learn CareCredit benefits in the area of interest.
Learn the extended use of CareFin in health systems
We created a scalable template to introduce how to use CareCredit for eligible services offered by health system partners.
Help customers understand personal financing needs
A dedicated place for customers to understand the financial costs for different healthcare services.
A UI library with reusable website building blocks
I managed the UI library with foundation pages, components, and building blocks in Figma to ensure visual consistency and streamline the design workflow.
Elevate UX through moments of delight
I designed a set of UI animations to make the overall user experience more enjoyable and make the brand more approachable.
Process
1. Gather requirements and review analytics
I took a comprehensive research approach to ensure the design meets user desirability, technical feasibility, and business viability:
- Requirement gathering activities: At the start of a design sprint, we met stakeholders to understand the business needs and technical constraints.
- Data analytics: I reviewed analytics reports, including overall traffic sources, and the expose and attraction rates of content sections to get quantitative insights into user behaviors.
- Persona review and user journey mapping: Based on defined site personas and analytics insights, I mapped out use cases of each web page.
2. Ideations & Evaluation
Our strategy is to help CareCredit marketing site deliver values through simplifying and building trust. Modular design approach is used to put this strategy into action. I ideated on various directions to visualize required features. In design evaluation, all concepts are put into two categories - MVP concepts and future vision concepts based on effort & impact analysis.
For MVP concepts, the variants differ in responsive layouts. We evaluated them based on:
For MVP concepts, the variants differ in responsive layouts. We evaluated them based on:
- Simplicity and clarity: If they can effectively communicate info in an intuitive way.
- Efficiency: The use of vertical real estate.
- Scalability: A resilient structure that can easily incorporate new content.
For vision concepts, the evaluation criteria focus on the feature feasibility and if they fit on the roadmap.
.png)
3. Wireframes
We used wireframes to put the optimized existing content and new modular ideas together in a thoughtful content flow based on the user journey to showcase a desired user experience.
Responsive design approach: As the site analytics indicates nearly 70% of site traffic is from mobile devices, we designed mobile, tablet, and desktop breakpoints simultaneously to ensure the quality of mobile ux and cross-breakpoint consistency.
Responsive design approach: As the site analytics indicates nearly 70% of site traffic is from mobile devices, we designed mobile, tablet, and desktop breakpoints simultaneously to ensure the quality of mobile ux and cross-breakpoint consistency.
.png)
4. Visual design & Prototypes
I crafted high fidelity mock-ups and prototypes using a dedicated UI library I managed. I also identified reusable modular widgets or components to add to the UI library as building blocks.
As a part of visual design, I also created graphical assets for elevating UX, such as illustrations and UI motions.
As a part of visual design, I also created graphical assets for elevating UX, such as illustrations and UI motions.
.png)
5. Validation through user testing
We conducted 6 testing sessions to learn if the content, imagery, navigation, and new features are simple and clear to understand and trustable to users. I made the prototypes for testing and participated in testing sessions.
We got positive feedback from the participants and validated the usability and aesthetics of our new design.
We got positive feedback from the participants and validated the usability and aesthetics of our new design.
6. Handoff
I wrote design specifications for design handoff with developers, including spacing, interaction states, motion specs, and edge cases, etc.
