top of page

VINTAGE MOOD

Objective:

Design a vintage clothing app with the following key functionalities -

  • Search for specific types of clothing

  • Save items you like when you come across them browsing & view them

  • Place items you wish to purchase in a shopping cart & view them

Brainstorming Design Patterns:

Search for items:

  • Navigation and Gathering Input – Users can search items on the app after placing in some important filters to help them find exactly what they’re looking for. I think having some sort of questionnaire before browsing the products might be an interesting thing to incorporate. When I think of questionnaires, I think of websites/apps like Stitch Fix. And after the questionnaire is completed, the items are sorted by the fields they inputted.

Save items and view them

  • Data Management – Users will be able to place items they like into a separate page on the app where saved items will be stored and later revisited. The saved items will be placed in galleries on this page. I was thinking about creating a page for “liked” items and feature it kind of like a mood board. I want to take inspiration from Pinterest in the way they use pinboards to categorize items, but I want to display the items in like a collage-style based on what type of mood board they are trying to create, for example, I can add a board to the like page called “shirts” and add all the shirts I like into that board. It gives the user a bit of freedom to organize their liked items how they choose.

​

 

Place items in cart and view them

  • Miscellaneous – users will be able to place items they wish to purchase into a separate page of the app to buy once they are done browsing. I really enjoy the way the True Vintage app keeps a clean and simple design for the shopping cart page, I think this process should be easy as possible, so I hope to design something similar.

Create a Mood Board:

Inspo board.png
1 (2).png
2 (2).png
3 (2).png
4 (2).png
5 (2).png
6 (2).png

48hr UI Design Challenge

Vintage Mood Style Guide:

5.png
Text Styles.png
7.png

Low-fidelity Wireframes:

8.png

Mid-fidelity Wireframes:

9.png

High-fidelity Wireframes:

10.png

Mock-ups:

11.png

Prototype:

Check out my prototype here!

https://xd.adobe.com/view/196d907d-1544-437d-b484-078012240338-4c3e/?fullscreen

7 (2).png
bottom of page