Berger Paints Ecommerce Mobile App

Abhi Chatterjee
5 min readApr 19, 2021

Task

Design a mobile product experience that enables homeowners or painters to purchase paint and ancillary products online. Design the end-to-end experience from the perspective of a person who is not very digital-friendly but is looking to purchase paint online for the convenience and loyalty benefits. Also, add unique elements in terms of what else can this product do to make the paint buying experience better?

My Role

  • Understanding
  • Research
  • User Persona
  • User Flow
  • Low Fidelity Wireframe ( Pencil & Paper )
  • High Fidelity Wireframe ( Adobe XD )
  • Prototype
  • Mood Board
  • Final Design
  • Usability & User Testing

Empathise-Know the user you’re designing for

Key Points

  • An ecommerce purchase paint app for homeowners & painters
  • Users are not very technical about buying online products.
  • App design is very clean & minimalist so that users can’t find any difficulty to buy products online.
  • Here users find great discounts, rewards & other special incentives from the local market, so that they are used to buy online paints again & again.
  • Here will be a news feed section where users can upload their new home pics. Like, comment or share other pics. Also he/she will be able to create some pole for asking something. So that users can interact more with this product.
  • Here will be a play or quiz zone. Users will be able to play games & earn some coupons. Also he/she can participate in a new quiz to earn a coupon and redeem it after. For this process users will interact more with this product & tell others to use this product.

Existing App

User Reviews

Other Similar App

Colour with Asian Paints

User Reviews

Nerolac — Colour My Space

User Reviews

Define-Define everything about the user

User Research

User research focuses on understanding user behaviors, needs and motivations through observation techniques, task analysis and other feedback methodologies.

There are two research methods i.e. Qualitative and Quantitative analysis. But In this short time I don’t have time to take user interviews & research. There are some methods I follow like online surveys, paper surveys, mobile surveys.

User Persona

Empathy Map

Empathy map is a collaborative tool teams can use to gain a deeper insight into their customers. Empathy map represents a group of users, such as the customer segment.

I have skipped this part as of now because of the short time.

Ideate-Come up with some unique ideas

User Flow

User flow reflects the user’s progress from the launch of the application to the discovery of all functionalities in the app and doing some actions.

Low Fidelity Wireframe ( Pencil & Paper )

Prototype-Turn your ideas into interactive mockup

High Fidelity Wireframe ( Adobe XD )

Onboarding screen

Login, OTP & Allow Location

Dashboard

Dashboard Search

Product List & Product Category

Product Details

Order Summary, Edit Address & My Cart

Add Payment, Add Card Details, Edit Card Details & Confirmation

Profile-General Info, Profile-Wishlist & Profile-Favorites

Advance Search

Game Zone

Feed

Prototype

A prototype is a simple experimental model of a proposed solution used to test or validate ideas, design assumptions and other aspects of its conceptualisation quickly and cheaply, so that the designer/s involved can make appropriate refinements or possible changes in direction.

Here is the prototype URL-https://xd.adobe.com/view/e101f99c-f311-4dfe-949b-6c4435c696fa-b452/

Mood Board

Final Design

Onboarding

Test-Test your design to get user’s feedbacks

Usability testing

Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system.

Here I tested this product as a user & shared the prototype to my friends for their review.

--

--

Abhi Chatterjee

UX Designer at Dubai Municipality specialised in User research & Interaction Design