Payments Flow Redesign


Client: Moshi Monsters

Role: Lead UX designer

Skills: Sketching, wireframing, prototyping, usability testing

Project Brief

The current payments flow takes an average of 8 minutes to complete. We wanted to decrease this.

The Challenge

We wanted to redesign the membership flow, so that non-members could more easily convert to paid members. The current flow was clunky, overly complicated, and took an average of 8 minutes to complete. We wanted to streamline it down as much as possible to create a quick, usable experience that could convert many more members.

The main challenges were:

  • Understand the limitations of the current payment flow
  • Find out what parents wanted to know before they would consider paying for a Moshi membership, and to make sure we answered all these questions within the design.
  • Streamline down a really clunky process so that it was not only usable, but also incredibly quick.
  • Optimise the flow for mobile as much as possible (though this was not an immediate business priority).

What I did

Before anything, I wanted to crystallise exactly what membership meant for both the users and their parents. I also did a quick competitive analysis of what some of our competitor’s payments flows looked like, identifying some common patterns and messaging.

I conducted a usability and content review of the current payments flow, identifying many issues for improvement. This involved a heuristic evaluation and usability testing with parents. I presented these findings to the product team and we prioritised the areas that we could focus on in this redesign.

Then, I began sketching the current flow, identifying redundant areas and ways to slim it down. This led to iterating the flow down to the quickest way through. I wireframed various versions of the screens and iterated through these with input from tech and design.

Once we were happy with the basic structure and content, I then put this all together as an interactive prototype in Axure:

During this time, we had parents coming in for usability testing every week, testing the prototype and giving feedback. I would iterate on the information and layout constantly after these sessions.

Once we were comfortable with the general layout and flow, I worked with the visual designer to start coming up with high fidelity screens. I inputted the high fidelity screens into the prototype and carried on testing with parents. I also worked with the tech lead who inputted on the designs and prototype, to make sure that the designs were feasible and made sense from a tech perspective.

The Outcome

We ended up with a rigorously tested payment flow that worked intuitively and that made sense for parents.Unfortunately, after UX and design work was complete, the project was put on hold as development resource needed to be focused elsewhere.

%d bloggers like this: