GoDaddy Smart Terminal

Client
GoDaddy (via FullStack Labs)
Role
Design System Lead
Category
Design System · Point of Sale
Year
2022

Outcome

1,090component variants
48components for point of sale
108color styles
6device models on one system
A tablet terminal and a handheld terminal showing the same discounts screen, under the title "Making card terminals look and work like GoDaddy".

GoDaddy bought Poynt, a company that makes card terminals for merchants. Some models have a second, smaller screen facing the customer. Poynt's terminals came with their own components, which were inconsistent and outdated. My job was to make them feel like GoDaddy, with a design system made specifically for point of sale.

01

The Problem

Every new flow meant redesigning basic pieces from scratch, and nothing on the screens looked like GoDaddy.

02

My Role

I led the design system. I mapped who used the terminals and on which devices, documented every existing component and rebuilt them on top of GoDaddy's mobile design system, adjusted for point of sale.

03

The Solution

A point-of-sale design system that works on six devices and on both the merchant's and the customer's screen. It's accessible and consistent, so the team could build new flows quickly.

Know the hardware

Six devices, two kinds of screens

Before designing a single component, we listed every device in use and its screen size. Some terminals only face the merchant, and others add a small screen for the customer. Every component had to work on all of them.

Six Poynt-era devices with their screens drawn to scale: Poynt 5, Poynt B, Poynt C, N910, Tablet 10.1 and Tablet 13.3 inch, with sizes, and the small customer-facing screens of Poynt B and C shown dashed.

Color palette

  • Teal #00A4A6
  • Aqua #1BDBDB
  • Ink #0C0C0C
  • Mint #D8EFEF
  • Surface #EFEFEF
  • White #FFFFFF

Typography

Type specimen of GD Sherpa, GoDaddy's typeface: the words XL Display in Display Bold beside its styles, Display Bold, Text Regular, Text Medium and Text Bold.

GD Sherpa, GoDaddy's font, with 22 text styles.

Three leads, one loop

Research, system and flows running at the same time

I worked with two other design leads. The research lead tested with real merchants and customers in Washington, D.C. I handed components to the experience lead, who used them to build new flows. Each flow became a prototype, went back to testing, and the cycle started again.

Diagram of three design leads working in parallel: a research lead running guerrilla tests in Washington, D.C., the design system lead (Thiago) rebuilding components for POS, and an experience lead building new flows; below, the loop test, components, flows, prototype and back to testing.

Document, then rebuild

Every component documented

Specification sheet for commerce small inputs: anatomy, input field types, states such as default, focused, disabled and error, password fields and date pickers.
Inputs, from structure to error statesEach component was documented with its parts, variations and states before anyone used it in a flow.
Specification sheet for the unit input field, showing its types and states.
Made for point of saleWhen the terminals needed something new, like inputs for quantities and amounts, I designed it on top of GoDaddy's mobile foundations.

The new terminal

Checkout, discounts and custom items on one system

With the system ready, the experience lead rebuilt the register flows for tablet and handheld terminals: quick sale, product options, preset and custom discounts, and customer names and notes.

Mosaic of the new GoDaddy Smart Terminal screens in perspective, tablet and handheld: a quick-sale keypad, product option sheets, preset discounts, custom items and customer name dialogs.

Mission accomplished

A terminal that finally looks like GoDaddy

The system made new flows faster to design and kept every screen consistent across all six devices.

Two Poynt terminals side by side with GoDaddy screens: a sign-in screen with the GoDaddy logo and a home screen with app tiles over a restaurant photo.

The film

The Smart Terminal, launched

GoDaddy’s official video for the Smart Terminal 3.0.
“Thiago led the development of our GoDaddy Smart Terminal design system. He is an incredibly talented and detail-oriented designer who took the lead in creating and implementing a system that has greatly improved the consistency and efficiency of our design process.”
AJ Syed Ali · Sr. Lead UX Designer, GoDaddy

Up next

Kind words

Thiago approaches every project with a meticulous and user-focused mindset, and his keen eye for UX problem-solving results in thoughtful and beautiful solutions. Thiago is not only a skilled designer but also a dedicated and hard-working team member who brings energy and enthusiasm to every project.
Photo of Adelina Green Adelina GreenProduct Design Manager, GoDaddy