Account Connection UX Redesign

Redesign a B2B service that integrates third-party accounts as an authentication method for clients' apps.

Role

UX/UI Designer

Deliverables

UI Redesign, Design System, Prototyping

Team

1 PM, 1 Designer, 3 Developers, 1 QA Engineer

Client

Client Logo

Overview

Gamestark is a backend-as-a-service platform that helps game developers build and scale their games. One of its key services is Account Connection, which provides a range of authentication methods, enabling flexibility when authenticating players and admins.

Drawbacks of the Previous UX

Gamestark legacy social connection UX

The previous service had a simple and straightforward UX but faced several challenges:

  • 🙁 Limited platform options and no clear instructions for setting up account connections.
  • 🙁 The UI lacked a dedicated section for an overview and insights, leaving users unsure about what to do next.

Opportunity

This redesign presented an opportunity to address these pain points and enhance the user experience. By rethinking the interface and interactions, we aimed to:

  • Expand platform options and clarify the setup process.
  • Provide users with a complete overview and contextual information at every step.

Account Connection 2.0 Redesign

Setup a New Connection

The redesigned interface allows users to quickly set up connections using pre-configured platforms, saving time and effort.

Initial State

If no accounts are connected, users see an empty state screen that simplifies the onboarding process.

The initial state of the UI

Activated Platforms List

For users with existing connections, the platforms appear in a clear, comprehensive list.

The list of platforms activated

Select the Platform

A new platform selection screen organizes options by type, with short descriptions for added context.

Configuration Fields

After selecting a platform, users can input the required details to set up the account connection and identity provider.

To minimize interruptions, comprehensive documentation is embedded directly into the setup flow as step-by-step instructions, ensuring users don’t need to leave the process for help.

Account Setup Successful

Once the connection is successfully configured, visitors to the client’s webpage can sign in and authorize their accounts through the selected platform (e.g., Twitch).

Activate the Connection

Success Notification