Rocker Billy's Clothing
Project
UX Design
Software
Adobe Xd
Adobe Illustrator
Adobe Photoshop
​
Timeframe
Five weeks
Overview
Rocker Billy's Clothing is an app that sells vintage clothing. This app is targeting anyone with a penchant for the past. This is a university set brief, in which I was already provided with a logo, colour scheme and purpose for the app.
Challenge
The challenge was to create an app with a unique feature. To achieve this, I was guided to include a diverse concept to improve the user experience. This concept will need to be applicable to the target audience of eighteen to twenty-five year olds improving their journey through the app.
By conducting user research, I'll be able to uncover the users possible pain points with online shopping. The results of this research will inspire ideas that will bring a new experience to the online world of vintage clothing within Rocker Billy's Clothing.
Solution
Your research should inform you on exactly what the experience does and the content within, based on what potential users would like to see and use.
​
Following the user research, one pain point that several users found, including myself, was the difficulty of searching for a specific garment. For example, not knowing the name of the brand of the garment. The solution to this problem is an Image Search feature, which enables the user to upload an image of a piece of clothing which directs them right to their desired garment, if available. This feature would allow for the user to shop more efficiently as it would optimise the user flow.
​
Wireframes, app layout (pages included), brand guidelines, symbols, action bar and user flow? detailed case study for inspo. wireframe of all pages then higher fidelity?
Information Architecture
To begin the app development process, I outlined the different features and pages included in the app to define the extent of the project. This was key for the design of wireframes, the next step in the app design process.
Wireframes
Multiple wireframes were created in low-fidelity to identify which layout was more adequate, for both the user experience and user interface. Past user pain points included the issue of a cluttered home screen. I kept this in mind for most pages and therefore the app adopted a timeless look by keeping the space between design elements to a minimum.
Update
Low fidelity of main pages
down to
medium fidelity
Design System
Typography
Colours
#C31125
Icons
Buttons
Result
​
How did i develop the Image Search
How does it work
​
Rocker Billy's Clothing is set to be a busy app with hundreds of items being listed by the minute. Due to the variety and quantity of the vintage clothing, the product catalogue is continuously updated. This was the inspiration for the UI to look timeless to keep up to date with these changes, hence the minimal feel to the app.
​
Vintage clothing sales is a fast growing industry with many competitors. I wanted to embed a feature that would minimise users past frustrations with current vintage clothing applications. The Image Search concept proved to be a useful feature, improving the overall user experience, made easier by its position in the search bar.
​
Using the 60 30 10 rule, I was able to implement the brand colour into the app
​
As red was the brand colour and was a key element to add to the application, the colour it compliment most with the UI was white. This kept the app looking timeless and enabled me to use red as a highlight colour to bring attention to the user. Such as, colouring the symbols red when clicked on the action bar to show the user which page they are on.​
​
I was driving towards a natural and timeless theme to the app, inspired by the ti
Sign in
The goal for this page was to gage trust between the user and the app and to make them feel comfortable as this is the first page the user is seeing before providing log-in details. I believe I reached this goal by keeping the page's UI simple and by including the brand guidelines .
​
​
Home
The home of Rocker Billy Clothing.
Image Search
The Image Search feature proved to be a useful feature that had to be simple for users to not only find but to use.
Image Search User Flow
Mannequin Feature
The goal for this page was to gage trust between the user and the app and to make them feel comfortable as this is the first page the user is seeing before providing log-in details. I believe I reached this goal by keeping the page's UI simple and by including the brand guidelines .
​
​
Mannequin Feature User Flow
