Personal Project 1

Mobile Apps (e-commerce)

e-commerce mobile application UI design needs to be visually appealling, easy to navigate, and provide users with all the necessary information about products and purchases. In this design, I tried to create a seamless and enjoyable shopping experiencfor users by following these guidelines.

Logo Design Concept

Home and Explore Page

When developing the UI design for the e-commerce mobile application, my goal was to balance aesthetics with functionality. The design needed to be visually attractive while maintaining user-friendliness, guiding users effortlessly through various product categories. Thus, my approach for the home and explore pages was to create a clean, straightforward layout that offered easy navigation, enabling users to browse and discover products with minimal effort.

Product Page

The product page is meticulously designed to include all pertinent information about the product, including specifics like size, color, material, and care instructions. To aid potential buyers in making informed choices, we've also incorporated customer reviews and ratings. Furthermore, we have ensured that the 'Add to Cart' button is prominently displayed to motivate users to proceed with a purchase. This allows users to conveniently add their desired items to their cart with ease, thereby simplifying the shopping experience.

Checkout Page

The checkout page is designed with user-friendliness and clarity in mind. I've purposefully steered clear of overcrowding the page with an excess of elements or information, keeping the design clean and comprehensible. Additionally, I've incorporated the functionality that allows users to modify their order before they finalize it, ensuring they have the flexibility to make necessary changes with ease. This ensures a seamless and positive checkout experience.

Stages

e-commerce mobile application UI design needs to be visually appealling, easy to navigate, and provide users with all the necessary information about products and purchases. In this design, I tried to create a seamless and enjoyable shopping experiencfor users by following these guidelines.

Typography

Poppins (Bold)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Poppins (Regular)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Aa

Colours

Grey Scale

#FFFFFF
White01

#FAFAFA
White02

#F8F8F8
White03

#EEEEEE
Grey01

#D9D9D9
Grey02

#CACACA
Grey03

#A6A6A6
Grey04

#5E5D5D
Grey05

#333333
Grey06

#000000
Black

Primary Colour

#11A4A2
Green01

#078985
Green02

#18A8A4
Green03

#2CB7B0
Green04

#9FD5DA
Green05

#ACDFE2
Green06

#BFE8E8
Green07

#DAEAEA
Green08

Secondary Colour

#C1174B2
Red01

#D82B65
Red01

#F2A7BE
Red01

#FFEEEF
Red01

#FEF3F5
Red01

#FEF9FA
Red01

Buttons

#C1174B

Iconography

#C1174B

Wireframes

Wireframes