Chic Threads title

Objective

To design the UI for the mobile version of a vintage clothing sales applicaiton and prepare for handover to developers.

Role

UI Designer

Tools

adobe icon figma icon

Competitor Research

I researched multiple mobile clothing store apps to understand their features, the design principles utilized, & usability heuristics

Depop

Recognition Rather than Recall: The categories for each article of clothing in ths app has the hart icon for likeing each clothing item you want to be saved in your profile so you can look back on it at a later time.

Emphasis: In the Depop app there is an exmphasis placed on the photos when you are scrolling between them there is a changed in the slider dots from white to orange.

Similarity: My DNA home of the app, the first thing you see is several boxes with a rounded edge and the ability to swipe to the left and continue to see the same style based on size and shape.

Poshmark

Consistency & Standards: At the bottom of the menu bar the sell icon (camera in this case) is in the middle of the menu bar. I have noticed on both Poshmark and Depop applicaitons that this feature shows up.

Variety: In the shop category you have several different shapes such as circles, squares, Icons and diamonds to get your attention.

Low-Fidelity

Once I had a feel for competitors I started to sketch low-fidelity wireframes with pen & paper.

Low-Fidelity wireframe for Login Screen Low-Fidelity wireframe for Signup Low-Fidelity wireframe for Setup Profile Low-Fidelity wireframe for Setup Profile Low-Fidelity wireframe for Follower add Low-Fidelity wireframe for Home Screen Low-Fidelity wireframe for Profile Screen Low-Fidelity wireframe for Follower Shop Low-Fidelity wireframe for Shopping Bag Low-Fidelity wireframe for Checkout

Mid-Fideltiy

I then recreated my paper sketches in Adobe XD for my mid-fi wireframes

mid-fidelity-wirframes entry Mid-Fideltiy-wireframes login mid-fidelity-wirframes signup mid-fidelity-wirframes setupprofile mid-fidelity-wirframes setupprofilebrands mid-fidelity-wirframes setupprofilefollowersadd mid-fidelity-wirframes home mid-fidelity-wirframes notifications mid-fidelity-wirframes settingupshop mid-fidelity-wirframes profile mid-fidelity-wirframes hamburgermenu mid-fidelity-wirframes search bar mid-fidelity-wirframes followershop mid-fidelity-wirframes dropdownmenu mid-fidelity-wirframes checkout mid-fidelity-wirframes setting

Style Guide

The Chic Threads style guide is created to envoke the nostalgia feeling of previous eras gone by, while also looking professional.

Color Palette

Color Palette

Typography

Typography

Icons

Icons

High-Fidelity

high-Fidelity--wireframes-chic threads; login high-Fidelity--wireframes-chic threads; signup
high-Fidelity--wireframes-chic threads; setupprofile high-Fidelity--wireframes-chic threads; set up profile brands high-Fidelity--wireframes-chic threads; set up profile-followers add
high-Fidelity--wireframes-chic threads; home high-Fidelity--wireframes-chic threads; hamburger menu high-Fidelity--wireframes-chic threads; setting up shop
high-Fidelity--wireframes-chic threads; profile
high-Fidelity--wireframes-chic threads; followers shop high-Fidelity--wireframes-chic threads; drop down menu high-Fidelity--wireframes-chic threads; total checkout high-Fidelity--wireframes-chic threads; checkout
mockups