Client

Teamatic

Role

Sitemap
Wireframes
UI Design

Overview

Teamatic is a web app for ordering custom team uniforms. The app experience is tailored to be responsive, clear and easy to use.  With the idea of reusable components that scale in mind, I designed the app in steps in which I outline below:

The Flow

I wanted to make sure that I had a good understanding of the site structure so I created a sitemap with the flow of pages.  I used color coding for taxonomy – in effort to distinguish four categories: CustomizePurchaseAccounts and Custom Store

 

Wireframes

 

I created my wireframes in Adobe XD, the idea was to create two versions.  A desktop version for a full web experience and another based on a responsive break-point to represent the mobile version.  The requirements are based on best practices for online shopping  – coupled with customization options that are needed to fulfill every product option.

 

Visual Design

 

The product and ease of customization options takes priority over marketing opportunities.  Other than buttons and obvious calls to action, the goal was to keep the design minimal.  With the product customization being a huge focus, I made sure that there weren’t too many distractions.

 

Responsive Behavior