Celebrate New Beginnings

Type

MOBILE POS

Client

Carter's

Role

UX/UI  | ART DIRECTION

Launch

UI Gallery

Price Override

Many customers visit the store expecting online prices, and the 'Price Override' feature enables store managers and sales associates to adjust prices for customer satisfaction if there's a discrepancy.

To enhance usability, I integrated a button group providing multiple options for price adjustments:
Percentage Changes / Dollar Increments / Setting a New Price"

Endless Aisle

Endless Aisle is a feature that allows customers to either make online purchases or order out-of-stock items. Because this process can be done at the same as a normal in-store transaction, I had to style it differently, yet comprehensively in the shopping-list.

Returns

When a customer wishes to return an item, they must provide it to the sales associate and provide the original receipt. If they don't have a receipt, the purchase can be searched and found with information regarding when the item was purchased.

Adorable afro baby boy jumping over yellow studio background with copy space
Element-24
Previous POS System
These were Carter's original designs that I researched to understand POS systems.
carters-half-off-entire-store-82219-1566488795

User Research
Shadowing Employees

After reviewing Carter's previous POS systems, I initiated an on-location, user research activity of shadowing employee's and manager's interactions with customers.

Personas

I gathered that the base-group of users were sales associates, store managers and tech support specialist of varying years of experience.

carters-Personas - 1 – 1
carters-Personas - 3 – 1
carters-Personas - 4 – 1
carters-Personas - 2 – 1

Transaction Flow

I created an overview diagram of how employees start with a customer and move through the possible transaction flows.

Transaction Flow

POS Design System
I put together a design system to help developers with standardizing components, sizes, and other elements throughout the experience.

Carters-Style-Guide-Section1

Design System Components
Typography and Colors
1/5

You can see the in-file hierarchy of segments, based on the letters in the top right corner of each section.

I used the 8-point system as a bedrock sizing system to determine padding, UI components and the typographic scale.

Buttons + Inputs
Types & Corners
2/5

The core idea for the UI was based on a friendly and child-friendly look & feel to keep our little inspirations in mind through out the experience.

Carters-Style-Guide-section-2
Carters-Style-Guide-Section-3
Carters-Style-Guide-Section5

Layout Types
For all application screens
3/5

These diagrams aid in ensuring how many "Page Types" are used throughout the application. It also aids in identifying foreign "Page Types".

Dialogue Styles
Cateogorized Sizes
4/5

By using categorized sizes using a familiar scale of H1-H4, developers found it much more effective to talk about and re-create consistently-sized dialogue windows.

It also helped to provide situation examples of where each type of dialogue window could be used.

Carters-Style-Guide-Section5
Carters-Style-Guide-Section7

Icons + Unique Colors
5/5

An "Icon Package" was provided outside of this document for development feasibility.

Unique Colors were utilized for uncommon situations. I wanted to ensure they were identified in this document as unique elements.

Other Projects