Copped retail app — a UX case study – UX Collective

Phase 3 — User Flows and Wireframes

Now that we have the core features that we want to build into our MVP, it’s time for the fun part. It’s time to design this thing.

For the sake of brevity, I’ll only walk through the flows and wireframes for the four core features.

1. Follow your favorite brands

Users are automatically prompted to select their favorite brands as a part of on-boarding and profile setup. Users can also adjust these preferences at any time from the profile screen. The main feed will reflect items from the brands users selected to follow, It will also suggest new or upcoming brands that are similar to those preferences.

Process flows and wireframes for “Following Brands” | Wireframes designed in Adobe XD, Flow created in Overflow

2. Upcoming Drops (Drop Navigator)

All upcoming drops appear as cards on the main feed. Each card highlights the subject item(s), telling the story behind it and includes information on how to cop (release date, who’s stocking it near the user), the CTA (call to action) will change based on how close the release date is. Options will include:

Notify Me: Sets a notification for the user to get an alert when the drop date is near.

I’m Copping: Adds item(s) to user’s shopping list.

Get in line: Put’s user in the digital queue for whichever local retailer they select.

Process flows and wireframes for “Upcoming Drops” | Wireframes designed in Adobe XD, Flow created in Overflow

Not all local boutiques offer online shopping, for a variety of reasons. Copped helps to add that layer by allowing users to order or reserve their product in the app, and pickup in-store. Due to the nature of these exclusive product drops, individual stores have their own set of rules for how they handle drops, using Copped, the user will know what the store’s preference is and use that info in their decision-making process.

Process flows and wireframes for a typical “In-app purchase” | Wireframes designed in Adobe XD, Flow created in Overflow

4. Smart Sizing

Copped by default would use an algorithm that compares the sizes you selected to the sizing guidelines provided by the brands and suggests the best size for you based on that information. Smart sizing through use of the body scan feature will help you get a more accurate fit.

Process flows and wireframes for a typical “Smart Size Scanner” | Wireframes designed in Adobe XD, Flow created in Overflow

The type of data that the smart sizing feature will require manually up-front is: Height, weight, fit preferences for tops and bottoms (More fitted — More Loose). This data will then be combined with the sizing data the user entered manually during profile creation to help calculate the best sizing for a particular type of clothing.