Improving Hollar's iOS Checkout Process

When first tackling the project of improving our checkout flow in regards to our iOS app, the Product team here at Hollar first had to establish what the problem was that we were trying to solve. We noticed that a lot of our users were abandoning their carts on iOS due to how much work was involved to get from point A to point B. We also needed to add new payment options to the app without making the checkout process take any longer. By removing a few unnecessary screens, and combining similar tasks into one screen, we were able to create a flow that took far less time for app users to get through.

Feature Comparison

see how they handled their checkout experience. One app I continually turned to was for B&H, a consumer electronics store with a focus on cameras and lighting equipment. While they aren’t in the same market as Hollar is, they were able to solve the problem of allowing multiple payment options like Paypal, credit card, and Apple Pay, and did it in a way that makes sense for them. We also turned to Zappos! as they are a well known brand known for making shopping easy. Though we liked all the payment options presented before you begin the checkout process on each app, we didn’t like how it could be a strain to reach a thumb down towards the icons, so our own version prompts users with large buttons as options after they click “Proceed to Checkout”, which you’ll see in the final comps later on.

We also really appreciated how B&H were able to outline their process as 3 steps through the progress indicator at the top of their checkout. We compared their process indicator against a few others like ASOS, which had icons representing steps. The icon approach seemed vague so we ultimately went ahead with making it a 1–2–3 process for better frame of reference.

 
Feature comparisons between B&H, Zappos! and ASOS

Feature comparisons between B&H, Zappos! and ASOS

 

Wireframing and Gathering User Feedback

I’m a believer in getting user feedback sooner rather than later. That way, you can then pivot earlier in the process rather than when you’ve already invested way too much time in it to rework everything AND get it launched in time. So once we established a first time user flow and a return user flow, I created wireframes and placed them in 2 different prototypes using Invisionapp and we gathered valuable user feedback with UserTesting.com. (though I’m really curious about using Lookback). We were initially going to go with a single page “review” screen where you could fill out missing info by clicking each section, but found that the alternative 1–2–3 step process was clearer for first time users, so I’m glad we tested it before the development phase. Return users skip steps to go to the review screen, with the option to update stored information. We were also able to address a few pain points users experienced in our tests and revised accordingly.

Hollar checkout wirefreamed prototypeFeature comparisons between B&H, Zappos! and ASOS  

Hollar checkout wirefreamed prototypeFeature comparisons between B&H, Zappos! and ASOS

 

Some Final Designs

After revising based on our user test results and further collaboration with the app development team, we were able to “put a coat of paint” on it, so to speak, and make it pretty using Sketch. This was actually the easiest phase of all since all of the ground work was done ahead of time. The result is an easier to use checkout process with fewer screens, and a lower cart abandon rate on our app. Success! 🙌

 
Some of the key screens from Hollar’s new iOS checkout.

Some of the key screens from Hollar’s new iOS checkout.