Tiki Tops

Responsive Website - UI Design

Objective
Tiki Tops is a responsive website where users can design their Hawaiian shirts. When design you can choose the base color, pattern, pattern colors, and the opportunity to add a logo or image with text to customize a shirt to an event or company. Once a user has created their Tiki Top, they can either order one shirt or use our on-line spreadsheet to order for a group. Customize each piece is easy, and a user can produce thousands of design results with our range of colors and patterns. Users can share each design with friends and coworkers before sizes need to be added by saving it to your Tiki Top account.

Problem
How can an individual design a custom Hawaiian shirt for their group event, company outing, or for themselves?

Goal
Create an innovative, responsive website that navigates the user through the design process to create their own Hawaiian shirt. Design and ordering process that creates fewer opportunities for an individual to make mistakes when ordering multiple sizes.

Role
UI/UX Designer

Project Scale
1 Month (February 2021)

Stakeholders
CareerFoundry UI Design Course

Competitors Analysis & Research
During my research, I was able to find multiple companies that provided custom Hawaiian shirts, but what I wasn’t able to find was an on-line tool where a user can design their shirt from start to finish. There were sites where a user would send their information and design direction, and they would receive a proof at a later date. On other sites, a user could only add an image to an existing design. One on-line design tool that I found was not very user-friendly. I took some time trying to design a shirt but wasn’t able to put anything together. With this research, I realized a niche in the market was missing, which is why I created Tiki Tops.

User Testing
There was an opportunity to create a simple ordering system for a multiple pieces by using a simple spreadsheet. This type of order form allows for less user mistakes because the user can easily see and make changes to their order. Since this type of flow is not the usual way to add sizes I wanted to test it out on potential user.

I asked my testers to create a multiple piece Tiki Top order that included 4 Mens Medium, 1 Mens X-Large, 4 Women’s Small.

Task Flow 1 As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history. — **Task Flow 1**
As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.

Task Flow 2 As a frequent customer, I want to be able to save my favorite search criteria, so that I can easily find what is most relevant to me. — **Task Flow 2**
As a frequent customer, I want to be able to save my favorite search criteria, so that I can easily find what is most relevant to me.

Task Flow 3 As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time. — **Task Flow 3**
As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time.

Site Map

Wire Frames
Low Fidelity

Wire Frames
Mid Fidelity

The design process can be easily done on a mobile device, laptop or desktop. Once the design has been saved it can be edited at any point until the shirts are ordered. If a photo is uploaded, it will be placed in designated areas throughout the patt…

The design process can be quickly done on a mobile device, laptop, or desktop. Once the design has been saved, a user can edit it at any point until the shirts are ordered. If a photo is uploaded, it will be placed in designated areas throughout the pattern. The same goes for adding text to the design.

Summary
The original object for this project was to create a responsive e-commerce website to design custom Hawaiian shirts. A user will choose a base color, pattern, colors for their pattern and add an image and text. Once the shirt is designed, a user can purchase a singular shirt or order multiple. After completing the research, user testing, design process, and more user testing, I feel that the objective was a success. The process is easy to follow with the website design tool showing your design results as you are making them. If a color is changed, the mock-up will change that color simultaneously. A design can be saved to a user's profile and shared with others if they are designing a shirt for a group outing. When a user finalizes their design, they can move on to the ordering process. Ordering a single shirt follows the same pattern as ordering on other e-commerce apparel websites, starting with choosing between kids, ladies, and men via a drop-down and then picking out their size. If a user orders multiple shirts of the same design, they would choose the multiple piece tab and then fill out the spreadsheet containing all their shirt sizes. I tested out this process because it may feel foreign to some users. The feedback I received was all positive, and my testers preferred this style of adding sizes for a multiple-piece order.

The layout and design tool I created for Tiki Tops could also be used on many other sublimated apparel pieces such as training tops and jerseys. Different patterns could be designed that relate closer to their sport or activity, but the same design process would start to finish. The ordering process would also remain the same with an individual order or a multiple-piece order.

If I were to create this project, I would change the bread crumb navigation on the bottom of the design screen to either the side or near the page's top. Where it is located now, it is not clear as I would like it to be, and with more information adding to the page, it would get lost even more. I am happy with my final results of this project, and if I were to redo this, I would only make a few minor changes.

Take a look at my other work.