UXUI DESIGN

Product Page

Product page design is of great importance for an
e-commerce company. A product page is a page on a company website that completely defines a product and showcases the product inventory a customer is able to buy.

01 User Experience Mapping

Mapping out flows for the user experience of the primary users. The webpage to be easy to use on the go, while shopping it requires an easy interface, streamlined onboarding and access to the main feature. The research part provided me with enough info to determine which features will bring low and high value to the user.

02 Wireframing

Next step, iteratively wireframing to determine the UI and UX of the application. This step also helped us work out the information architecture of each screen.

Discount bar

Navigation bar

Hero images & catalog

Customer reviews

Product specs

Advantages section

Upsell banner

Selling point 1

Material of product

Selling point 2

Selling point 3 & 4

Certified of product

Reviews

Upsell again at the end

Sbscribe & get the offer

Footer

03 UI Kit

UI kit that reflects brand adjectives. UI components are elements that convey meaning and provide functionality to users.

Icon

Country

Breathable

Delivery

Back Support

100 Night Trial

Mattress

Button

Primary

Secondary

Outline

With icon

Colour Palette

Primary

Secondary

Typography

Header 01

Filson Pro | Medium
Font size: 45px 
Line height: 140%

Overline 01

Nimbus Sans | Regular
Font size: 18px
Line height: 140%

Body 01

Nimbus Sans | Regular
Font size: 20px
 Line height: 140%

Header 02

Filson Pro | Medium
Font size: 30px 
Line height: 140%

04 Desktop & mobile

Live Product Page

Helps customers decide what they want to buy according to different specifications like price, features, reviews, and product comparison. It gives users insight into what the product offers and how it will benefit them once they purchase it.