P

P

P

P

ProdiMart

ProdiMart

ProdiMart

ProdiMart

Design Brief: Design a modern e-commerce app tailored for young digital natives seeking a seamless shopping experience that balances functionality, personality, and convenience — including an integrated digital wallet for in-app transactions.

Design Brief: Design a modern e-commerce app tailored for young digital natives seeking a seamless shopping experience that balances functionality, personality, and convenience including an integrated digital wallet for in-app transactions.

Design Brief: Design a modern e-commerce app tailored for young digital natives seeking a seamless shopping experience that balances functionality, personality, and convenience including an integrated digital wallet for in-app transactions

Project Type : Personal Project

Project Type : Personal Project

Timeline: 2 weeks

Timeline: 2 weeks

Platform: Mobile (iOS & Android)

Platform: Mobile (iOS & Android)

Role: UI/UX Designer

Role: UI/UX Designer

Software Used: Figma

Software Used: Figma

Project Type: Personal

Software Used: Figma

Role: UI/UX Designer

Platform: Mobile (iOS & Android)

Timeline: 2 weeks

Design Brief: Design a modern e-commerce app tailored for young digital natives seeking a seamless shopping experience that balances functionality, personality, and convenience including an integrated digital wallet for in-app transactions

Timeline: 2 weeks

Role: UI/UX Designer

Software Used: Figma

Platform: Mobile

Project Type: Personal

The Solution

The Solution

The Solution

The Solution

Based on the brief, I designed ProdiMart with a minimalist, mobile-first approach focused on simplicity and ease of navigation. The homepage showcases curated product displays and quick access to the ProdiWallet, enabling users to store funds, track transactions, and speed up checkout.

Key design choices included a white background for clarity, a Catalina blue nav bar for contrast, and blue green CTAs to guide action subtly but effectively. Micro-interactions and smooth transitions enhance usability, making the experience intuitive and conversion-friendly

Based on the brief, I designed ProdiMart with a minimalist, mobile-first approach focused on simplicity and ease of navigation. The homepage showcases curated product displays and quick access to the ProdiWallet, enabling users to store funds, track transactions, and speed up checkout.

Key design choices included a white background for clarity, a Catalina blue nav bar for contrast, and blue green CTAs to guide action subtly but effectively. Micro-interactions and smooth transitions enhance usability, making the experience intuitive and conversion-friendly

Based on the brief, I designed ProdiMart with a minimalist, mobile-first approach focused on simplicity and ease of navigation. The homepage showcases curated product displays and quick access to the ProdiWallet, enabling users to store funds, track transactions, and speed up checkout.

Key design choices included a white background for clarity, a Catalina blue nav bar for contrast, and blue green CTAs to guide action subtly but effectively. Micro-interactions and smooth transitions enhance usability, making the experience intuitive and conversion-friendly

Based on the brief, I designed ProdiMart with a minimalist, mobile-first approach focused on simplicity and ease of navigation. The homepage showcases curated product displays and quick access to the ProdiWallet, enabling users to store funds, track transactions, and speed up checkout.

Key design choices included a white background for clarity, a Catalina blue nav bar for contrast, and blue green CTAs to guide action subtly but effectively. Micro-interactions and smooth transitions enhance usability, making the experience intuitive and conversion-friendly

My Process

My Process

My Process

My Process

Let me walk you through the process of designing this while adhering to the design brief and also the brand styling

Let me walk you through the process of designing this while adhering to the design brief and also the brand styling

Let me walk you through the process of designing this while adhering to the design brief and also the brand styling

Let me walk you through the process of designing this while adhering to the design brief and also the brand styling

Empathize

Empathize

Empathize

I interviewed 5 peers who shop online regularly. Their main pain points:

  1. Too many clicks just to check out.

  2. Wish I could keep some money in-app without linking my card every time.

  3. Most apps feel bulky.

I interviewed 5 peers who shop online regularly. Their main pain points:

  1. Too many clicks just to check out.

  2. Wish I could keep some money in-app without linking my card every time.

  3. Most apps feel bulky.

I interviewed 5 peers who shop online regularly. Their main pain points:

  1. Too many clicks just to check out.

  2. Wish I could keep some money in-app without linking my card every time.

  3. Most apps feel bulky.

I interviewed 5 peers who shop online regularly. Their main pain points:

  1. Too many clicks just to check out.

  2. Wish I could keep some money in-app without linking my card every time.

  3. Most apps feel bulky.

Define

Define

Define

Key insights I was able to compile:

  1. Speed and ease are non-negotiable.

  2. Users want minimalist UI but not at the cost of performance.

  3. Payment anxiety is real: people want clarity and control over spending.

Key insights I was able to compile:

  1. Speed and ease are non-negotiable.

  2. Users want minimalist UI but not at the cost of performance.

  3. Payment anxiety is real: people want clarity and control over spending.

Key insights I was able to compile:

  1. Speed and ease are non-negotiable.

  2. Users want minimalist UI but not at the cost of performance.

  3. Payment anxiety is real: people want clarity and control over spending.

Key insights I was able to compile:

  1. Speed and ease are non-negotiable.

  2. Users want minimalist UI but not at the cost of performance.

  3. Payment anxiety is real: people want clarity and control over spending.

Ideate

Ideate

Ideate

  1. I made some sketches and wireframes explored:

  2. A home screen focused on curation, not chaos

  3. Product pages with edge-to-edge images and smart filters

  4. A wallet feature for purchases and accountability

  1. I made some sketches and wireframes explored:

  2. A home screen focused on curation, not chaos

  3. Product pages with edge-to-edge images and smart filters

  4. A wallet feature for purchases and accountability

  1. I made some sketches and wireframes explored:

  2. A home screen focused on curation, not chaos

  3. Product pages with edge-to-edge images and smart filters

  4. A wallet feature for purchases and accountability

  1. I made some sketches and wireframes explored:

  2. A home screen focused on curation, not chaos

  3. Product pages with edge-to-edge images and smart filters

  4. A wallet feature for purchases and accountability

UI Brand Style

Aa

Aa

Typography: Inter, Iceland

Typography: Inter, Iceland

Inter Bold

Inter Bold

Iceland Bold

Iceland Bold

Inter SemiBold

Inter SemiBold

Inter Medium

Inter Medium

Inter Regular

Inter Regular

FFFFFF

FFFFFF

0096C7

0096C7

023E8A

023E8A

UI Brand Style

Aa

Aa

Typography: Inter, Iceland

Inter Bold

Iceland Bold

Inter SemiBold

Inter Medium

Inter Regular

FFFFFF

0096C7

023E8A

UI Brand Style

Aa

Aa

Typography: Inter, Iceland

Inter Bold

Iceland Bold

Inter SemiBold

Inter Medium

Inter Regular

FFFFFF

0096C7

023E8A

The Design

The Design

The Design

The Design

Evaluation & User Testing

Evaluation & User Testing

Evaluation & User Testing

Evaluation & User Testing

To ensure the usability and flow of ProdiMart fits the users needs, I conducted informal user testing with 7 users (18 - 25 years) who frequently shop online. I provided them with access to the app screens and a brief video walkthrough.


What I tested:

  1. Navigation flow from homepage to product checkout

  2. Clarity and visibility of the ProdiWallet feature

  3. Perceived ease of use and interface appeal


Key feedback highlights:

  1. Users found the interface clean, not overwhelming, and visually appealing

  2. The ProdiWallet feature was praised for reducing checkout friction

  3. One tester suggested that adding a product search bar upfront would improve usability

  4. Another noted that the CTA buttons could benefit from slightly more spacing on smaller screens

  5. Some confusion arose around icons in the navigation bar, which were updated for clarity.

To ensure the usability and flow of ProdiMart fits the users needs, I conducted informal user testing with 7 users (18 - 25 years) who frequently shop online. I provided them with access to the app screens and a brief video walkthrough.


What I tested:

  1. Navigation flow from homepage to product checkout

  2. Clarity and visibility of the ProdiWallet feature

  3. Perceived ease of use and interface appeal


Key feedback highlights:

  1. Users found the interface clean, not overwhelming, and visually appealing

  2. The ProdiWallet feature was praised for reducing checkout friction

  3. One tester suggested that adding a product search bar upfront would improve usability

  4. Another noted that the CTA buttons could benefit from slightly more spacing on smaller screens

  5. Some confusion arose around icons in the navigation bar, which were updated for clarity.

To ensure the usability and flow of ProdiMart fits the users needs, I conducted informal user testing with 7 users (18 - 25 years) who frequently shop online. I provided them with access to the app screens and a brief video walkthrough.


What I tested:

  1. Navigation flow from homepage to product checkout

  2. Clarity and visibility of the ProdiWallet feature

  3. Perceived ease of use and interface appeal


Key feedback highlights:

  1. Users found the interface clean, not overwhelming, and visually appealing

  2. The ProdiWallet feature was praised for reducing checkout friction

  3. One tester suggested that adding a product search bar upfront would improve usability

  4. Another noted that the CTA buttons could benefit from slightly more spacing on smaller screens

  5. Some confusion arose around icons in the navigation bar, which were updated for clarity.

To ensure the usability and flow of ProdiMart fits the users needs, I conducted informal user testing with 7 users (18 - 25 years) who frequently shop online. I provided them with access to the app screens and a brief video walkthrough.


What I tested:

  1. Navigation flow from homepage to product checkout

  2. Clarity and visibility of the ProdiWallet feature

  3. Perceived ease of use and interface appeal


Key feedback highlights:

  1. Users found the interface clean, not overwhelming, and visually appealing

  2. The ProdiWallet feature was praised for reducing checkout friction

  3. One tester suggested that adding a product search bar upfront would improve usability

  4. Another noted that the CTA buttons could benefit from slightly more spacing on smaller screens

  5. Some confusion arose around icons in the navigation bar, which were updated for clarity.

What I Learned

What I Learned

What I Learned

What I Learned

This project though fictional helped sharpen my ability to balance visual design with functional UX thinking. I learned that:

  1. Users appreciate a simple layout when shopping. Too many features = instant overwhelm

  2. A digital wallet can add .real perceived value, but it needs to be prominent and intuitive.

  3. Testing early on reveals valuable insights that shape final decisions


Above all, ProdiMart taught me to design for intentional simplicity: every screen, interaction, and element should work toward making the user’s experience smoother

This project though fictional helped sharpen my ability to balance visual design with functional UX thinking. I learned that:

  1. Users appreciate a simple layout when shopping. Too many features = instant overwhelm

  2. A digital wallet can add .real perceived value, but it needs to be prominent and intuitive.

  3. Testing early on reveals valuable insights that shape final decisions


Above all, ProdiMart taught me to design for intentional simplicity: every screen, interaction, and element should work toward making the user’s experience smoother

This project though fictional helped sharpen my ability to balance visual design with functional UX thinking. I learned that:

  1. Users appreciate a simple layout when shopping. Too many features = instant overwhelm

  2. A digital wallet can add .real perceived value, but it needs to be prominent and intuitive.

  3. Testing early on reveals valuable insights that shape final decisions


Above all, ProdiMart taught me to design for intentional simplicity: every screen, interaction, and element should work toward making the user’s experience smoother

This project though fictional helped sharpen my ability to balance visual design with functional UX thinking. I learned that:

  1. Users appreciate a simple layout when shopping. Too many features = instant overwhelm

  2. A digital wallet can add .real perceived value, but it needs to be prominent and intuitive.

  3. Testing early on reveals valuable insights that shape final decisions


Above all, ProdiMart taught me to design for intentional simplicity: every screen, interaction, and element should work toward making the user’s experience smoother

Okoli John.

Back To Home

Okoli John.

Back To Home

Okoli John.

Back To Home

Okoli John.

Back To Home