Shipping Web-App Design

Showing before and after of a a shipping app redesign

Project Definition

To take an existing app bundled with years of technical debt and cobbled together ideas and create a modern, clean user experience to make the checkout process easier and faster.

User flows through the app showing the potential for improvement

Current vs suggested steps in the checkout flow.

Evaluation

I first worked to understand the flow for the user, what was slowing them down - what changes could be made quickly to improve this and what was an ideal flow with the minimum number of hurdles. There were a number of obvious things waiting until after payment to offer an account that would help massively reduce drop-out.

What we're working with

User flow isnt the only thing that will impact the bottom line - I wanted to take this as an opporuntity to take all of the teams wealth of knowledge and condense into a more consistent, clean and readable design.

The new design with simplified layout, easier to digest content.

A friendly UI for a complex process

While shipping still requires a lot of form filling and check-boxes, especially shipping internationally - breaking things down into manageable pieces and making the layout easy to read and understand goes a long way.

To support a large and powerful shipping platform, creating consistency and tools for developers is key.

You can see for example that rather than having to support many buttons in different contexts, I helped to bring these all under one single component.

Supporting the development team with the logic behind my decision making is key among a distributed team.

Page Gallery

Posted on May 10, 2024

More by Mike Newbon

View profile