Checkout Process

SL360 is a SaaS company specializing in providing marketing data through a suite of digital products. Within the platform, most users focus on audience building for their marketing campaigns. However, the search process before checkout involves numerous considerations, potentially overwhelming users and prolonging their journey, leading to unfinished lists.

My role involved proposing a redesign initiative aimed at modernizing the user interface and improving the user experience by streamlining the check out process into three main steps.

COMPANY

SL360

ROLE

Visual Designer

PROJECT TYPE

Web

TEAM

1 Creative Director
2 Web Developers

YEAR

2023

STYLE GUIDE

In modernizing SL360's UI/UX, a key focus was refreshing its colors, typography, and establishing a style sheet for UI elements, ensuring a consistent and enhanced user experience.

Neutrals were added to the palette in complementing the UI's minimalistic design and enhance its secondary colors. The typeface Noto Sans was selected for its clear and readable font ensuring an accessible user experience across platforms.

HOMEPAGE

Designing a simple, user-friendly homepage was key for easy navigation through the platform’s range of digital products. Grouped by services and prioritized by user preferences, the layout ensures straightforward product messaging for enhanced user discovery.

TARGET AREAS

To streamline the search process, all considerations are organized into three main steps. These steps are made conveniently accessible via a left navigation bar, providing users clear guidance throughout their journey.

The platform stands out for its robust targeting capabilities, offering granular search functions for precise audience selection. Consistently applying grouping principles throughout the user journey was crucial in managing vast data and functionalities.

TARGET AUDIENCE

In creating a streamlined checkout, the challenge was to balance simplicity with comprehensive functionality. Checklists and selection boxes allowed for easy one-click selection and deselection. Expansion indicators within the checklists offered user control by displaying only relevant options, preventing overwhelming choices.

REVIEW AND CHECKOUT

During each step, users have the option to review their selections and make edits via the left navigation bar and the comprehensive functionalities on the main screen. This helps users see a quick overview of their selections and a clear pricing breakdown.

At checkout, users can effortlessly select a payment method and fill in the necessary details to complete their purchase.