6 months ◍ 2018
User Flows, Interaction Design, Prototyping
Hopscotch.in, a discovery-based online shopping platform, offers curated children’s merchandise to mothers in India.
Previously, anyone who had not signed into their Hopscotch account, or was visiting for the first time, was treated as a “guest” user and had a restricted experience. We never permitted guest users to add items to cart. With the launch of the new checkout flow, guest users were not just able to add items to cart, but also continue as a guest and have access to their shipping and payment details for a faster and smoother checkout experience.
I was the Product Designer on the team and worked with a Product Manager and a large team of front-end and back-end developers. I created a cross-platform checkout experience that was launched on the website as well as the Android and iOS app. My role included research, mapping out the user flows, designing wireframes, interface components, visual designs, and prototypes.
The rollout of the redesigned checkout flow on the mobile site saw conversion grow nearly 10%. We also saw almost 50% more users adding items to cart on a daily basis, which enabled us to retarget users more intelligently.
In the earlier checkout flow, users could browse collections and products on Hopscotch but couldn’t add items to cart until they had signed in. Guest users accounted for 66% of our overall traffic and we discovered that 46% would drop-off when prompted to sign-up or sign-in while adding to the cart. We were forcing users to sign-up so that we could use their email address to re-target and convert them into buyers but forced sign-ups caused nearly half our users to drop-off.
In my research, I came across a study by Baymard Institute that confirmed the issue we were facing. The 2017 study showcased a survey conducted with online shoppers which revealed that 37% of shoppers abandoned an online purchase after being forced into creating an account during checkout. Their usability testing also indicated that as many as 18% of users with existing accounts abandon checkout due to password issues.
After summarizing my findings from the Baymard study, I studied other e-commerce sites, including competitors and well-recognized sites, to understand standards within the industry and beyond.
Brainstorming sessions with the product manager and head of design helped kickstart rethinking the Hopscotch user journey. We came to an agreement to get rid of the biggest thorn in the shopping experience — the sign-in. We decided to explore a way for guest users to place an order without the friction of creating an account. My product manager proposed a switch in the primary user identifier from an email address to a mobile number to eliminate duplicate accounts. With a mobile one-time password (OTP) authentication, we hoped to reduce user dependency on a password as well. While my PM looked into the technical aspects of implementing this, I focused on the user flows.
From a business perspective, we needed to capture users' mobile number for authentication followed by their shipping and payment information to place their order. With these inputs, I put together a skeleton of the user flow for a guest user.
User flow — Guest’s first purchase
Initially, I designed the checkout flow in a linear fashion that starts with a simple, lightweight task of entering a mobile number before progressing to slightly more complicated form filling tasks for the shipping address and payment details. I added a Review screen, which gives the user a brief overview of all the inputted information for easy verification before placing an order. I quickly realized that one size rarely fits all in a checkout flow that is open to guest users. I then modified the flow to adapt to different types of users in a seamless way.
Flows based on user type
After creating the basic flows I worked closely with the product manager to create a flow chart that captured other touchpoints in the experience like the OTP verification and coupon validation. I then moved on to designing wireframes using Balsamiq to showcase the different layouts and flows in order to get early buy-in from stakeholders.
Once the wireframes were completed and approved by stakeholders, they were shared with the front end and back end technology teams so they could get started with development. I moved on to creating interface components followed by high fidelity mockups in Sketch. In addition to this, I made user flow prototypes in Invision so that all stakeholders could experience the proposed flow. For sharing micro-interactions and nuanced animations with the front end development team, I created high fidelity prototypes using Principle.
The flow was designed to be:
Quick | For repeat shoppers who are signed in and have saved information, I removed the need to take them through all the steps in the checkout flow and instead be taken to the Review screen, with all their details pre-filled. This reduced the time to checkout for returning shoppers.
Flexible | I wanted to give users better access to their address, payment, and other information before, during, and after a transaction, so I designed the experience such that users can place multiple orders without being forced to create an account. Users were also given the ability to track orders and access all their saved information — including their order history. By doing this, having “an account” became immaterial.
Private | At the end of the checkout flow and in the account page, I provided guest users the option to opt-out and clear all saved information from their device or browser.
Desktop website design
The new checkout experience was first launched on the mobile and desktop site. The rollout of the redesigned flow on the mobile site saw conversion grow nearly 10%. Almost 50% more users were adding items to cart on a daily basis, which helped the the company retarget users more intelligently.