Back To My Work

PadmadKenya

E-COMMERCE

CSS

CRO

UI/UX

FIGMA

WORDPRESS

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) Internship 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)

Summary

Redesigning PadmadKenya's e-commerce site for a smoother user experience and boosting conversions by 30-60%+.

Background

At 1Point3Creative, I worked on a project for PadmadKenya, a charity selling handmade, eco-friendly menstrual pads. They traded internationally and also partnered with large brands like Liverpool FC. Their goal was to enhance their online presence, boost revenue, and expand their impact on underprivileged women with sex education and donations.

Problem

Their e-commerce website had poor UI/UX, with difficult navigation, missing key information, and lack of mobile support and many more.

With a large portion of their audience (2,000±) mostly from mobile-first African markets. Padmad risked losing customers and thousands in revenue. They sought a redesign to improve user experience, and conversions to drive donations and sales.

Their e-commerce website had poor UI/UX, with difficult navigation, missing key information, and lack of mobile support and many more. With a large portion of their audience (2,000±) mostly from mobile-first African markets. Padmad risked losing customers and thousands in revenue. They sought a redesign to improve user experience, and conversions to drive donations and sales.

Their e-commerce website had poor UI/UX, with difficult navigation, missing key information, and lack of mobile support and many more.

Results

Redesign highlights:

Performance: 30-60%+ increase in conversion rates across all 11+ (main pages) redesigned pages which are now fully responsive.
- Improved mobile optimisation (91% of e-commerce shoppers).
- Added effortless navigation in 3 simple steps like the top 1% designers.
- Refined user journeys, compelling storytelling, and consistent design.
Latest design trends: The site features modern design patterns like a single page donation feature, and radio button subscription.
Enhanced accessibility: Larger base fonts (18pt), WCAG compatible colours, language options, larger buttons, concise text, zoom compatibility and higher contrast icons meeting WCAG guidelines.
Brand consistency: 100% of outreach emails now adhere to brand guidelines.
Positive impact: Colleagues found the presentations valuable, leading to a 30% increase in accessibility features, and quality across other projects.

Redesign highlights:

Performance: 30-60%+ increase in conversion rates across all 11+ (main pages) redesigned pages which are now fully responsive.
- Improved mobile optimisation (91% of e-commerce shoppers).
- Added effortless navigation in 3 simple steps like the top 1% designers.
- Refined user journeys, compelling storytelling, and consistent design.
Latest design trends: The site features modern design patterns like a single page donation feature, and radio button subscription.
Enhanced accessibility: Larger base fonts (18pt), WCAG compatible colours, language options, larger buttons, concise text, zoom compatibility and higher contrast icons meeting WCAG guidelines.
Brand consistency: 100% of outreach emails now adhere to brand guidelines.
Positive impact: Colleagues found the presentations valuable, leading to a 30% increase in accessibility features, and quality across other projects.

Process

Tailored Design Thinking Process

Process - Tailored Design Thinking Process

Tailored Design Thinking Process

I employed an iterative user-centered design approach, adapting methods to meet project constraints such as time, budget, tech stack and availability.

Challenges

How I Found Solutions to Challenges

Challenges - How I Found Solutions to Challenges

How I Found Solutions to 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.

02. Finding usability study participants

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.

Empathise

UX Audit & Pain Points

Empathise - UX Audit & Pain Points

UX Audit & Pain Points

I analysed Padmad's website, testing user journeys across multiple platforms, looking at heuristics. I generated a research plan, UX audit and presentation. So that I could understand potential pain points, document, and share insights with my colleagues. This method of analysis would gather many insights and keep monetary and time budgets low as was required. This was better than alternative methods like conducting usability studies.

Analysed areas:

Responsiveness
Features
Accessibility
User flow

Responsiveness
Features
Accessibility
User flow

Navigation
Brand identity
Tone
Descriptiveness

Navigation
Brand identity
Tone
Descriptiveness

Analysed areas:

Responsiveness
Features
Accessibility
User flow
Navigation
Brand identity
Tone
Descriptiveness

Responsiveness
Features
Accessibility
User flow
Navigation
Brand identity
Tone
Descriptiveness

UX Audit

Link to see the audit.

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).

Accessibility:

The English 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 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.

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.

Define. 1

User Personas

Define. 1 - User Personas

User Personas

I discussed with the web design team to understand the customers of Padmad. We identified two primary customer segments: 1) Individuals from more local regions like Kenya, who value transparency and personal impact. They are more likely to be influenced by personal connections and stories that highlight the impact of their contributions. And are more likely to shop using mobile devices. 2) Professionals from large international corporations, seeking alignment between their charitable giving and their company's values and public image.

Ideate. 1

3 Main How Might We's

Ideate. 1 - 3 Main How Might We's

3 Main How Might We's

Problems of the site were translated into design opportunities. After evaluating the research and gathering insights I noticed that there were many problems often found in 3 main areas. These areas had the highest impact on the UX of their website. Some of those problems as shown below, were translated into how might we's.

"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 organised and effective product page?"

Ideate. 2

User Flow Diagrams

Ideate. 2 - User Flow Diagrams

User Flow Diagrams

Before redesigning certain processes, I made user flow diagrams to define and simplify the functionality. This also helped in persuading stakeholders of the benefits of the redesigned system. 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?"

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

User Flow Redesign - Single Page Checkout

Ideate. 3

Wireframing & Prototyping

Ideate. 3 - Wireframing & Prototyping

Wireframing & Prototyping

Using insights from my research, I generated ideas and created paper wireframes to explore redesign options. I combined the best aspects of multiple screen versions into one. I prioritised a donation-focused user flow above the fold on the homepage. Data showed users, like those in Kenya, preferred donating over purchasing, they likely found the eco-friendly menstrual pads too costly. I prioritised donating, which offered flexibility in charitable giving, compared to paying a fixed price like their menstrual pads.

Key design areas:

Making sure each redesign helps towards the goal of increasing conversions
Making the donation process faster with fewer steps
Making a fast product discovery process with easy to digest information
Having simple and intuitive navigation for the main user flows
Having an equitable design for users with disabilities or particular needs

Making sure each redesign helps towards the goal of increasing conversions
Making the donation process faster with fewer steps
Making a fast product discovery process with easy to digest information
Having simple and intuitive navigation for the main user flows
Having an equitable design for users with disabilities or particular needs

Paper Wireframes

Ideate. 4

High Fidelity Designs for main How Might We's

Ideate. 4 - High Fidelity Designs for main How Might We's

I developed and refined my wireframes in my high fidelity designs using Photoshop and Figma. Focusing on the 3 main important how might we's which had the most impact. The redesigns for each of the 3 important areas are as shown below.

Features & Improvements

A more convenient and intuitive donation process:

Conveniently the users can donate easily in 2 steps by entering or selecting a number and clicking on donate.
Rule of three and single page checkout reduces clicks which is more appealing, memorable and perceived as less effort.
Clearer information architecture than the previous process with problems like missing currency units on some pages.

Conveniently the users can donate easily in 2 steps by entering or selecting a number and clicking on donate.
Rule of three and single page checkout reduces clicks which is more appealing, memorable and perceived as less effort.
Clearer information architecture than the previous process with problems like missing currency units on some pages.

A more effortless and intuitive purchase flow:

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, 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.

A more organised and effective product page:

Replaced overwhelming text blocks with accordion boxes to improve IA, allowing users to quickly find specific info.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling elements and better visual hierarchy, improving branding and conversion rates.

Replaced overwhelming text blocks with accordion boxes to improve IA, allowing users to quickly find specific info.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling elements and better visual hierarchy, improving branding and conversion rates.

Replaced overwhelming text blocks with accordion boxes to improve IA, allowing users to quickly find specific info.
Introduced a subscription feature for easier repeat purchasing.
Added CTA above the fold with story telling elements and better visual hierarchy, improving branding and conversion rates.

Prototype. 1 & Test

Prototype Evaluation & Changes

Prototype. 1 & Test - Prototype Evaluation & Changes

Prototype Evaluation & Changes

The first prototype made in WordPress, was evaluated for design feedback and iteration. After evaluation by a diverse group of 9, a few opportunities for improvement were discovered. These were added to the next iteration of the prototype. Main 2 important pieces of feedback are below.

"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 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 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 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.

Engaging interactive impact map:

Added an interactive map to the story section.
This map is easier to see and adds new hierarchy, users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Creates consistency by relating to the story page of the site.

Added an interactive map to the story section.
This map is easier to see and adds new hierarchy, users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Creates consistency by relating to the story page of the site.

Added an interactive map to the story section.
This map is easier to see and adds new hierarchy, users process this faster than text.
Creates more user delight by adding interactivity, increasing engagement.
Creates consistency by relating to the story page of the site.

Results

Final Prototype

Results - Final Prototype

Final Prototype

The final prototype site was developed further in WordPress. To adhere to monetary and platform limitations, I used CSS, HTML and plugins closely matching the hi-fi designs to implement features of the redesign. The prototype was made to showcase the redesigned concept to the client. It featured more modern design trends like single page donation. And overall I achieved the goal of improving the UX and increasing revenue, by implementing conversion rate optimisation and UX research.

Easy donation & product discovery:

User has less effort to navigate to products and donating, so are more likely to convert (30-60%+).
Donating reduced from 8 pages of clicking to 1 page, making it way more intuitive.
Currency units are always available causing less confusion than the old design.
All images are present, with trust badges added for higher trustworthiness.

User has less effort to navigate to products and donating, so are more likely to convert (30-60%+).
Donating reduced from 8 pages of clicking to 1 page, making it way more intuitive.
Currency units are always available causing less confusion than the old design.
All images are present, with trust badges added for higher trustworthiness.

Easily browse and shop:

Heavy low value text removed to reduce scrolling, which improves conversion rates.
Context and call to actions added which reduces confusion and makes navigation more intuitive, reducing drop off rates.
Consistent font sizes and language options adds accessibility for international users using different types of devices.
Product summaries added for quicker decision making, improving conversions.

Heavy low value text removed to reduce scrolling, which improves conversion rates.
Context and call to actions added which reduces confusion and makes navigation more intuitive, reducing drop off rates.
Consistent font sizes and language options adds accessibility for international users using different types of devices.
Product summaries added for quicker decision making, improving conversions.

Low effort purchases:

Improved visual hierarchy makes information easier to read and understand.
CTA placed closer to above the fold so users are more likely to convert.
Accordion menu compresses long bits of text which makes specific info easier to find.
Story telling added to increase engagement and conversions.

Improved visual hierarchy makes information easier to read and understand.
CTA placed closer to above the fold so users are more likely to convert.
Accordion menu compresses long bits of text which makes specific info easier to find.
Story telling added to increase engagement and conversions.

Style Guide

The Style Guide Followed Brand Guidelines

Style Guide - The Style Guide Followed Brand Guidelines

The Style Guide Followed Brand Guidelines

I adhered to Padmad's brand guidelines, optimising readability with clear titles and CTA's of a good size. I adjusted some existing colours following WCAG guidelines and made larger button sizes and base font (18pt) to increase accessibility.

Learnings

Keep Things Convenient and Use Story Telling

Learnings - Keep Things Convenient and Use Story Telling

Keep Things Convenient and Use Story Telling

During this process, I learned many aspects of design that are very key to achieving results, especially conversion. Some of these solutions are listed below.

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.

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.

03. Use story telling

Convey your product's story with visual storytelling using images for quick understanding. Emphasise wider impact and the research and story behind the product.

PConvey your product's story with visual storytelling using images for quick understanding. Emphasise wider impact and the research and story behind the product.

Testimonials

Feedback for This Project

Testimonials - Feedback for This Project

Feedback for This Project

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."
Elliot Charles
CEO, 1Point3Creative
“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.”
Ken Charles
Web Designer, 1Point3Creative