Historically, visitors interested in shopping on Spud had to go through disjointed steps to create an account and checkout - a cumbersome process that led to high drop-off rates.
To reduce friction for users, we redesigned the onboarding flow with plans for future enhancements. I was the main designer leading this project in August 2021; I ideated early concepts, presented regularly to stakeholders, delivered final assets for production and supported dev QA. I worked with cross-functional team members including a project manager, an implementation lead, 5 developers, 2 QA engineers, and customer care representatives.
This project was part of a brand new e-commerce solution for Spud’s retail client. Spud itself planned to migrate onto this new platform, so the goal was to replicate and improve Spud’s existing model. This was one of my favourite projects, but sadly it only launched for a short bit due to shifted company priorities.
With Spud’s open cart, the site inventory is based on the user’s postal code and delivery date. Spud already does a great job of minimizing friction in the onboarding funnel by allowing visitors to casually browse, and only asking for these information when they click “Add to cart”. To improve upon this step, I added space to clearly promote our value propositions and further nudge the users down the funnel.
Spud regularly gets complaints about the confusing signup process. When visitors checkout for the first time, after creating a user id they are taken to an address page within the account settings, and they have to find their own way back to the checkout page. After that, they are taken yet again to the payment page in settings, and they have to manually checkout again - all of which can be disorienting and frustrating.
The redesign combines it all into three simple steps - creating an account, adding an address, and a payment method. Each step is clearly marked to guide first-time users and help them feel confident about their next steps, and each step has a ‘Skip for now’ option so that users have clear exit points (their progress will be saved, and they can always come back to it when they’re ready).
The initial idea was to simplify it even more by combining them into a single page, but this proved to be too complex. A single-page format wouldn’t really be flexible for scenarios where the user manually adds their address or credit card through account settings. By breaking it down into three steps (or four including postal code and delivery date validation), we can transport users to whichever information that’s missing in order to ensure a successful first-time checkout.
Spud’s payment page creates a lot of confusion due to poor design (eg. Inappropriate usage of icon, card type separated from card details, perpetual error message). I worked with the developers to understand the key information required by the payment provider, and arranged the form so that it better correlates to users’ mental model of a typical credit card. I also opted to display the logos for the accepted cards, which switches to just one (or none) as the user starts to type in the digits to provide immediate feedback on whether their card will be accepted or not. I also redesigned the layout of the form so that it better correlates to how the information is laid out on real credit cards.
The open cart gives incredible flexibility for managing one’s order, but at the time there was little to no information about it on Spud’s website (how to use, order deadline, when user will be charged, etc.). In the redesign, each step clearly communicates the value propositions and how the open cart works - including order deadlines and when users will be charged to educate users, increase interest, and further encourage them along the funnel.
These may seem basic, but they were some of the most asked questions for Spud since customers couldn’t find the information on the site (and casual visitors are rarely motivated to go digging for answers)!
The checkout button on Spud always says “Complete order”, whether the user is submitting the order for the first time, or updating their order after editing their cart. This creates a lot of confusion for customers, who wonder if they will be charged twice if they make any changes to their order. The redesign improved communication with dynamic button copy that match users’ expectations (“Complete order" for first-time checkouts, and “Update order” for any changes that are made to that order).
Additionally, I designed enhancements using the first checkout promo code to further reduce the drop-off rate. Spud always had its new customer promo code in the header, but user testing revealed that it gained little recognition from users and was in need of re-evaluation.
I re-imagined the new customer promo code as an important part of the onboarding experience in the four scenarios below. These received great feedback from the client and internal stakeholders and were deemed a priority for Spud’s migration. Unfortunately, they weren't implemented for the client due to a restricted timeline.
The designs received great feedback during the client’s Family & Friends launch in April and May 2022, with users commenting the site was “super easy and convenient” and “easy to navigate” with no complaints around account creation and initial onboarding, which indicates the redesign is a direction for improvement.