Project Introduction

Vintage Lifestyle places emphasis on usability by providing an interface that is intuitive to navigate for the user.

The Project Brief required Competitor Analysis for two competitor apps to determine app design and functionality. It also required three key functionalities: create a profile, upload items to sell, and leave reviews for other sellers.

Objective and Context

The target audience is primarily 25 to 34 year olds who want to buy and sell vintage clothing online.

With this is mind, Vintage Lifestyle provides an interface for users to quickly navigate to what they are looking for, whether the Shop to buy or Upload feature to sell.

All through a minimal Home screen, and key functions in the bottom navigation bar, where it is easily accessible to a user on mobile device.

Project Brief Design Requirements

● Appropriate use of mobile design patterns
● Content aligned with a well-defined grid system
● Appropriate and consistent spacing of elements
● Clear, effective visual hierarchy
● Consistent use of known UI elements
● Icons clearly communicate the actions they represent and have a consistent style
● Clearly defined typographic hierarchy
● Appropriate color palette used in the UI
● All placeholder copy replaced with real copy

Key functionalities:

● Create a profile
● Upload items to sell
● Leave reviews for other sellers

MVP: Jobs to be done and features

When I want to shop for an item, I want to see and read Seller Reviews to know if I can trust the seller with my purchase. Features: seller reviews, leave seller review

When I want to sell an item, I want to be able to quickly find the Upload feature. Feature: upload

When I shop, I want the app to remember my information for a faster shopping experience. Feature: sign up, log in

Competitor AnalysisThe Project Brief required research for two competitor apps to determine app design and functionality.I decided to perform Competitor Analysis on three eCommerce apps that are commonly used by users: one resale eCommerce app, and two eCommerce apps that were not resale. I wanted to discover possible user frustrations, and design patterns that I could implement for design consistency. Depop: The Depop app features a design layout that doesn’t utilize white space, which could be overwhelming for a user. The Home screen is frustrating to navigate, and not intuitive for the user to navigate to what they are shopping for. For example, if a user is looking for Women’s Shorts, they need to do a lot of scrolling to find this category. Instead the Home screen features a “Fresh from today,” but it is not tailored to the user’s preferences or sizes: another potential for user frustration. For future iterations, I would conduct research on my Hypothesis that user’s might like a feed they could scroll to shop items tailored to their brand preferences and size; this could also feature sellers they follow or purchased from. To use the app, a user must Log In or Sign Up.Urban Outfitters: Urban Outfitters features Main Categories on the Home screen which direct users to a Subcategories screen, so users can quickly find what they are looking for: a more intuitive design than Depop’s Home screen. The app also used icons of consistent design in a bottom navigation bar to further direct users; the icons are labeled to further aid in usability. The use of white space, and longer rather than square images, creates a less overwhelming experience for the user, compared to Depop.Zara: Similar to Urban Outfitters, Zara features a few Main Categories on the Home screen, and a minimal, intuitive bottom navigation bar: both of these features help guide a user to what they are looking for without overwhelming them with decisions. To further increase usability, Zara labels the “Menu” in the bottom navigation bar instead of using a hamburger icon. Zara also features well used white space to help navigate the user through their shopping experience, and a more interesting minimal design layout than an overwhelming square grid.

Competitor Analysis

The Project Brief required research for two competitor apps to determine app design and functionality.

I decided to perform Competitor Analysis on three eCommerce apps that are commonly used by users: one resale eCommerce app, and two eCommerce apps that were not resale. I wanted to discover possible user frustrations, and design patterns that I could implement for design consistency.

Depop: The Depop app features a design layout that doesn’t utilize white space, which could be overwhelming for a user. The Home screen is frustrating to navigate, and not intuitive for the user to navigate to what they are shopping for. For example, if a user is looking for Women’s Shorts, they need to do a lot of scrolling to find this category. Instead the Home screen features a “Fresh from today,” but it is not tailored to the user’s preferences or sizes: another potential for user frustration. For future iterations, I would conduct research on my Hypothesis that user’s might like a feed they could scroll to shop items tailored to their brand preferences and size; this could also feature sellers they follow or purchased from. To use the app, a user must Log In or Sign Up.

Urban Outfitters: Urban Outfitters features Main Categories on the Home screen which direct users to a Subcategories screen, so users can quickly find what they are looking for: a more intuitive design than Depop’s Home screen. The app also used icons of consistent design in a bottom navigation bar to further direct users; the icons are labeled to further aid in usability. The use of white space, and longer rather than square images, creates a less overwhelming experience for the user, compared to Depop.

Zara: Similar to Urban Outfitters, Zara features a few Main Categories on the Home screen, and a minimal, intuitive bottom navigation bar: both of these features help guide a user to what they are looking for without overwhelming them with decisions. To further increase usability, Zara labels the “Menu” in the bottom navigation bar instead of using a hamburger icon. Zara also features well used white space to help navigate the user through their shopping experience, and a more interesting minimal design layout than an overwhelming square grid.

Mid Fidelity WireframesThe Project Brief required a key function to “create a profile,” and required Competitor Analysis to determine app functionality. During Competitor Analysis, Depop requires anyone who uses the app to Log In or Sign Up to use the app, while Urban Outfitters and Zara let users Shop, but not access some other key functionalities until a user Logs In. I incorporated this data into my design by allowing users to Log In or Sign Up to create a profile to use the app: this allows users to access all the app’s key functionalities listed in the Project Brief to Upload items to sell” and “leave a seller review.”With user usability in mind, I designed for the user to quickly and intuitively navigate to find what they want in the Shop, or to Upload to resale clothing. The Home screen features two main categories Women and Men, which leads to a Subcategories screen. The Home screen also features a bottom navigation bar for all key app features: it’s important that key app features are at the bottom because according to Material Design, a “bottom navigation bar is easy to reach on a handheld mobile device.” The icons in the navigation bar are labeled for usability, as stated by Nielsen Norman Group, and displayed in Competitor Analysis. This also fulfills the Project Brief’s requirement that the “icons clearly communicate the action they represent.”

Mid Fidelity Wireframes

The Project Brief required a key function to “create a profile,” and required Competitor Analysis to determine app functionality. During Competitor Analysis, Depop requires anyone who uses the app to Log In or Sign Up to use the app, while Urban Outfitters and Zara let users Shop, but not access some other key functionalities until a user Logs In. I incorporated this data into my design by allowing users to Log In or Sign Up to create a profile to use the app: this allows users to access all the app’s key functionalities listed in the Project Brief to Upload items to sell” and “leave a seller review.”

With user usability in mind, I designed for the user to quickly and intuitively navigate to find what they want in the Shop, or to Upload to resale clothing.

The Home screen features two main categories Women and Men, which leads to a Subcategories screen.

The Home screen also features a bottom navigation bar for all key app features: it’s important that key app features are at the bottom because according to Material Design, a “bottom navigation bar is easy to reach on a handheld mobile device.” The icons in the navigation bar are labeled for usability, as stated by Nielsen Norman Group, and displayed in Competitor Analysis. This also fulfills the Project Brief’s requirement that the “icons clearly communicate the action they represent.”

High Fidelity WireframesThe high fidelity wireframes feature a vintage green to fulfill the Project Brief’s requirement for “an appropriate color palette used in the UI.” The final design satisfies all requirements including clear visual hierarchy and typographic hierarchy.

High Fidelity Wireframes

The high fidelity wireframes feature a vintage green to fulfill the Project Brief’s requirement for “an appropriate color palette used in the UI.” The final design satisfies all requirements including clear visual hierarchy and typographic hierarchy.

Click Here for InVision High Fidelity Mobile Prototype

Retrospective

What Went Well: The final project effectively delivers on all the Design Requirements in the Project Brief. Through competitor research, I was able to design an interface that is very intuitive for the user to navigate. During this project I was able to better understand how to streamline my personal design process.

What Can Be Improved: I changed directions a few times with the color palette and design layout during the project. I was challenged to find a design solution I was happy with for the user, so next time while I’m conducting Competitor Analysis, I want to also take time to gather inspiration. From now on, I’ll also be saving daily inspiration for my designs to boards to later pull from when I’m about to start a project, or I’m facing a design challenge.

For future iterations, I would include more features for a user to buy again from a favorite seller: Order History, View Seller’s Shop, Follow Seller, and a feed to Browse Sellers You Follow.