CUSTOMTHREADS

Spring 2023 | Product Concept | Solo

Project Goal

What am I trying to create?

To create a comprehensive kiosk product using previous experience and skills to include in depth deveopment of design artifacts.

This course, and thus this project, is intended to teach fundamental and comprehensive UX/UI design principles. This is supposed to teach and allow students to explore workflows, documentation planning, and technical handoff processes.

What is the scope?

The course objective is to gain a deeper understanding of UI and UX elements, purpose, and design. My timeline was 15 weeks and I used Figma and Adobe Creative Suites.

Background

What am I trying to create?

I chose to create my own “business” called CustomThreads. It is a clothing business that specializes in sweaters and hoodies of all styles and varieties. They wish to give customers the freedom to fully let loose their creativity and create one-of-a-kind sweaters. They would be located in the center of the most famous cities as they price themselves as a high-end business; this means they attract plenty of foreigners, so they place freedom for creativity as a priority. Their locations are not typical stores, so they would simply have displays, kiosks, and a front desk. Customers can only create and order their products online or on the kiosks provided in-store.

For this project, I am required to place myself in the shoes of a UX/UI designer whose task is to create the branding, UI design elements, and UX flow for the kiosks.

Product RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct RequirementsProduct Requirements

Hardware

What are the considerations?

This physical kiosk will remain in a horizontal position with a horizontal hinge in the back for easy up and down tilting. This, combined with a rounded neck stand, will allow for better wheelchair accessibility. Attached to the physical kiosk, there will be a card reader on the right side as well as a QR scanner sitting directly above it.

The physical kiosk will be a Custom Kiosk Design with a 42.8” Diagonal and 37” x 21” screen. The PPI will be set to a 95 pixels per inch with a 3552 x 2016 pixel resolution.

The kiosk will be located at the front of the store and off to the side.

Content

What is the product catalog?

On the Homepage, there are 3 main navigational flows: Upload, Build New, and Log In.

In the Build New section, there are 4 main categories: Famous Designer, Past Competition Winners, Company Designed, and Start from Scratch.

In the Start from Scratch section, depending on which main category is chosen, it will allow for 2 subcategories. The first one is Materials, which contain Wool, Denim, Silk, Cotton, Cashmere, Polyester, Nylon, and Fleece. The second is Styles, which contain Cropped, Performance (zipped), Oversized, Knitted, Tunic, Asymmetrical, Pullover, Full Zip, Half Zip, and Athletic (no zip). The styles available will be dependent on which material the user selects.

Functions

What are some unique interactions?

One interaction will be for loyalty members. If the user logs in, then the home screen changes to personally welcome them. They also have access to previously made products and previously uploaded images/designs that can be used in the customization stage. Another will be cut-through flows. This will be for when a user makes their product online on the web or the app; then they are given a special QR code unique to that created product. The user can then scan that QR code at the kiosk, and it will immediately upload. The user then is given the option to go straight to checkout or edit it on a much larger and easy-to-access screen.

What is the order tunnel?

The user starts in their bag. Once they are happy with their product(s), then they can go ahead and pay. They are prompted to use the card reader to the right side. Afterwards, they are given 3 options as to what they wish to do with their receipt: get a printed copy, get an emailed copy, or get no receipt at all. If they wish for a printed copy, then they will have to go to the front desk. If they wish for an emailed one, then depending on if they logged in or not, their email will either be saved or not. If they did not log in, then they will be prompted to enter an email. The final option is if the user chooses to not get a receipt at all.

What are some global considerations?

My two main considerations are accessibility and text input. For accessibility, On almost every screen, there will be an accessibility button available to the user. Within it, it will house the options to change the language, color output display, brightness, and any other help options. it is due to the amount of foreign and domestic customers. When prompted, there are some sections within the flow that either require a text input or have it as an option. When coming across a text input field, a keyboard the size of a 12.9” iPad keyboard will appear. It is a floating object and can be moved around anywhere on the screen.

What are some errors and situational awareness?

Three of the errors and situations a user might encounter will be during the filter stage, through buttons, and when the screen goes idle.

At the Start from Scratch subcategories, because the style is dependent on the material, the user might encounter the most trouble here. When selecting a material, all unavailable and/or incompatible styles will be greyed out. The same will occur if a material is out of stock. There is a CANCEL button available on every screen. This button is for when the user no longer wishes to continue their purchase and leave the kiosk entirely. If the user does not use the screen for more than 1 minute, then the screen will ask if they still wish to continue.

If the user does not interact with the kiosk for another minute then the kiosk erases the transaction and restarts to the splash screen.

workflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflowworkflow

Flow

Entire Workflow

This is a view of the entire workflow from when a user begins using the product to when they complete their purchase and finish using the product.

Legend and Start

The legend displays the flow start, category option, interactions, states, user choice, and errors/warning as a specific shape and color. If the line is dotted then it leads to multiple flows but if it is solid fill, then it only has one flow.

QR Code Upload

This is the frist of the three main navigational flows. This flow guides the user through uploading their product using their QR code and scanning it.

Loyalty Log In

This is the second main navigational flow. This flow guides the user through logging in whether they are a returning member or a new member.

Build New

This is the last main navigational flow. This flow guides the user through building their product from scratch.

Template

This is for when the user choses to utilize a template that has already been predesigned. This flow guides the user through building their product from one of the predetermined templates available.

View Bag and Payment

This flow guides the user through viewing their bag, payment, and finishing their transaction.

WireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframesWireframes

High Level

Splash Screen

This screen shows the splash screen which shows up when the kiosk is not in use. The user will tap the screen to wake it up and begin their transaction.