A critical point in the online shopping funnel, it was important to ensure a simple and ubiquitous experience for users across any device they may use.

Research

At the time of this project, the company was conducting a replatform of its ecommerce site - a huge undertaking considering the potential ramifications on transactions. All aspects of the site were evaluated and analyzed including the critical checkout process. I was tasked with evaluating the out-of-the-box checkout process of the new platform and enhancing it for our audience.

Market research

My focus in the market was selective towards the most successful checkout systems and included those in the electronic hardware space. I took time analyzing these effective market platforms by evaluating their best practices and also taking note of where they fell short. I converged all of this information to provide proper intel to begin setting up the project.

Replatformevaluation

In order to provide the development team a framework to begin, I quickly evaluated the default checkout process of the new platform and presented a thorough analysis of what needed to be changed to cater to Astro fans.

This initial markup was enough to get the developers started. It provided me the proper time to perform extensive research on effective checkout systems in the market and define a setup that was optimal for our our own process.

Goals

Analyze and enhance default checkout system for new ecommerce platform

Analyze successful marketplace checkout systems

Optimize the experience for desktop, tablet, and mobile devices

Design for localization in current European and Asian markets

Brainstorm

After a thorough research across multiple checkout processes in the marketplace that are known to have a high conversion rate, I proceed to outline a general flow that broke down all of the phases into a simple experience.

Defining the details

With the general flow in place, I began documenting all of the features and details that were needed throughout the checkout process. Since there was so much information needed from the user, it was important to segment everything into their appropriate sections to make it easy for the user to complete.

With the blueprint of all the pages and features that needed to be implemented, I was ready to begin developing the wireframes.

Quick iterative wireframes

The checkout process is a critical point in the shopping funnel. A the same time, a big challenge is that it requires a heavy input from users which can be daunting and tedious. It was important to think through designs that made this part easy and fluid for users.

In addition to these wireframes, I also produced ones that were optimized for tablet and mobile devices. Since these spaces were dealing with smaller real estate sizes, I had to be more conscious of the information that was displayed.

Visual design

The language and visual design were delivered to match the Astro Gaming brand and UI style guide.

Approachable interface

In order to make these forms less daunting, I was generous with padding and enlarged the UI elements.

Timely information

Only relevant requests are presented through the user's choices.

Credit card information is only requested if a user selected that as their method of payment.

Designed for localization

With some Asian and European markets already established, it was important to design accordingly to accommodate other languages. Text field titles on top provided ample room for any language. Headers were also important to designate field properties since text field values disappear on click.

Responsively designed

With ecommerce transactions growing beyond the desktop, it was important to design for any device that may be used to purchase Astro Gaming products.

Mobile ready

For those who prefer to shop on their phones, the site is optimized to fit and function easily on the smaller real estate.