04

Discovery Phase
4.1 OPEN POINTS

From the data organised

and compiled in the
affinity maps, 30 open
points were derived to be
explored further.
4.2 IDEATION
UX/UI
Recommendations
For Immediate Implementation

Hold for later for future Implementation

User enters the website
P&G Shiksha
User enters product page
Users currently cant
undo their favourites
(Experience)

No of reviews
(Experience - PDP
Views)

Helpful tags like

Bestsellers & Offers
(Experience - PDP
Views)

Scroll - back to top

feature (Experience -
Bounce Rate)

Giving the user a choice

of one and two column
grid could increase
accessibility (Experience
- PDP Views)
User enters product page
Scrolls through product page to get
more info and to read reviews
Scrolls through product page to get
more info and to read reviews
Scrolls through product page to get
more info and to read reviews
Checkout & Cart
Sign in/sign up
Communication
Recommendations
What could be added

The toothbrush is 5,000

years old
What could be added
What could be added
4.3
Moonshots
 05
Design Phase 1
5.1 Information
Architecture

An information architecture is a
document that provides an
operational map as to how a product
acts and how the functions work for
users. It’s akin to a blueprint for digital
products, and it displays pages,
content, interactions, and behaviours
for the entire product. From the data
received and concluded in the
research phases and the design
recommendations observed an
Information architecture for PGShop
4.0 was formed.
 Homepage Search Cart Hamburger menu

Select a coupon
Search
Cart
Hamburger Menu
Category View
Brand View Custom Bundles
Best sellers Journey
Trending Categories
Trending Products Proceed
Custom Bundles
Account Details
Shiksha Custom Bundles
PG Shiksha
Tips & Tricks

Payment Gateway

Category View Toiletries

Mens Toiletries Womens Toiletries

Sale Screen
Brand View Brand Page Products Listing Product Display Cart

From the data received from the research conducted it was

understood that the users wanted more priority given to the
brands. Many users were surprised to know of the names of
many brands under the parent company P&G. Once they
found out they were intrigued to buy more.
User flow is a process or path taken by a prototypical
5.2
user on a website or app to complete a task. The user
flow takes a user from an entry point through a set of
steps towards a successful outcome and final action,
User Flow
such as completion of order.
Organic Search

Homepage Brand Page Product Cart

Page

Sign up Payment Shiksha

page

Redirected
to
homepage
Via Product Advt in an app

Product Cart Sign up Payment

Page page

Shiksha Redirected
to
homepage
5.3
Moodboard
5.4
Wireframes
 06
Design Phase 2
6.1
Design System
Atoms
Colours
Colours
Colours
Colours
Typography
-INTER
Typography
-INTER
Grids
Desktop
Grids
iPad
Grids
iPhone
 Dropshadows

Icons
Molecules
Buttons Chips
Text Input Radio Input
Toasts Checkbox Input

Tool Tip
Cards
Image System
 6.2
Packaging
System for
Custom Bundles
Type of box

Rollover hinged
lid box - Standard
Packaging solution without glue dots, also
known as roll end tuck top box. The die-cut box
is shipped flat and requires a simple assembly:
first fold front and rear panels and then the side
ones on the internal flaps and fix them into the
suitable hooking. Mostly used as high-tech and
[39]
gift box.
Font
Welcome Cards
Gift Cards
Packing Material

Shredded paper/Crinkle paper

Mockups
Design Brief for
illustrations
Outreach
Prototypes are a close replica of what the end
result of a product will look like, usually without
code. They incorporate most of the final UI 6.3
Prototype
design and interaction that the finished product
[41]
will have. High fidelity prototypes have been
created using the components from the design
system which has been defined.
Buying Journey
P&G Shiksha
Custom Bundles Journey
 07
Conclusion
7.1 Next Steps
7.2 Limitations
08. References
08. References
08. References
08. References
09. Bibliography