Back To My Work
PadmadKenya
PadmadKenya
E-COMMERCE
E-COMMERCE
E-COMMERCE
CSS
CSS
CSS
CRO
CRO
CRO
UI/UX
UI/UX
UI/UX
FIGMA
FIGMA
FIGMA
WORDPRESS
WORDPRESS
WORDPRESS
PROTOTYPING
PROTOTYPING
PROTOTYPING
My Role
User research: UX analysis and reporting, UX Audits, Competitor analysis, User stories, Key statements (problem, hypothesis, goal), Conversion psychology research
UX design: Responsive mock-ups, Email branding, Accessibility accommodation, User flow diagrams, Prototyping on WordPress with CSS/HTML
Communication: UX presentations, Development process documentation
User research: UX analysis and reporting, UX Audits, Competitor analysis, User stories, Key statements( problem, hypothesis, goal), Conversion psychology research
UX design: Responsive mock-ups, Email branding, Accessibility accommodation, User flow diagrams, Prototyping on WordPress with CSS/HTML
Communication:
UX presentations, Development process documentation
User research: UX analysis and reporting, UX Audits, Competitor analysis, User stories, Key statements( problem, hypothesis, goal), Conversion psychology research
UX design: Responsive mock-ups, Email branding, Accessibility accommodation, User flow diagrams, Prototyping on WordPress with CSS/HTML
Communication:
UX presentations, Development process documentation
Project Context
Aug 2022 - Jan 2023 (part-time) Work at 1Point3Creative (agency)
Design Team: Ken Charles
Aug 2022 - Jan 2023 (part-time)
Work at 1Point3Creative (agency)
Design Team: Ken Charles
Aug 2022 - Jan 2023 (part-time)
Work at 1Point3Creative (agency)
Design Team: Ken Charles
Tools
WordPress (Avada, Elementor)
Adobe Suite
Figma
Atlassian Suite (Jira, Slack, Confluence, Trello)
WordPress (Avada, Elementor)
Adobe Suite
Figma
Atlassian Suite (Jira, Slack, Confluence, Trello)
WordPress (Avada, Elementor)
Adobe Suite
Figma
Atlassian Suite (Jira, Slack, Confluence, Trello)
Summary
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%+.
Background
This SDG-related project was for PadmadKenya, a charity that sold handmade, eco-friendly menstrual pads and collected donations. They traded internationally and also partnered with large brands like Liverpool FC. Their goal was to strengthen their online presence, increase revenue, and broaden their impact by supporting underprivileged women through sex education and donations.
This SDG-related project was for PadmadKenya, a charity that sold handmade, eco-friendly menstrual pads and collected donations. They traded internationally and also partnered with large brands like Liverpool FC. Their goal was to strengthen their online presence, increase revenue, and broaden their impact by supporting underprivileged women through sex education and donations.
This SDG-related project was for PadmadKenya, a charity that sold handmade, eco-friendly menstrual pads and collected donations. They traded internationally and also partnered with large brands like Liverpool FC. Their goal was to strengthen their online presence, increase revenue, and broaden their impact by supporting underprivileged women through sex education and donations.
Problem
Padmad’s e-commerce site had poor UI/UX, missing information, and lacked mobile support—critical for their 2,000+ monthly often mobile users. This risked losing customers and revenue. They sought a redesign to improve user experience, and conversions.
Padmad’s e-commerce site had poor UI/UX, missing information, and lacked mobile support—critical for their 2,000+ monthly often mobile users. This risked losing customers and revenue. They sought a redesign to improve user experience, and conversions.
Padmad’s e-commerce site had poor UI/UX, missing information, and lacked mobile support—critical for their 2,000+ monthly often mobile users. This risked losing customers and revenue. They sought a redesign to improve user experience, and conversions.
Process
I employed a tailored iterative user-centered design approach.
Process - I employed a tailored iterative user-centered design approach.
I adapted methods to meet project constraints such as time, budget, tech stack and availability.
I adapted methods to meet project constraints such as time, budget, tech stack and availability.
I adapted methods to meet project constraints such as time, budget, tech stack and availability.
Challenges
During this process, I faced many challenges that I had to overcome, especially ones I did not expect. Some of these are listed below.
Challenges - During this process, I faced many challenges that I had to overcome, especially ones I did not expect. Some of these are listed below.
01. Website crashes and redoing work
During development, updates crashed the site and broke the UI, so I consulted colleagues, set up backups, and put in extra time to rebuild it.
During development, updates crashed the site and broke the UI, so I consulted colleagues, set up backups, and put in extra time to rebuild it.
During development, updates crashed the site and broke the UI, so I consulted colleagues, set up backups, and put in extra time to rebuild it.
02. Finding usability study participants
Due to constraints, I tested user flows myself and gathered feedback from diverse colleagues to understand user issues.
Due to constraints, I tested user flows myself and gathered feedback from diverse colleagues to understand user issues.
Due to constraints, I tested user flows myself and gathered feedback from diverse colleagues to understand user issues.
03. Time budget and platform constraints
I couldn't implement the single-page donation widget due to resource constraints, so I used free plugins with similar functionality.
I couldn't implement the single-page donation widget due to resource constraints, so I used free plugins with similar functionality.
I couldn't implement the single-page donation widget due to resource constraints, so I used free plugins with similar functionality.
Empathise
I analysed Padmad's website across multiple platforms using heuristic evaluation and user journey testing.
Empathise - I analysed Padmad's website across multiple platforms using heuristic evaluation and user journey testing.
I created a research plan, UX audit, and presentation to identify pain points and share insights with colleagues. This cost- and time-efficient approach provided valuable insights without the need for more resource-intensive methods like usability studies.
I created a research plan, UX audit, and presentation to identify pain points and share insights with colleagues. This cost- and time-efficient approach provided valuable insights without the need for more resource-intensive methods like usability studies.
I created a research plan, UX audit, and presentation to identify pain points and share insights with colleagues. This cost- and time-efficient approach provided valuable insights without the need for more resource-intensive methods like usability studies.
Analysed areas:
Analysed areas:
Responsiveness
Features
Accessibility
User flow
Responsiveness
Features
Accessibility
User flow
Navigation
Brand identity
Tone
Descriptiveness
Navigation
Brand identity
Tone
Descriptiveness
Analysed areas:
Analysed areas:
Responsiveness
Features
Accessibility
User flow
Navigation
Brand identity
Tone
Descriptiveness
Responsiveness
Features
Accessibility
User flow
Navigation
Brand identity
Tone
Descriptiveness
Pain Points
Pain Points
Heuristics:
UI elements like images and buttons struggled with consistency.
Important forms eg. in the checkout process lacked error prevention.
Poor visual hierarchy and excessive text created high cognitive load (mental effort).
UI elements like images and buttons struggled with consistency.
Important forms eg. in the checkout process lacked error prevention.
Poor visual hierarchy and excessive text created high cognitive load (mental effort).
UI elements like images and buttons struggled with consistency.
Important forms eg. in the checkout process lacked error prevention.
Poor visual hierarchy and excessive text created high cognitive load (mental effort).
Accessibility:
The English language only site, possibly excluded users from Africa.
Some important visual elements had poor contrast that did not meet WCAG guidelines.
Font sizes were too small on mobile and tools like magnification, did not work on all pages.
The English language only site, possibly excluded users from Africa.
Some important visual elements had poor contrast that did not meet WCAG guidelines.
Font sizes were too small on mobile and tools like magnification, did not work on all pages.
The English language only site, possibly excluded users from Africa.
Some important visual elements had poor contrast that did not meet WCAG guidelines.
Font sizes were too small on mobile and tools like magnification, did not work on all pages.
Usability + IA:
The login process and basic user flows, were too confusing to complete.
For many tasks users had to scroll, click and read lots of text(high cognitive load)
Poor visual hierarchy made certain important product information hard to find.
The login process and basic user flows, were too confusing to complete.
For many tasks users had to scroll, click and read lots of text(high cognitive load)
Poor visual hierarchy made certain important product information hard to find.
The login process and basic user flows, were too confusing to complete.
For many tasks users had to scroll, click and read lots of text(high cognitive load)
Poor visual hierarchy made certain important product information hard to find.
Brand consistency:
Product images were missing or inconsistent which likely caused distrust in the brand.
Important icons like the favicon (tab icons) were missing which caused distrust.
Branding was inconsistent at key user journey points like confirmation emails.
Product images were missing or inconsistent which likely caused distrust in the brand.
Important icons like the favicon (tab icons) were missing which caused distrust.
Branding was inconsistent at key user journey points like confirmation emails.
Product images were missing or inconsistent which likely caused distrust in the brand.
Important icons like the favicon (tab icons) were missing which caused distrust.
Branding was inconsistent at key user journey points like confirmation emails.
Define
User Personas
Define - User Personas
After discussions with the web design team, we identified two key customer segments for Padmad:
Local individuals (e.g., in Kenya) who value transparency, personal impact, and are moved by relatable stories—often shopping via mobile.
International corporate professionals seeking charitable efforts that align with their company’s values and enhance public image.
After discussions with the web design team, we identified two key customer segments for Padmad:
Local individuals (e.g., in Kenya) who value transparency, personal impact, and are moved by relatable stories—often shopping via mobile.
International corporate professionals seeking charitable efforts that align with their company’s values and enhance public image.
After discussions with the web design team, we identified two key customer segments for Padmad:
Local individuals (e.g., in Kenya) who value transparency, personal impact, and are moved by relatable stories—often shopping via mobile.
International corporate professionals seeking charitable efforts that align with their company’s values and enhance public image.
Ideate. 1
Research revealed that most problems fell into 3 key areas with the greatest UX impact. These were reframed as "How might we" questions.
Ideate. 1 - Research revealed that most problems fell into 3 key areas with the greatest UX impact. These were reframed as "How might we" questions.
"How might we design a more convenient and intuitive donation process?"
"How might we design a more convenient and intuitive donation process?"
"How might we design a more convenient and intuitive donation process?"
"How might we design a more effortless and intuitive purchase flow?"
"How might we design a more effortless and intuitive purchase flow?"
"How might we design a more effortless and intuitive purchase flow?"
"How might we design a more organised and effective product page?"
"How might we design a more organised and effective product page?"
"How might we design a more organised and effective product page?"
Ideate. 2
Before redesigning certain processes, I created user flow diagrams to clarify functionality and help persuade stakeholders of the redesigned system’s benefits.
Ideate. 2 - Before redesigning certain processes, I created user flow diagrams to clarify functionality and help persuade stakeholders of the redesigned system’s benefits.
One of the main user flows, donating is shown below. Conversion optimisation research suggested minimising the existing process to follow a rule of 3. And making a single page checkout flow. So that users can checkout more quicker and conveniently.
One of the main user flows, donating is shown below. Conversion optimisation research suggested minimising the existing process to follow a rule of 3. And making a single page checkout flow. So that users can checkout more quicker and conveniently.
One of the main user flows, donating is shown below. Conversion optimisation research suggested minimising the existing process to follow a rule of 3. And making a single page checkout flow. So that users can checkout more quicker and conveniently.
"How might we design a more convenient and intuitive donation process?"
"How might we design a more convenient and intuitive donation process?"
"How might we design a more convenient and intuitive donation process?"
Key design areas:
Key design areas:
Key design areas:
Donating made achievable while staying on a single page
Overall steps reduced to complete the user flow
Less text to read to reduce cognitive load
Better visual hierarchy to grab user attention to donating
Donating made achievable while staying on a single page
Overall steps reduced to complete the user flow
Less text to read to reduce cognitive load
Better visual hierarchy to grab user attention to donating
Donating made achievable while staying on a single page
Overall steps reduced to complete the user flow
Less text to read to reduce cognitive load
Better visual hierarchy to grab user attention to donating
User Flow Redesign - Single Page Checkout
Ideate. 3
Based on research insights, I sketched a variety of paper wireframes for each page, then combined the best elements of each screen into a single screen.
Ideate. 3 - Based on research insights, I sketched a variety of paper wireframes for each page, then combined the best elements of each screen into a single screen.
Data showed users, like those in Kenya, preferred donating over purchasing, they likely found the eco-friendly menstrual pads too costly. I prioritised donating above the fold on the homepage, which offered flexibility in charitable giving. Compared to paying a fixed price like their menstrual pads products.
Data showed users, like those in Kenya, preferred donating over purchasing, they likely found the eco-friendly menstrual pads too costly. I prioritised donating above the fold on the homepage, which offered flexibility in charitable giving. Compared to paying a fixed price like their menstrual pads products.
Data showed users, like those in Kenya, preferred donating over purchasing, they likely found the eco-friendly menstrual pads too costly. I prioritised donating above the fold on the homepage, which offered flexibility in charitable giving. Compared to paying a fixed price like their menstrual pads products.
Key design areas:
Key design areas:
Key design areas:
Ensuring each redesign supports the goal of increasing conversions
Making the donation process faster with fewer steps
A faster product discovery process with easy to digest information
A simple and intuitive navigation for the main user flows
Equitable design for users with disabilities or particular needs
Ensuring each redesign supports the goal of increasing conversions
Making the donation process faster with fewer steps
A faster product discovery process with easy to digest information
A simple and intuitive navigation for the main user flows
Equitable design for users with disabilities or particular needs
Ensuring each redesign supports the goal of increasing conversions
Making the donation process faster with fewer steps
A faster product discovery process with easy to digest information
A simple and intuitive navigation for the main user flows
Equitable design for users with disabilities or particular needs
Paper Wireframes
Ideate. 4
I refined my high-fidelity designs in Photoshop and Figma, focusing on the three most impactful How Might We questions. The redesigns for each are shown below.
Ideate. 4 - I refined my high-fidelity designs in Photoshop and Figma, focusing on the three most impactful How Might We questions. The redesigns for each are shown below.
Ideating Features - How Might We…
Design a more convenient and intuitive donation process:
Conveniently the users can donate in 2 steps by entering or selecting a number and clicking on donate.
Rule of three and single page checkout reduces clicks and is less effort.
Clearer information architecture, resolving previous missing currency units issue.
Conveniently the users can donate in 2 steps by entering or selecting a number and clicking on donate.
Rule of three and single page checkout reduces clicks and is less effort.
Clearer information architecture, resolving previous missing currency units issue.
Conveniently the users can donate in 2 steps by entering or selecting a number and clicking on donate.
Rule of three and single page checkout reduces clicks and is less effort.
Clearer information architecture, resolving previous missing currency units issue.
Design a more effortless and intuitive purchase flow:
Improved information architecture, by reducing text
Clear context (eg. names) and call to actions added to increase conversion.
Better UI consistency (eg. product image style) improves heuristics.
Improved information architecture, by reducing text, making the pages easier to understand.
Clear context (eg. names) and call to actions added over the previous design, to increase conversion.
Better UI consistency (eg. product image style) improves heuristics and brand perception of quality.
Improved information architecture, by reducing text
Clear context (eg. names) and call to actions added to increase conversion.
Better UI consistency (eg. product image style) improves heuristics.
Design a more organised and effective product page:
Replaced overwhelming text blocks with accordion boxes to improve IA.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling, improving conversion rates.
Replaced overwhelming text blocks with accordion boxes to improve IA.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling, improving conversion rates.
Replaced overwhelming text blocks with accordion boxes to improve IA.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling, improving conversion rates.
Prototype. 1 & Test
The initial WordPress prototype was evaluated by a diverse group of 9, revealing key areas for improvement. 2 main pieces of feedback were incorporated into the next iteration.
Prototype. 1 & Test - The initial WordPress prototype was evaluated by a diverse group of 9, revealing key areas for improvement. 2 main pieces of feedback were incorporated into the next iteration.
"We may need to consider simplifying the purchase flow. Maybe simpler vocabulary in the purchase flow for novice users."
A
Participant A
Stakeholder
"Consider adding the interactive impact map. It may increase user engagement."
B
Participant B
Stakeholder
"We may need to consider simplifying the purchase flow. Maybe simpler vocabulary in the purchase flow for novice users."
A
Participant A
Stakeholder
"Consider adding the interactive impact map. It may increase user engagement."
B
Participant B
Stakeholder
Iterative Improvements
Simplified call to actions:
Removed the “learn more” option.
Changed the wording of the main call to action to “shop now.”
This is directly related to the action, simple and intuitive.
Removed the “learn more” option from the product catalogue page.
Changed the wording of the main call to action to “shop now.”
This is directly related to the action, simple and intuitive.
Removed the “learn more” option.
Changed the wording of the main call to action to “shop now.”
This is directly related to the action, simple and intuitive.
Added interactive impact map:
Added an interactive map to the story section.
Users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Added an interactive map to the story section.
Users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Added an interactive map to the story section.
Users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Results
The final prototype site was made within budget constraints. Plugins as close as possible to the hi-fi designs were selected, to implement each of the redesigns.
Results - The final prototype site was made within budget constraints. Plugins as close as possible to the hi-fi designs were selected, to implement each of the redesigns.
01. 30-60%+ Increase in conversions
For donation 8 pages of clicking was reduced to 1. Studies showed that such a reduction in effort could increase conversions by 30-60%+.
For donation 8 pages of clicking was reduced to 1. Studies showed that such a reduction in effort could increase conversions by 30-60%+.
For donation 8 pages of clicking was reduced to 1. Studies showed that such a reduction in effort could increase conversions by 30-60%+.
02. 11+ Pages (whole website) fully responsive
11+pages, basically the whole website was redesigned and made fully responsive and functional across devices.
11+pages, basically the whole website was redesigned and made fully responsive and functional across devices.
11+pages, basically the whole website was redesigned and made fully responsive and functional across devices.
03. 7 New accessibility features added
I managed to add 7 new accessibility features including wider language options, larger fonts, large buttons and WCAG contrast icons.
I managed to add 7 new accessibility features including wider language options, larger fonts, large buttons and WCAG contrast icons.
I managed to add 7 new accessibility features including wider language options, larger fonts, large buttons and WCAG contrast icons.
Style Guide
I kept Padmad's colours and fonts while improving accessibility and readability with clear CTAs, WCAG-compliant contrasts, larger buttons, and an 18pt base font.
Style Guide - I kept Padmad's colours and fonts while improving accessibility and readability with clear CTAs, WCAG-compliant contrasts, larger buttons, and an 18pt base font.
Lessons
During this process, I learned many aspects of design that are very key to achieving results, especially conversion. In summary keep things convenient and use story telling.
Lessons - During this process, I learned many aspects of design that are very key to achieving results, especially conversion. In summary keep things convenient and use story telling.
01. Reduce process steps
Short attention spans mean complex user flows can cause drop-offs, so use the rule of three to create simple, memorable three-step processes.
Short attention spans mean complex user flows can cause drop-offs, so use the rule of three to create simple, memorable three-step processes.
Short attention spans mean complex user flows can cause drop-offs, so use the rule of three to create simple, memorable three-step processes.
02. Clear message and CTA above the fold
To prevent drop-offs in 3 seconds, place key elements—logo, value proposition, and call to action—above the fold for instant clarity.
To prevent drop-offs in 3 seconds, place key elements—logo, value proposition, and call to action—above the fold for instant clarity.
To prevent drop-offs in 3 seconds, place key elements—logo, value proposition, and call to action—above the fold for instant clarity.
03. Use story telling
Use visual storytelling to emphasise the product’s wider impact and research, building emotional connection, and driving sales.
Use visual storytelling to emphasise the product’s wider impact and research, building emotional connection, and driving sales.
Use visual storytelling to emphasise the product’s wider impact and research, building emotional connection, and driving sales.
Testimonials
Feedback for This Project
Testimonials - Feedback for This Project
See testimonials for this project from former 1Point3Creative colleagues.
See testimonials for this project from former 1Point3Creative colleagues.
See testimonials for this project from former 1Point3Creative colleagues.
"Abin’s originality brought fresh perspectives into our projects, introducing unique viewpoints that encouraged our team to look at challenges from different angles."
“I have worked with Abin on 2 projects now and learned a lot about the importance of UI and UX. I have found his guidance and knowledge of great assistance to me.”
Web Designer, 1Point3Creative
Other Work
CharmLife
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.
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.
