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
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.
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.
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.
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.
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
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.
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
The Define Stage
Using the user research, we created 2 user personas that incorporated our user interview findings and reflected our interviewees’ goals and frustrations.
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.
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
Screen 2 — Add Contributors Page
Screen 3— Payments Page
Screen 4 — Dashboard Page
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.
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:
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