The Flow

The Mobile Prototype

Home Screen

A slideshow component card is used for the promotional content on the home screen to keep the user visually engaged. Illustrations, blobs, and thin curvy lines make the experience more fun and playful.

The navigation bar is the main UI feature users will use to navigate their way through the website.
‍

Search

Typing a word in the search box allows users to choose a suggested clothing option along with a Top Picks section with the most relevant options of what user searched.

After searching, the user gets to click show results and it’ll take them to their Results page. The Results page has an in-store pickup button, filter button, and sort button for the user to work with.

Filters, PDP & Item to Cart

Once the user has picked out their filters and sorts, they are taken to the Item Results page, and they scroll to look at products.

When they click on a product, they are taken to the Product Display Page. Once the user adds the product to bag, they are taken to the Item Saved page. This page includes a friendly message for adding something to bag, the product image and details, and two buttons: checkout and view bag.

The Desktop Prototype

Home Screen

All sections and flows are the same between mobile and desktop, with a few exceptions, such as the the featured categories having actual images for them. Desktop is meant to show responsive design and usability.

The menu options are at the top bar navigation.

Search

When clicking on the search button on the top bar navigation, a dropdown menu with a search box will pop up and turn the type, icon, and divider colors into a cream color, and the search icon black. The dropdown menu will get longer when the user types in the search box and search results pop up. The user clicks on “Show results for ___” to get to the Results page.

Filters, PDP, & Item to Cart

Like in Mobile, the Results page has a filter button and sort button for the user to work with. The Results page also has 2 display options: two products and four products. When clicking on an item it takes the user to the PDP.  Once the user picks out their size and color for product, a popup under the bag icon appears to notify the user that their product has been added to bag.

The Design System

Colors

Typography

Buttons & Icons

Grids

Takeaways

In order to have a successful UI redesign, you must be mindful of the different types of users that will use the product and make sure your design fits a wide range of people and their capabilities.

Credit

Design by:  Sophie Tatarchuk
Course: CT302
Professor: Christie Shin
Disclaimer - Please note: This classroom project was created for the course “CT302 Digital Product Design I.” This is purely for educational purposes and I do not claim any textual information and/or photos.