Chloe Temenu

Eyowo's digital payment ecosystem

Redesigning payment gateway experience to support a wider range of client needs.

Building a
robust financial
toolkit

My contribution

Visual Design, Usability testing,

User flow mapping, Market research

Visual Design, Usability testing,

User flow mapping, Market research

The Team

1 product owner, 1 design lead,

2 frontend-engineer, 1 backend engineer,

1 QA tester

Timeframe

Q2 2021

4 months

Context 🎯

In this project I expanded the product ecosystem of a Nigerian payment and budgeting app with over half a million users to serve more users by designing a payment processing checkout experience for a successful. My role involved leading usability testing, enhancing visuals design and gaining in-depth understanding of financial compliance practices.

These efforts were aimed at gathering critical insights on the competitor landscape, and overall user experience. This initiative set up a strong relaunch and a better alignment of the payment processor to business owner needs.

Context 🎯

In this project I expanded the product ecosystem of a Nigerian payment and budgeting app with over half a million users, improving on usability by redesigning the payment processing experience. My role involved leading usability testing, enhancing visuals design and gaining in-depth understanding of financial compliance practices.

My role 💡

I joined the Eyowo team as a junior-level product designer while the company was in the middle of a huge rebranding effort, being part of this team was exciting particularly because it was my first time being part of a fully established design team at a company with considerable design growth. In my role, I worked with a design lead, head of design, and project managers along with 4 other designers, while there I contributed cross-functionally to projects like the Eyowo payment link, website redesign, checkout web and mobile, and KYC app web design.

My role 💡

I joined the Eyowo team as a junior-level product designer while the company was in the middle of a huge rebranding effort, being part of this team was exciting particularly because it was my first time being part of a fully established design team at a company with considerable design growth. In my role, I worked with a design lead, head of design, and project managers along with 4 other designers, while there I contributed cross-functionally to projects like the Eyowo payment link, website redesign, checkout web and mobile, and KYC app web design.

Outcomes

Improved payment processing systems:

The new design effectively addressed the need for more payment channels, better card verification mechanisms.

Improved payment processing systems:

The new design effectively addressed the need for more payment channels, better card verification mechanisms.

Improved payment processing systems:

The new design effectively addressed the need for more payment channels, better card verification mechanisms.

E-commerce optimisation:

The redesign led to a boost in sales efficiency for our onboarded business owners.

E-commerce optimisation:

The redesign led to a boost in sales efficiency for our onboarded business owners.

E-commerce optimisation:

The redesign led to a boost in sales efficiency for our onboarded business owners.

100% relaunch success:

With the new design I was able to visual design UI elements to our brand guidelines resulting in improved cohesion and a successful Day of X relaunch of the all products within the Eyowo financial solutions ecosystem.

100% relaunch success:

Understanding the
challenge

Business owners depend heavily on checkout tools to improve online sales and customer conversion. Althought we had an existing payment platform, it needed to be enhanced on to effectively compete in an emerging fin-tech market.

Applying research methods

Understanding the landscape of existing solutions that are already available on the market through competitive analysis helped to establishes a strong foundation for my work.

As a player within a saturated market we needed to avoid any common user experience pitfalls that are peculiar to payment gateways.

Exploring the payment
gateway solution
space

Performing a competitive analysis with a focus on speed of payment and error handling showed that competitors such as Flutterwave, Paystack and Stripe made use of a homogenous UI designs and task flows which were heavily centered around regulatory compliance (card, bank transfer and USSD) and brand alignment.

The most significant variations were found in
- micro-interactions like error and loading states, and
- brand inspired copywriting .

Performing a competitive analysis with a focus on speed of payment and error handling showed that competitors such as Flutterwave, Paystack and Stripe made use of a homogenous UI designs and task flows which were heavily centered around regulatory compliance (card, bank transfer and USSD) and brand alignment.

The most significant variations were found in micro-interactions like error and loading states, and
brand inspired copywriting .

Payment checkout as a make or break step

According to Baymand Institute 85% per cent of online shoppers are known to abandon shopping carts due to security concerns, unnecessary steps, ambiguous charges and unresponsive payment processing.

Outlining existing problems

In designing our platform, my primary goal was to enable smooth operations for our customers. Extra emphasis was given on improving mobile user engagement, considering the majority of our calls-to-action fall within this realm.

Customer categories

Customer needs

primary users (Business owners who would integrate our tool into their e-commerce payment channel)

secondary users (Customer purchasing their brands using our tool)

Additionally, it was important to define the major user goals and illustrate a user flow for the new designs. Primary user goals were simple and clear:

primary users: Business owners who would integrate our tool into their e-commerce payment channel
secondary users: Customer purchasing their brands using our tool

User Goals Statements

- "As a user, I want to complete my purchase using the checkout tool"

- "As a user, I want my customers to pay for my services using the checkout tool "

Insights- Business owner expectations

Business owner expectations

Social proof: Users are more likely to trust a brand that other people can vouch for.

Plug and Play: Quick, no hassle integration to existing websites

Better rates: High transaction success rates to keep paying customers frustration at a minimum.

Customization: Users want to be able to add their own mark to the experience.

Insights- Purchase maker expectations

Purchase maker expectations

Security: Users need to be put in a state of ease when asked to provide payment information

Options: Prefered payment channels need to be provided Quick, no hassle integration to existing websites

Error handling: In the event that a payment is , users need to know the payment staus immediately.

Knocking out the competition

How could we attempt to create a best-in-class experience that would be top-of-mind?

Often established brands lose sight of what the customers really want to combat this I set out to understand what each target subset was looking out for in a payment experience, how were users deciding on who to trust with their sales?

(Be Human Always)
creating a standout solution

(Be Human Always)- creating a standout solution

One of the major goals focused on infusing a sense of life and vibrancy across all products. At the initial stages of the redesign process, the design team worked together to define a new visual design language for all design updates. As a team this was an opportunity to build our pattern library in harmony with our strong brand ethos.

Although it was a bit of a detour from my solution workflow, this step was pivotal to my process towards building a new checkout experience because it ensured that the soltuions I created had an air of vibrancy to it in line with our goal to always delight customers!

Prioritising both people and profit

Although not a place where people spend a lot of time, payment channels are used frequently.

While a great payment experience is not often top of mind for users, successful brands can attract and retain customers by embodying strong values while delivering a solid user experience. Success on this project involved optimizing the marketing potential of our checkout touchpoint as a marketing leading users to our growing financial product ecosystem through the checkout touchpoint.

Aligning with the goals of our business

Data recall: We needed to be able to safely store and recall user information for faster transaction rates.

Account access: Provide users with a channel to use their Eyowo accounts.

Account creation: Allow users a way to create a new account using the checkout experience.

Major iterations / testing

In building out our sytem articheture I focused on empowering users complete their purchase in as few steps as possible, special emphasis was placed on the mobile experience as most of our flows consisted of multiple cta targets.

First click test

First Click Tests

Conducting first click tests helped us understand

Conducting first click tests helped us understand ascertain that the design on the mobile view was able to inform users to take the correct actions at first glance. In the screenshot below I was concerned that the positioning of the button that switches the payment method may not be apparent at first glance. I was testing for which of the options (large button vs dropdown) was more easily accessible.ascertain that the mobile view's design

Delivering a working solution

In building out our sytem articheture I focused on empowering users complete their purchase in as few steps as possible, special emphasis was placed on the mobile experience as most of our flows consisted of multiple cta targets.

✨

Secure card provider verification

✨

Secure card provider verification

✨

Use of motion indicate loading states

Takeaways and Reflection on this project

Better Scoping

Constrain the challenge space, broaden the solution space — Stanford d.school

While working on this project , due to time constraints I went into the design and research phase a little too early. In the future it would be best to spend more time looking more deeply through all available user tasks and consider the end to end interaction across all major touchpoints. Good design scoping is the key to synthesizing creative solutions.

Better Scoping

Constrain the challenge space, broaden the solution space — Stanford d.school

Effectively tracking change

To keep track of the real-world impact of design solutions in customer behaviour as much as possible design needs to work hand-in-hand with team members who are talking to customers on a day-to-day basis.

Effectively tracking change

Logistics case study

Redesigning Faru for better adoption.

View case study

Let's work on your next project.

Schedule a call with me

Email Address

Dribbble

Let's work on your next project.

Schedule a call with me

Email Address

Dribbble

Chloe Temenu

Chloe Temenu

Eyowo's digital payment ecosystem

Redesigning payment gateway experience to support a wider range of client needs.

Building a robust financial toolkit

Context 🎯

Context 🎯

Context 🎯

My role 💡

My role 💡

Outcomes

Outcomes

Understanding the challenge

Business owners depend heavily on checkout tools to improve online sales and customer conversion. Althought we had an existing payment platform, it needed to be enhanced on to effectively compete in an emerging fin-tech market.

Understanding the landscape of existing solutions that are already available on the market through competitive analysis helped to establishes a strong foundation for my work.

Exploring the payment gateway solution space

Exploring the payment gateway solution space

According to Baymand Institute 85% per cent of online shoppers are known to abandon shopping carts due to security concerns, unnecessary steps, ambiguous charges and unresponsive payment processing.

According to Baymand Institute 85% per cent of online shoppers are known to abandon shopping carts due to security concerns, unnecessary steps, ambiguous charges and unresponsive payment processing.

Outlining existing problems

In designing our platform, my primary goal was to enable smooth operations for our customers. Extra emphasis was given on improving mobile user engagement, considering the majority of our calls-to-action fall within this realm.

Customer categories

Customer needs

primary users (Business owners who would integrate our tool into their e-commerce payment channel)

Additionally, it was important to define the major user goals and illustrate a user flow for the new designs. Primary user goals were simple and clear:

primary users: Business owners who would integrate our tool into their e-commerce payment channel

secondary users: Customer purchasing their brands using our tool

User Goals Statements

- "As a user, I want to complete my purchase using the checkout tool"

- "As a user, I want my customers to pay for my services using the checkout tool "

Insights- Business owner expectations

Insights- Business owner expectations

Business owner expectations

Insights- Purchase maker expectations

Insights- Purchase maker expectations

Purchase maker expectations

How could we attempt to create a best-in-class experience that would be top-of-mind?

How could we attempt to create a best-in-class experience that would be top-of-mind?

How could we attempt to create a best-in-class experience that would be top-of-mind?

(Be Human Always) creating a standout solution

(Be Human Always)- creating a standout solution

Although it was a bit of a detour from my solution workflow, this step was pivotal to my process towards building a new checkout experience because it ensured that the soltuions I created had an air of vibrancy to it in line with our goal to always delight customers!

Although not a place where people spend a lot of time, payment channels are used frequently.

Although not a place where people spend a lot of time, payment channels are used frequently.

Aligning with the goals of our business

Aligning with the goals of our business

Aligning with the goals of our business

Major iterations / testing

Major iterations / testing

In building out our sytem articheture I focused on empowering users complete their purchase in as few steps as possible, special emphasis was placed on the mobile experience as most of our flows consisted of multiple cta targets.

First click test

Delivering a working solution

In building out our sytem articheture I focused on empowering users complete their purchase in as few steps as possible, special emphasis was placed on the mobile experience as most of our flows consisted of multiple cta targets.

Takeaways and Reflection on this project

Logistics case study

Redesigning Faru for better adoption.

Let's work on your next project.

Let's work on your next project.

Building a
robust financial
toolkit

Understanding the
challenge

Exploring the payment
gateway solution
space

Exploring the payment
gateway solution
space

(Be Human Always)
creating a standout solution