Point of Sale Design
MPOS (Mobile POS)
Carter's, the largest branded marketer of apparel for babies and young children, hired two resources to push an 8-week initiative to reset their "Point Of Sale" (POS) system. Aptos and Tin Roof Software were chosen to fulfill the order.
As the Sr. UX/UI Designer for Tin Roof Software, I lead a team of developers and QA engineers through the UX process of creating this new, user-friendly, mobile POS application.
UI Gallery
Price Override
Customers commonly visit the store to make purchases based on prices they saw online. When they come in and realize the pricing is different, the "Price Override" feature allows store managers and sales associates to make adjustments for that customer's satisfaction.
For feasibility, I included a button group to offer options for how to update the price:
Percentage / Dollar Increments / 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.
Previous POS System
These were Carter's original designs that I researched to understand POS systems.
Older HomePage
Old POS Login
Price Override V2
Find Customer Results
Transactions V2
Find Customer v1
Transactions View 1
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.
Transaction Flow
I created an overview diagram of how employees start with a customer and move through the possible transaction flows.
POS Design System
I put together a design system to help developers with standardizing components, sizes, and other elements throughout the experience.
Design System Components
Typography and Colors1/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 & Corners2/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.
Layout Types
For all application screens3/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 Sizes4/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.
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
