Vintage Finds
Want to buy or sell vintage clothing and accessories? UI design for a mobile application solution to streamline the buying and selling process.
About this project
Responsibilities
-
Wireframes
-
UI Design
-
Icon Design
-
Research
Background
My approach for this project was to analyze UI design patterns in competitor's apps and with that information to develop a vintage clothing sales app for 25 - 34 year old consumers.
Research
I analyzed similar apps to determine their key UI design patterns and to determine how these should be incorporated. Analyzing how similar apps utilized their UI design patterns also allowed me to establish which additional functionalities should be included in the app design.
UI Design Patterns
-
Data Management: each app had a user profile section for managing data such as tracking items, viewing past orders, and creating a wishlist or favorites section.
The user profile provides multiple options for managing data, such as an area to track items, orders, wishlist, and favorites.
Vestiaire Collective
-
Gathering Input: each app has sections for gathering data including predictive fill fields for user addresses, standard forms to type in, and areas to select information such as clothing sizes from preset options.
This interface provides multiple styles of gathering input UI design patterns:
​
The first is a field that predicts your address as you type it.
​
The second is a standard form to type in your information.
​
The third is a place to indicate your sizes via selecting from a series of preset options.
Vestiaire Collective
-
Navigation: location of of key components such as navigation bars, search icons, back arrows, and shopping bag icons.
The main navigation bar sits at the bottom of the page on most screens. A search icon also sits at the top right.
​
Within a category screen (e.g. “Polo Shirts”), the navigation bar disappears and the options are a back arrow, search icon, or shopping bag icon.
-
Miscellaneous: accordion menus were the most common miscellaneous design pattern across apps.
Within each product page, the interface provides an expandable menu. This allows the user to expand or collapse whichever sections they desire while viewing a product.
True Vintage
True Vintage
Functionality
Through this analysis, I identified key functionalities to include:
-
Sign in / Sign up
-
​The first step is to sign up or sign in to the app, so the user will be required to input information. Each of these screens displays UI patterns for signing in/signing up.
-
1
2
3
4
-
Create a profile
-
​Users will have a basic set of information that is required to be input in their profiles, while also having various options to add details. These screens display some options for gathering input for a user profile and displaying it for other users.
-
1
2
3
-
Upload items to sell
-
Users will need to fill in detailed information and add images for each item. These are examples of how different existing apps solve the problem of inputting, organizing, and sharing information for selling items.
-
1
2
-
Leave reviews for other sellers
-
Users must be able to find where to leave reviews and how to input their reviews. Below are some existing options for leaving reviews. In the clothing apps I analyzed, these were “comments” rather than “reviews”.
-
1
2
-
Like items
-
Users can interact with products by liking them, which helps them identify specific items they’re interested in. This also allows users to share what they like with other users. These examples show different ways some apps facilitate liking items.
-
1
2
3
-
Navigate to items
-
Users need to be able to easily navigate to important areas, such as to items to buy and to the items they have listed to sell. These apps show a variety of ways to organize navigation bars, display categories on home screens, and how to display categories in expanded navigation menus.
-
1
2
3
Designing
Low-Fidelity Wireframes
Based on the results of my research, I developed low-fidelity wireframes incorporating identified UI design patterns and key functions .
Visual Inspiration
To develop a moodboard, I considered the purpose of the app as well as the target audience.
Mid-Fidelity Wireframes
Before applying elements from my moodboard, I developed mid-fidelity screens. Designing monochrome screens with blocked in elements allows usability to be the focus, and helps with establishing a strong hierarchy.
Style Guidelines
Decision Process
In order to meet the brief objective, I took into consideration the target audience (25 – 34 year-olds who want to buy and sell vintage clothing online), along with the described functionalities and research requirements.
Colors
For the color palette, my inspiration was bright, lower saturation colors from vintage photographs. This resulted in blacks and greys that lean towards brown, along with a warm off-white.
The accent colors are bright and slightly desaturated. I chose tertiary colors for the accents, with blue-green and warm yellow, to help the palette feel more aged while still feeling fun.
Typography
Poppins is a slightly rounded sans-serif typeface. This makes it feel youthful while still being easy to read.
I made the choice to keep text in lowercase across the app in order to mirror current texting conventions. My hope with this choice was to make the app feel friendly, familiar, and fun.
For the display font (e.g the app name), I chose a serif font that is reminiscent of stereotypical 1970s and 1980s typography.
Finalizing
High-Fidelity Wireframes
I put together the results of my research, developed moodboard and resulting style sheet, and layout from my mid-fidelity wireframes to create my high-fidelity wireframes.
Where to go from here
Next steps for the app
-
Create a prototype to test with users
-
Make appropriate adjustments based on pain points identified via testing