Back To My Work
CharmLife
CharmLife
START-UP
START-UP
START-UP
HEALTHCARE & BEAUTY
HEALTHCARE & BEAUTY
HEALTHCARE & BEAUTY
SAAS
SAAS
SAAS
DESIGN SYSTEMS
DESIGN SYSTEMS
DESIGN SYSTEMS
ACCESSIBILITY
ACCESSIBILITY
ACCESSIBILITY
UI KITS
UI KITS
UI KITS
My Role
User research: Competitor
analysis and Design patterns research
UX design: UI UX, Responsive design, Design systems, UI kits, WCAG Accessibility inclusion
Communication: Presenting to 15+ stakeholders
User research: Competitor
analysis and Design patterns research
UX design: UI UX, Responsive design, Design systems, UI kits, WCAG Accessibility inclusion
Communication: Presenting to 15+ stakeholders
User research: Competitor
analysis and Design patterns research
UX design: UI UX, Responsive design, Design systems, UI kits, WCAG Accessibility inclusion
Communication: Presenting to 15+ stakeholders
Project Context
Dec 2023 - Apr 2024 (contract) Internship at CharmLife
Design Team: Ennis Zhuang, Regina Pillai, Jesse
Dec 2023 - Apr 2024 (contract) Internship at CharmLife
Design Team: Ennis Zhuang, Regina Pillai, Jesse
Dec 2023 - Apr 2024 (contract) Internship at CharmLife
Design Team: Ennis Zhuang, Regina Pillai, Jesse
Tools
Figma
Adobe Suite
Figma
Adobe Suite
Figma
Adobe Suite
Summary
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
Background
CharmLife was an early-stage B2C start-up in the healthcare and beauty market. Their large scale and complex web app was still in the MVP development stage and had yet to acquire customers. Their goal was to create a thriving community centred around beauty and lifestyle, offering online booking for cosmetic doctor appointments, access to doctor information, posts, reviews, and exclusive deals.
CharmLife was an early-stage B2C start-up in the healthcare and beauty market. Their large scale and complex web app was still in the MVP development stage and had yet to acquire customers. Their goal was to create a thriving community centred around beauty and lifestyle, offering online booking for cosmetic doctor appointments, access to doctor information, posts, reviews, and exclusive deals.
CharmLife was an early-stage B2C start-up in the healthcare and beauty market. Their large scale and complex web app was still in the MVP development stage and had yet to acquire customers. Their goal was to create a thriving community centred around beauty and lifestyle, offering online booking for cosmetic doctor appointments, access to doctor information, posts, reviews, and exclusive deals.
Problem
The web app had a poor, non-responsive UI, low contrast, and lacked core features—risking lost customers and investor interest due to weak brand perception. CharmLife wanted to expand their market, they needed me to evolve their existing concept, enhance UI/UX and bring their web app to other devices.
The web app had a poor, non-responsive UI, low contrast, and lacked core features—risking lost customers and investor interest due to weak brand perception. CharmLife wanted to expand their market, they needed me to evolve their existing concept, enhance UI/UX and bring their web app to other devices.
The web app had a poor, non-responsive UI, low contrast, and lacked core features—risking lost customers and investor interest due to weak brand perception. CharmLife wanted to expand their market, they needed me to evolve their existing concept, enhance UI/UX and bring their web app to other devices.
Project Scope
In 4 months, I was tasked with developing their prototype and creating responsive designs for new and existing pages. Prioritising improved UI/UX with inclusion of new design trends.
Project Scope - In 4 months, I was tasked with developing their prototype and creating responsive designs for new and existing pages. Prioritising improved UI/UX with inclusion of new design trends.
I discussed what I had to do with product management and the design lead. I then collaborated with developers and UI/UX designers to present, discuss, and refine designs. I was also tasked with creating new features and user flows. My expectations within the timeframe was to make the web app more responsive, improve accessibility, and gauge my expertise to improve what they had.
I discussed what I had to do with product management and the design lead. I then collaborated with developers and UI/UX designers to present, discuss, and refine designs. I was also tasked with creating new features and user flows. My expectations within the timeframe was to make the web app more responsive, improve accessibility, and gauge my expertise to improve what they had.
I discussed what I had to do with product management and the design lead. I then collaborated with developers and UI/UX designers to present, discuss, and refine designs. I was also tasked with creating new features and user flows. My expectations within the timeframe was to make the web app more responsive, improve accessibility, and gauge my expertise to improve what they had.
Empathise
During the responsive design process, I noticed these 3 improvement areas, that could have added a lot of value with little cost.
Empathise - During the responsive design process, I noticed these 3 improvement areas, that could have added a lot of value with little cost.
Spacing:
The spacing on some existing pages were inconsistent which made the UI look messy and brand less trustworthy.
Existing spacing scaled awkwardly when scaling across devices, for example 0.75px instead of 1px.
Accessibility:
The colour contrast for some visual elements did not meet WCAG guidelines.
There were missed opportunities for improving accessibility.
In some areas text could have been reduced to fewer lines for better readability.
Design systems:
The existing type scale scaled badly across devices with subpixel rounding issues.
The user interface text lacked a pronounced visual hierarchy.
Pain Points
Pain Points
Spacing:
The spacing on some existing pages were inconsistent which made the UI look messy and brand less trustworthy.
Existing spacing scaled awkwardly when scaling across devices, for example 0.75px instead of 1px.
The spacing on some existing pages were inconsistent which made the UI look messy and brand less trustworthy.
Existing spacing scaled awkwardly when scaling across devices, for example 0.75px instead of 1px.
Accessibility:
The colour contrast for some visual elements did not meet WCAG guidelines.
There were missed opportunities for improving accessibility.
In some areas text could have been reduced to fewer lines for better readability.
The colour contrast for some visual elements did not meet WCAG guidelines.
There were missed opportunities for improving accessibility.
In some areas text could have been reduced to fewer lines for better readability.
Design systems:
The existing type scale scaled badly across devices with subpixel rounding issues.
The user interface text lacked a pronounced visual hierarchy.
The existing type scale scaled badly across devices with subpixel rounding issues.
The user interface text lacked a pronounced visual hierarchy.
Improvement. 1
I introduced an 8pt and 4pt spacing system to replace inconsistent spacing that often led to non-rounded sizes like 0.75px.
Improvement. 1 - I introduced an 8pt and 4pt spacing system to replace inconsistent spacing that often led to non-rounded sizes like 0.75px.
This system leveraged the fact that common resolutions like 1920x1080p are divisible by 8 and 4. Meaning UI will look and scale much better on devices like mobile. The more organised UI created a higher perception of brand quality.
This system leveraged the fact that common resolutions like 1920x1080p are divisible by 8 and 4. Meaning UI will look and scale much better on devices like mobile. The more organised UI created a higher perception of brand quality.
This system leveraged the fact that common resolutions like 1920x1080p are divisible by 8 and 4. Meaning UI will look and scale much better on devices like mobile. The more organised UI created a higher perception of brand quality.
Improvement. 2
I improved text visibility across lighting conditions by increasing boldness and adhering to WCAG guidelines, while preserving the white-on-orange theme.
Improvement. 2 - I improved text visibility across lighting conditions by increasing boldness and adhering to WCAG guidelines, while preserving the white-on-orange theme.
This addressed a key issue of low colour contrast that hindered readability, especially for small text, identified using a WCAG contrast checker.
This addressed a key issue of low colour contrast that hindered readability, especially for small text, identified using a WCAG contrast checker.
This addressed a key issue of low colour contrast that hindered readability, especially for small text, identified using a WCAG contrast checker.
Improvement. 3
I contributed to building UI kits with components using booleans and variants, cutting average design time per page from 5 hours to 4.
Improvement. 3 - I contributed to building UI kits with components using booleans and variants, cutting average design time per page from 5 hours to 4.
I also I identified subpixel rounding issues in the existing type scale (fonts) and helped revise it for better cross-device scaling and visual hierarchy.
I also I identified subpixel rounding issues in the existing type scale (fonts) and helped revise it for better cross-device scaling and visual hierarchy.
I also I identified subpixel rounding issues in the existing type scale (fonts) and helped revise it for better cross-device scaling and visual hierarchy.
Prototyping
To expand device compatibility, our design team collaborated across time zones in Figma, creating and refining high-fidelity wireframes for 4 screen sizes.
Prototyping - To expand device compatibility, our design team collaborated across time zones in Figma, creating and refining high-fidelity wireframes for 4 screen sizes.
I personally delivered 12+ responsive wireframes, resolving UI/UX issues along the way. This led to a successful MVP v1 launch with broader market reach and added features like doctor appointment booking.
I personally delivered 12+ responsive wireframes, resolving UI/UX issues along the way. This led to a successful MVP v1 launch with broader market reach and added features like doctor appointment booking.
I personally delivered 12+ responsive wireframes, resolving UI/UX issues along the way. This led to a successful MVP v1 launch with broader market reach and added features like doctor appointment booking.
Results
I successfully evolved the concept MVP by adding new features and pages, fixing UI/UX issues, and optimising it for more devices.
Results - I successfully evolved the concept MVP by adding new features and pages, fixing UI/UX issues, and optimising it for more devices.
01. 2 Scalability features added
I improved scalability by introducing 8pt spacing to their layout. And by introducing better scalable font sizes to their design system.
I improved scalability by introducing 8pt spacing to their layout. And by introducing better scalable font sizes to their design system.
I improved scalability by introducing 8pt spacing to their layout. And by introducing better scalable font sizes to their design system.
02. 1 New accessibility feature added
I helped improve accessibility by introducing WCAG compliant colours to their their design system.
I helped improve accessibility by introducing WCAG compliant colours to their their design system.
I helped improve accessibility by introducing WCAG compliant colours to their their design system.
03. Improved responsiveness with 12+ wireframes
I expanded their market reach by designing responsive, high-fidelity wireframes for 4 screen sizes.
I expanded their market reach by designing responsive, high-fidelity wireframes for 4 screen sizes.
I expanded their market reach by designing responsive, high-fidelity wireframes for 4 screen sizes.
Lessons
I worked with international teams in agile development, in a fast paced start-up setting. Developing an early stage product provided challenges and a great learning experience.
Lessons - I worked with international teams in agile development, in a fast paced start-up setting. Developing an early stage product provided challenges and a great learning experience.
01. Comfort with ambiguity
Think in systems, about elements as part of a wider whole. Consider how elements connect, and research successful design patterns.
Think in systems, about elements as part of a wider whole. Consider how elements connect, and research successful design patterns.
Think in systems, about elements as part of a wider whole. Consider how elements connect, and research successful design patterns.
02. Working with front-end developers
Use auto-layout for key UI elements instead of aiming for pixel-perfect precision, and design with a box-based mindset aligned with CSS and front-end structure.
Use auto-layout for key UI elements instead of aiming for pixel-perfect precision, and design with a box-based mindset aligned with CSS and front-end structure.
Use auto-layout for key UI elements instead of aiming for pixel-perfect precision, and design with a box-based mindset aligned with CSS and front-end structure.
03. Global collaboration
Be flexible across time zones, use communication tools effectively, and clearly define deadlines in all relevant zones.
Be flexible across time zones, use communication tools effectively, and clearly define deadlines in all relevant zones.
Be flexible across time zones, use communication tools effectively, and clearly define deadlines in all relevant zones.
Testimonials
Feedback for This Project
Testimonials - Feedback for This Project
See testimonials for this project from former CharmLife colleagues.
See testimonials for this project from former CharmLife colleagues.
See testimonials for this project from former CharmLife colleagues.
"He excels in adhering to various web standards and design guidelines, ensuring the readability and the visual language of our product. Really impactful!"
"He seamlessly integrates user needs and feedback and his commitment to accessibility ensures that the designs are inclusive and reach a diverse audience."
UI/UX Designer, CharmLife
Other Work
Padmadkenya
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
Savoy
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
UI Showcase
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
