24-hour design challenge

Image for post
Image for post

After interviewing for the role of a product designer for a startup, I was asked to complete a 24-hour design challenge in order to showcase my ideas when it came to designing for an e-commerce site.

Seeing as this was my very first design challenge in an interview process, I was excited and decided to record my process.

I was given the task of redesigning the Checkout page, for their e-commerce website, with the constraint of designing an experience for a user that is completing their second order using the existing checkout page.

Here is what the existing design of the Checkout Page looks like:

After looking at the current design, I asked myself the question:

How do I help users pay quickly and easily?

Going through the current form as if I was one of the users, I identified some issues and created some key insights.

1) Since there are more than 2 steps in the check-out flow, there should be an indicator to show progress, instead of just being a form to fill out.

Because of this insight, I felt it would be better and simpler for users to understand and fill out the checkout fields properly if it was converted to a step-by-step process, where you start with the customer information and then have to enter all the details before unlocking the next step of the checkout process. The green title shows the active field that the user is entering information in. I figured this would also prevent users from accidentally checking out and not reviewing their orders, which could definitely be a problem since the orders are typically bulk orders and can be on the pricier side. Trying to avoid human error and make the customer’s life easier is important.

Image for post
Image for post

2) If a user wants to come back to the order or had accidentally exited out of the page, they would have to re-enter all the information.

Losing information can cause frustration among the user, and lead them to not be inclined to complete their purchase. To avoid this, I added the option where information from a previous order would be auto-saved and the customer could select this information on file with the click of a button. It appears as the first bit of highlighted information so that the user can automatically select it before continuing with the other details. Of course, if the customer needs to edit the information or add a new form of payment or shipping address, that option to edit and change the information is available as well. Since the target user would be typically aged 40–55+, with a background of not having that much experience with technology, it only made sense to limit the number of questions and boxes that needed to be filled with information. That way users would also be more inclined to make a purchase a second time because they wouldn’t have to re-enter all their information again.

As you can see here, there is the option for the user to select their “Most Recently Used” address, but if they need to edit or add a new address, a pop up with text fields appears so that the user can be solely focused on entering the shipping address information.

Image for post
Image for post
Image for post
Image for post

The payment section that is shown below also employs the same kind of feature, where something like the credit card information is saved so that the customer doesn’t have to enter that information every single time.

Image for post
Image for post

3) There is no order summary, so the users can’t make sure they are ordering the right items before they confirm the purchase.

For this, I added a section for the customer to review and submit the order. This includes going over all details (quantity, price, and agree to the terms and services). I made this more visual too, by including pictures of the products being purchased, so customers can refer to the product by not only its name but also the product image as well. This would be the very last step in the checkout process to make sure that everything is finalized before hitting the “Complete Checkout” button.

These were my recommendations to their team, and I was able to submit this design challenge in under 24 hours.

And after receiving feedback from the team there are a few things I would’ve changed about my design. I would have:

  • Added a system to allow users to continue on another device by emailing or saving for later so that the order would not get deleted.
  • Use pagination or a progress bar to show the steps in conversion flow more clearly
  • Allow checkout as a guest

Looking back on this challenge, I realize how great of an exercise this was. In addition to showcasing my skills and design thinking process, I was able to learn more about best practices about UX since I have never designed for e-commerce/retail before. It also provided me perspective on what it’s like to produce work for a startup that is fast-paced and constantly iterating. Can’t wait to see what is in store for me next!

Written by

Industrial Design student @ RIT. Lover of books and the great outdoors. Bay Area native.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store