Re-designing how users share costs : a Chippin case study

Helping people share the cost of an online purchase with friends & family in a simple and intuitive way

Summary

For our final project as part of the General Assembly UX Design Immersive course, my team of three worked with a UK fintech company Chippin, who were looking for a simpler and more intuitive way to enable their customers to share the cost of an online purchase with friends & family.

I facilitated the team’s design sprint and led the user research and project coordination.

Using agile UX methodology that encompassed contextual user testing and interviews, rapid paper prototyping and usability testing, digital wireframing and visual design, we built and delivered a final high-fidelity design prototype.

We received strong endorsement of our designs and UX process from Chippin’s CEO, COO and CTO, and our design is now on its way to being implemented.

Design Sprint Duration : 2 weeks

Tools / Methodology : User Research, Contextual Enquiry & User Testing, Client & Competitive Analysis, Rapid Ideation & Wireframing, Digital Prototyping (low- to high-fidelity), Preparation of Design Specifications

Click here to jump to our final clickable prototype.

Project Brief

The project brief was an audit and re-design of Chippin’s primary user flow from the landing page to payment page based on discussions with the client.

The Client — Meet Chippin

Chippin enables online merchants to allow their customers to easily and securely split and share the cost of an online purchase.

Presented as one of the payment options on a merchant’s checkout page, Chippin allows customers to instigate a shared payment among friends or family, add contributors, pay their share quickly and securely, and track contributions.

A unique product offering

Our team met with the Chippin CEO and COO (a smart and very engaging group) where we learnt about the business and product evolution, their user base, the product features and challenges and their vision for the future. We also quickly established the objectives and priorities of the design sprint.

Having gone live with the product 7 months earlier, they had already signed up a number of small /medium merchants. They had received very positive interest from some of the big merchants in the retail and travel industries but were aware that they needed to improve the usability, navigation and visual design of Chippin before they could move forward with new signings.

We had our task cut out for us.

The Challenge

Chippin’s main objective was to prevent first-time users from dropping off or cancelling a purchase once they had been re-directed from the merchant’s checkout to Chippin’s landing page.

For our team, this meant a clear focus on reviewing the user journey on the Chippin site and make this as simple, informative and intuitive as possible.

And that’s what we did.

The team at work

The Process

We applied the fundamental principles of lean UX to work through the sprint and used the Double Diamond method to structure the process.

The Discovery & Research Stage

Competitive Analysis

We began looking at some of Chippin’s competitors to get a broad understanding of the landscape, as well as specific insights into key players and their product features.

This included players in the traditional payments arena (payment gateways like Paypal), as well as in the shared transactions space (Splitit, Make it Social, etc)

Key insights from this exercise were:

  • Chippin’s proposition is unique in the marketplace — nobody else did exactly what Chippin was doing
  • Competitor business models include fundraising, payment gateways and bill splitting
  • Most competitors needed customer login — the fact that Chippin didn’t was a massive plus for Chippin users

Contextual User Research

Once a user (the “Instigator”) clicked on the Chippin option on the merchant’s checkout page, they were re-directed to the Chippin landing page where they went through 3 steps:

  • Add Contributors (who also chip in towards the cost of the purchase)
  • Pay their share
  • Track contributions

We began testing the current Chippin interface and user flow with many users particularly those who had experience of shared purchases. Most tended to be fairly young and tech-savvy.

As highlighted above, most felt that Chippin was solving for a very real customer problem and had a lot going for it, including just a few steps to complete the process and a trusted Stripe payment gateway (for those who knew what Stripe was!).

Digging deeper into the level of detail for a first-time user, the interface design, and overall usability, we unearthed lots of inconsistencies and frustrations that were getting in the way of the user journey.

Feedback on the Chippin landing page. And this was just the beginning…..
The dashboard / tracker / payment confirmation/not-sure-what

Mapping out the current user journey on an Experience Map highlighted the various steps in the process and the highs and pain points along the way.

The combination of contextual user testing, mapping out the user journey and detailed user interviews gave us lots of great insights into Chippin’s current state, and specific areas that we could prioritise and address in our design stage. These were:

  • User Education — ensure that the website offer enough detail to educate the user on the product’s benefits and what happens in different scenarios
  • Visual Design — bring a visual consistency that enhances the brand messaging and doesn’t impede the transaction flow
  • Website Layout — ensure that the various features, steps and details are laid out in the right way
  • Perception of Security being fundamentally a payment option for an online purchase, the website needs to communicate this security and feeling of trust
User research and analysing the findings

The Define Stage

Personas

Using the user research, we created 2 user personas that incorporated our user interview findings and reflected our interviewees’ goals and frustrations.

Our personas

We felt that looking at the user flow primarily from the instigator’s point of view would enable us to more comprehensively cover the Chippin journey and for this reason we decided to focus on Christina.

As Christina’s persona was drawn from actual user research, it enabled our team to ensure that all design decisions were were user-centric.

Scenario

It was now time to establish a scenario for Christina that we would design the solution for and test against in our usability testing phase.

Christina’s best friend Michelle is moving to Australia and she is buying her a beautiful handbag from Fairfax & Favor as a farewell present with three other friends: Maya, Jane and Tony.
At the merchant checkout, she notices the Chippin option for splitting the transaction cost online and clicks on this.

The Develop Stage

Ideation — Design Studio

We kicked off the design development phase with a design studio that we ran with the Chippin founding team.

The objective of this exhaustive session was to find ways to build user education & trust.

With a clear problem to solve, the rapid group brainstorming session generated lots of quick and interesting ideas on screen formats and ways to educate and reassure the user.

Design Iterations — Paper Prototypes

We generated lots of paper prototypes on screen formats that had varying levels of information and detail.

We tried to find the right balance between having a simple and stripped-back layout (which users equated to secure payments) vs screens with more comprehensive information (which users also asked for as this was a new product with many what-if scenarios on timing and contributors).

Not arriving at a consensus, we did what we always do — ASK THE USERS.

We A/B/C tested the prototypes with around 7–8 users and analysed the findings.

While many users liked the format A for its simplicity, they felt there was a lot of detail still missing around product information, time limits on raising contributions and payments.

Format C was comprehensive and engaging but had too many steps, while format B was confusing in its page layout.

We incorporated the feedback from these tests to arrive at the right screen formats as we moved to the digital prototyping stage.

Design Iterations — Digital Prototypes

As a result of all the research, prototyping, testing and iterations, we broke the user into 4 specific screen designs.

For each of these, we moved through various iterations while upping the fidelity and testing constantly.

Screen 1 — Welcome / Landing Page

Iteration 1:

Iteration 2:

Iteration 3:

Screen 2 — Add Contributors Page

Iteration 1:

Iteration 2:

Iteration 3:

Screen 3— Payments Page

Iteration 1:

Iteration 2:

Iteration 3:

Screen 4 — Dashboard Page

Iteration 1:

Iteration 2:

Iteration 3:

Extra, Extra

By this stage, the user feedback had gotten vastly better, and was so positive that I felt we could push the boat out a little further in the design sprint by:

  • Reviewing the designs at the secondary persona user flow (the Contributor)
  • Re-designing the content of the emails sent to the instigator and contributors to ensure these were consistent with the new designs.

Click here to access our final clickable prototype.

Next Steps

Working within the constraints of a 2 week design sprint, we we achieved the objectives of the project brief, and more.

We presented our designs and workflows to the Chippin CEO, CTO and COO, and their feedback was incredibly positive. The Chippin team is now in the process of implementing our designs.

Given more time, and based on user feedback through the course of the project, there are additional areas we could have explored:

Conclusion

Both the user feedback through the project, and the feedback from the Chippin management team on the re-design project has been wonderful, and extremely rewarding.

“Thank you so very much for your superb final presentation today. You have all clearly put so much time, thought, energy and, dare I say it, love and passion into helping to move Chippin onto the next level in terms of UX/ UI, and we massively appreciate it. “
— Toby Rhodes, Chippin COO

Contact Me:

meera.rao@gmail.com