UX/UI Design
Rocket & Custard
T-Shirt Creator App
Digital Designer
My Roles
Product Designer
UX Designer
UI Designer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus sapien, lobortis eu efficitur et, hendrerit vitae ligula. Aenean ornare maximus turpis, eu tempus massa placerat eu. Integer velit sem, efficitur ullamcorper mollis ac, auctor at enim. Donec et risus in ante suscipit aliquet a ut justo. Aenean tincidunt erat lacinia, commodo felis at, porttitor tortor. Vestibulum lacinia placerat augue in pharetra. Cras interdum lorem est, eu egestas justo sollicitudin id. Aliquam at ornare tellus. Maecenas mattis tincidunt pellentesque.
Nunc nec scelerisque augue, non sodales est. Donec egestas velit neque, quis suscipit justo ultrices at. Suspendisse potenti. Maecenas nec condimentum ante. Sed posuere neque vel sollicitudin pulvinar. Sed et est vel magna accumsan tincidunt. Sed id mauris in massa maximus pharetra. Proin semper sem eget arcu ultricies, a laoreet sapien sollicitudin. Phasellus quis euismod ante. Phasellus at aliquet nisl. Cras at neque ultricies, tincidunt sapien et, sollicitudin est. Curabitur purus est, eleifend et dapibus id, ullamcorper ac urna. Fusce pulvinar, justo eu mollis vehicula, lectus tortor mattis risus, molestie sagittis metus elit id neque. In hac habitasse platea dictumst.
Overview
Role: Lead UX Designer (research, interaction design, visual design)
Project Length: 2 week (speculative Project)
Introducing the Problem & Devising a Solution
Introduction
Rocket & Custard is a premium online retailer of t-shirts offering a design and print service and a self-creation lab. My brief was to design an app for the self-creation lab where customers could let their imaginations run wild!
Problem Statement
Rocket & Custard need a stand-out, mobile-friendly platform that meets customer's needs in the 10 seconds that they say “that would look great on a T-shirt. The success of this can be measured by an increase in sales and revenue.
relation to
Solution
The T-shirt market is flooded. A need for an app with high usability factors with instant access and a confirmed transaction within five minutes. The ability to take a photo or use (built-in) free library images, edit the picture for size and shape, remove backgrounds, add text or other vector art and press to order on the spot. We will see success in the increase in web traffic, user account creation and revenue.
Strengths
Research
Primary Research - Market Competitive Analysis
Market Competitors
The T-shirt market is flooded with design your own T-Shirt services, many of which have a strap on native apps. However, many of these apps offer little customer satisfaction, limited options for design and print or are needlessly complicated. Two of the competitors with viable native apps have been analyzed below.
Strengths
Weaknesses
Opportiunities
Threats
Strong user rating across app stores. Intuitive interface and limited choice of controls.
Bold UI design and logo. Account page that stores designs. Offers and promos restricted to segmented page.
Limited options in templates and image library. Limited options in the text editing and no upload ability from the phone or cloud. Cheap-looking branding and UI design. Reviews suggested failures in print quality, slow delivery times, and wrong product matching.
Create appealing, hi-design UI that matches products on offer. Create a simplified interface. Offer a range of quality in garments with marketing to support.
Many apps exist that are in the market already and the price is unified. Better quality garments may out price the app from the market. UI design and a strong library of pre-designs have to be eye-catching
Plenty of choices in garment and design templates. Lots of pre-designed shirts ready to buy.
Very minimal printing range on the T-shirt offered and the only front. Design editor non-visual and input fields used instead for text application. User reviews suggested that poor quality fabric was used and incorrect advertising on fabrics on offer.
Improve design interface with better controls and more visually appealing controls. Improve the logo and general market presence. Reduce the amount on offer as customers get bored.
Many apps exist that are in the market already and cost price is unified. Better designed sites with stronger branding will overshadow them. Limited global access in a global world.
Strengths
Weaknesses
Opportiunities
Threats
Origin: Hong Kong, China
Date: 19.07.2019
Reviews 32,000+
Downloads 1,000,000+
Size: 51M
Rating: PEGI3
Origin: US, Unknown
Date: 31.12.2019
Reviews 902
Downloads 100,000+
Size: 16M
Rating: PEGI3
Market Research Findings
My findings were that although the market is flooded with T-Shirt creator apps there is always room for another that specializes in a certain area. No app on the market fulfilled every user's needs or expectation and many had major failings. A requirement exists within the market for brand associated apps. Therefore Rocket & Custard would benefit from an app that offers a mobile-first design and usability that their particular customers could benefit from.
-
A simple, user-friendly, and intuitive interface is best; with set choices to mitigate against time-wasting. Note: Previous user research from Rocket & Custard can be used in regards to product choices on offer, Tee colour, fonts, templates.
-
A strongly branded app with clear functionality and visual appeal.
-
The ability to have shared designs within the brand's user community.
-
An account library provision to save and share your designs. Future-scope here to make individual user stores so that users can sell online.
-
The use of quality fabrics that are ecofriendly and have a limited carbon footprint.
Secondary Research - User Interviews
To better understand the perspective of the target user, I interviewed 4 people who use regularly and have used a T-Shirt creator app. I wanted to learn about their preferences, motivations, and frustrations as they relay their experiences of creating and receiving a self-designed T-Shirt.
Participants
4
Schedule
June 2019
Interview Length
30 - 45 mins
Equipment
Moderated Via Desktop
I Do
I Feel
I Think
I always price compare before buying online.
I usually have a monthly spending limit for shopping.
I always use a different bank account for online purchases.
I always check all colors of the substrate when I make a design.
I create numerous versions of my design with different typefaces.
I don’t buy clothes online as I can’t feel the material or try on.
Research Goals
-
Define people's common feature requirements when designing a T-Shirt
-
Determine what makes a self-design interface experience satisfying.
-
Determine users’ biggest frustrations when using a self-design interface.
-
Define the base-requirements for a self-design interface.
-
Understand user needs when designing a T-Sghirt and identify areas for improvement.
I feel frustrated with bad user controls in an app.
I get annoyed when design apps crash and I lose my work.
I don’t like too much choice in an app, i.e. products on offer.
I don’t like pop-ups in my apps that are constantly selling things getting in the way of my key tasks.
I like it when I get a preview of my designs on a real figure/person.
I think that the most important thing in a T-shirt designer is to have the freedom to design on the full canvas.
I think that templates are a waste of time when designing custom T-shirts.
I think that lots of fonts are crucial in a T-shirt design app.
I think that the choice of quality T-shirt garments is required.
I think that immediate delivery is crucial to online stores, but with eco packaging.
Conclusions from Interviews
-
Users like to have a clear, varied yet limited set of options when using a designer.
-
Substrate/T-Shirt quality is very important to the user.
-
Functionality is key. An unfriendly app turns the user off and ultimately they will terminate the session and delete the app.
-
Customers require an accurate preview of what the final print will look like. A poor print will be unsatisfactory to the user.
-
Payment needs to be secure when using an online purchase app.
Tertiary Research I - Provisional Personas
I created the provisional personas that reflected the data I had collected through user research. Getting a sense of the general target audience helped me think about how the app could appeal to different demographics with varying needs.
The Professional Photographer
Goals:
-
To distribute my stock photography
-
To Improve my SEO
-
To make valuable design connections
-
To find a producer that can print quality items with my work on.
Frustrations:
-
Endless SEO inputting
-
Trolling of my name
-
Copyright Violation from designers who use my work without permission.
The Urban Millenial
Goals:
-
To create one-off designs to wear
-
To have a quick design tool that I can use to create experiential T-shirt designs
-
To show-off my design skill
Frustrations:
-
Apps that don't work properly
-
Apps that have limited design functionality or scope
-
Not being able to share my work from my mobile
-
Too much in-app advertising
The Social Online Shopper
Goals:
-
To make quality gifts for my friends or social occasion Tees
-
To have a bespoke option equivalent or cheaper in price to high street stores
-
To create something useful on the commute home instead of playing Candy Crush!
Frustrations:
-
Excessive advertising linked to my browsing history
-
Researching the settings of all apps to make sure they're not stealing data.
The Young Designer
Goals:
-
Another playful design tool
-
Learning new interface designs and styles from the market.
-
To have something to share with friends and my kids.
-
Ability to produce bespoke Tees for my kids with my designs
Frustrations:
-
Cheap product upon arrival
-
Expensive printing costs
-
Slow delivery times
-
Bad interface design
User
Stories
"I love finding new ways to express myself. T-shirts are a quick and simple way to get a message across to a larger audience. I love using online t-shirt makers but always try to find the best deal possible".
"I’m a young millennial and want a free, non-hassle app that’s quick and easy to use where I can take pictures of moments, or just random things I see, edit in-app and have a t-shirt printed".
“I’m a Rocket & Custard member with a lot of friends, I want to be able to take pictures on the spot and put on a t-shirt. I then want to be able to print or share my designs with my friends so we can print and wear".
“I’m a young designer working on a budget, I want a platform where I can upload my designs and then have a T-shirt printed for a relatively cheap price”.
Tertiary Research II - User Persona
“I love taking photos and designing, I wish I could print them on a T-shirt to wear and show off”.
Name:
Gender:
Location:
Age:
Education:
Race:
Relationship Status:
Work:
Estelle
Female
Europe
18 - 25
School/College
Mixed Race
Single
Part-Time Hospitality Service
Needs:
Estelle loves cool, original T-shirts. She wants an app where she can design her own from pictures that she takes off from her phone.
Goals:
Estelle wants to be able to save her designs in case she wants to print more in the future.
She wants an app that is usable, without pop-ups or endless choices that make it slow to load/use. Estelle Wants the T-shirts delivered to her directly.
Leisure Activities:
Estelle likes skating and riding, hanging with her friends at clubs and bars. She is a keen follower of fashion and likes shopping
Online Device Usage
35%
80%
Quotes:
“The high street is all the same and I can’t find what I want. I’d rather make my own or buy second-hand”.
“I love taking photos and designing, I wish I could print them on a T-shirt to wear and show off”.
Frustrations:
-
Design apps that have too many parameters that stop free design.
-
Limited free space to archive designs, apps prompt you to buy extra space for saving to a library or designs that are deleted after a certain time.
-
In-app purchasing when trying to achieve a goal
Motivations:
-
Being able to share design work
-
In-app community blogs/forums
-
Promotions and special offers for loyal customers/reward schemes
-
Free stock imagery to use.
-
Social feedback and news alerts
Define & Ideate
Business Goals V's User Goals
How We Might Table
I created the provisional personas that reflected the data I had collected through user research. Getting a sense of the general target audience helped me think about how the app could appeal to different demographics with varying needs.
User Journeys
I completed a task flow and user flow to imagine the ways my persona might navigate through the app to ensure that the information was organized in a way that is intuitive to the user.
User Journeys Tasks
Task1: Login to the app, choose the camera, and confirm a picture to edit.
Task 2: Using the Design Editor adjust the picture to requirements and save to Design Library as open source.
Task 3: Choose qty, size, and type of garment, choose a payment method and buy your T-Shirt
End-to-End User Flows & Task Analysis
I created an end-to-end User to imagine the ways a user might navigate through the app interface. I also created individual task flows to ensure that the information was organized in a way that is intuitive to the user.
Task Flow 1: Take a picture on your camera and take to editor Task Flow 2: Choose a library image and take to editor
Task Flow 3: Use Editor, save your design and then Share Task Flow 2: Confirm Tee colour, Size and Qnty and then purchase
Sitemap
Wireframes - Lo-Fi
I began the process of wireframing with rapid prototyping sketches of several of the main screens. During this process, several features kept reoccurring, which, I took forward into a set of finished lo-fi wireframes. I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. These sketches then took me forward to the mid-fi wireframes.
Wireframes - Mid-Fi
I used Adobe XD to create these mid-fi wireframes. I concentrated on simplicity and space but still tried to make it as child-friendly as possible as I have identified my key demographic as the youth market between 12 and 25 years old.
Wireframes - Hi-Fi
I continued with the wireframing taking it to another level of design clarity. In this version of the prototype, I have added further visual information working on my icons and completing the navigation system.
Prototype UI Design Finals
