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: Customize, Purchase, Accounts 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
