Portfolio

Kicks Product App

User Interface

Figma

This was a project that involved creating the interface for a product app for the fictional shoe brand, Kicks. The mockups displayed include a homepage, products page, product description page, a deals page, and a profile page.

Home

The app opens to the homepage which consists of the company’s brand logo that I designed, and a “Shop Now” button that will take the user to the product page.

Home Screen

Products Screen

Products

Once the user proceeds past the homepage, the products page opens up. This is where users can peruse the selection of items for sale. Each item is tappable which allows them to open up the product description pages to learn more about the item.

Product Description

The screens below show an example of one of the product description pages. This is where users can get a better look at the product, more information about it, sizing and a button to add the item to your bag. The variants display how the screen changes when different options are selected and how it indicates that it has been added to your bag.

Product Description screen Variants

Deals

This is the page where users can go to browse and select any offers or coupons that are currently available to them and apply them to their purchases.

Deals screen

profile Screen

Profile

The profile page is where users can keep track of the points they accumulate from purchases, past orders and favourite items that they come across when when browsing the app.