Prasshanna S

190205039

Electronics Ecommerce

Landing Page

Designing a landing page for electronics in an ecommerce platform

Understanding
Understanding

TAsk
TAsk brief
brief

The task is to design a landing page for the electronics category of an

ecommerce platform. The platform should focus on navigation, product
discovery, guidance and inspiration. Should showcase user flow and journey
of the user as they navigate through the landing page. The priority should be
given to product visibility and should adopt a simple and minimalist
approach.

Project
pROJECT Goals
gOALS

Designing a landing page for electronics. The landing page should have a
smooth navigation along with easy access to all the features of the app. The
improved landing page must increase the conversion rate of the app in
general.

Primary
Primary Research
Research
F
fIEL D
ield sTU
STU Y
Y DD The primary stake holder was identified as

Identifying and understanding stakeholders and target audience

Since the target audience is already defined in the problem

statement to be people residing in metro cities, those residents
have been identified as the primary stakeholders. Since there
are wide variety of residents in a metro city, a specific set of
users were to be chosen.

Working Metro
city residents
For my study, I chose metro city residents who work.

Stakeholder INTERVIEW aNALYSIS

Stakeholder interview analysis
Interviewing stakeholders to understand the process and
analysing their information

Major pain points stated by stakeholders regarding ecommerce apps

Interviewing a few people regarding eccommerce apps in general

Literature
Literature Review
Review
Reviewing exisiting articles and papers on issues with ecommerce.

Click on the images to read the full articles

These articles and papers state various points in accordance to what the users stated during the interview. A few are listed below

“ There is a disconnect between what consumers see first at the

point of engagement versus what they see on a product display page

“
”
In contrast to brick and mortar shopping, the ecommerce discovery

or the PDP.
x
process is non e istant in many cases. ”

“ Even Consumers expect the platform to guide them to their

q
re uired end result rather than put in the work to identify the end
“ x

”
The amount of time that the users are willing to spend is e tremely

result.
low compared to other engagement activities. This poor user

engagement can be attributed towards the mental fatigue a person

x
e periences from accessing these platforms. ”
D
Iidentifying
ENTI YING TFE PRO
the LEM
problem H B
Through analysing the interview and pain points an initial primary problem statement is
made.

“Electronics landing pages, or any landing pages for that matter, are usually daunting and difficult to consume. The
time constrained environment results in abandoning browsing and searches.”

Secondary
Secondary Research
Research
FfOCUS
ocus GROUP
group
A focus group was conducted with the help of 10 volunteers of various ages and familiarity with the task at hand

b u
Details a o t participants of the foc s gro p u u

A ge Familiarity with ecommerce apps

29. The majority is below age 30. The

The average age of the participants is In general, the participants were atleast familiar with the idea of online shopping
maximum age is 48 and a minimum age is 23. and browsing the ecommerce apps. Majority of the users have bought atleast one
product through ecommerce in the past 1 year.

S cenario

The participants were tasked into going through the electronics landing pages of various ecommerce apps like Flipkart, Amazon, Snapdeal etc. The task was to identify a product they
wanted to buy through any of the available search options ranging from te t search, product cards, deal adverts etc. x

R esult
Monitoring q
the entire process, the major problems and uni ue e perience faced by the user are listed here.x

Users who chose to explore the page 2 out of the 10 participants could not In some platforms, the users felt that they
needed to enter the product display page more
were immedietly confused with the identify a product to buy through often than others to even know basic prodcut
presentation x
e ploration details

The users took some time to

They felt an overwhelming amount of Many users abandoned e ploration and x
understand the layout and the search
information was presented to them used the search bar in the end
process

Some product cards were not clear

The way in which the options are The tools that are available are
enough to even understand what that
presented were inorganic intimidating and time consuming to use
product is

Empathy
Empathy Map
Map

Sakthi Kannan

29 years old

E xpectations
Kannan is a manager at an Textile firm in Chennai. He uses To be able to quickly find product
online shopping to buy stuff rarely and does not browse easily see the top deals and new arrival
the apps often. He is time constrained so wants to have a Have a relaxing experience while browsing through
quick and easy experience in the platform

S cenario: Exploring the landing page

Unable to Visiting a store

comprehend is better it’s manageable
easily “Looks very
daunting and
difficult” “Not able to the whole
find anything i process is
want” time
consuming
Cannot make a
decision
The entire
“I don’t know process is
where to go on I don’t know
overwhelming
the screen” what will
happen when I don’t know Should take
i click this about this help from
category much experienced
individuals

Unable to
I want to just I don’t even know understand
search the what this product why the
product i want card is” Says Thinks options are
presented to
me

Does Feels
Keeps frustrated
scrolling

confused

Views lots of
Lack of trust
product pages

Tries
searching
manually Overwhelmed

Happy
Tries
waste of

searching time
each category
Searches
google
regarding the
products Restricted

Pains Gains
Finds the exploration process of the landing page Can get products that are not available in their cit
exhaustin Can get their products delivered to their doorste

Has difficulty comprehending the options presented to Can browse through numerous products of various

them categories in one place.

Finds the interaction inorganic

TAS K ANALYSIS
Analysing the major task flows in regards to electronics landing page

Exploring an electronics landing page

User
User Persona
persona
Creating the persona of the user who’s problem we are trying to solve

USER PERSONA

Sakthi Kannan
“I want to find products as quickly and easily as possible”

ABOUT
AGE 29

JO B TITLE M anager Kannan is a manager at an textile firm in tirupur. He uses online shopping to buy stuff rarely and does
not browse the apps often. He is time constrained so wants to have a quick and easy experience in
the platform. He wants to buy products off online to save the time it takes to visit stores and select
LOCATION C hennai the product and buy it. He wants to explore electronics at his home but is not satisfied with the
current platforms as he keeps experiencing a burnout during his searches.

PERSONALITY GOALS

I ntrovert E xtrovert To be able to find the products he wants To know more about the products types
quickly that are available and are relevant to him
A nalytical C reative

usy Time rich

Guidance by the platform towards the To navigate through the platform with as
product he needs
B

much less effort as possible

M essy O rganized

I ndependent Team player

PAIN POINTS M otivations

Has very little time to invest in browsing S aving time

D
I ENTI IERS F Prone to burnouts and abandons searches Save money

due to the not arriving at a conclusion

Time constrained, Organized, Inteligent E ase of availability of products
Inorganic nature of interaction with the
platform stresses them out Gain technological literacy

Ideation
Ideation

BBrainstorming
rainstorming
Coming up with possible solutions for the major painpoints identified

Primary painpoints identified

Inorganic way of representing data Overwhelming amount of information to consume in one go Lack of ease of access to various functions

Solutions for the above painpoints

ctive decision Quick access N avBar with

Usage pattern daptive pages
A
A
mechanisms bookmarking important
analysis features

Help sections for various Infinite card ctive

A M ulti-platform
Viewing new deals categories swipe suggestions compatability
mechanism

Guiding Articles
Viewing and Quick interaction
Viewing new
tyle personalizations on categories
selecting available mechanisms
S
products
categories

KkANO
ANO ANALYSIS
ANALYSIS
Arranging the solutions based on feasibility and user need to figure out the most important solutions to work on.

Since this project is heavily time constrained, time has been used as the x axis.

High satisfaction

N avBar with
important A daptive
Viewing new Pages
tyle S features deals
personalizations
Help sections
Quick for various
nfinite card swipe
interaction categories
I

mechanism
mechanisms Viewing
and
selecting
Viewing new available
Active decision products
mechanisms categories
Guiding Articles on
categories
Low quality Quick access Very
performance bookmarking Functional

ulti-
M
Usage pattern
ctive
A platform analysis
suggestions compatabil
ity

Low satisfaction

Introducing adative landing page

Introducing Adaptive landing page
A concept of making the page adapt to the users habits

While recommendations of products are now dependant on what the user searches the most and tries to align with
that. Even though the recommendations are tailored to the users the landing page itself still remains the same for
most users as a platform. To combat the inorganic nature of this interaction with the landing pages, an AI powered
system is introduced.

Introducing AFRS

“Adaptive Function Representation System”

What is it?

AFRS is a system which studies the users usage patterns and reorganizes the elements of the landing page according
to the users usage criteria. To understand how it works, a scenario is illustrated below

S ample Scenario S earch Bar Visibility

Below we can see two wireframes of the landing page. In one there is a search bar present and in the other a search
button is present

Top Nav Top Nav

Search Button
Bar Bar

Search Bar

Other Elements
Other Elements

Other Elements Other Elements Other Elements Other Elements

Other Elements Other Elements

Bottom Bottom
Nav Bar Nav Bar

Here, the AFRS studies the Here, the AFRS after studying
user pattern and from the the user pattern has
users past interactions, has determined that the user
identified that the user uses ’
doesn t use the search bar
the search option more than a above the threshold so it is
defined threshold amount. So represented as a button and
rather than having a search the now available screen space
button, the user is given a is used to display other
search bar which the user can elements which are of more
directly interact with. importance to the user.

“The AFRS adapts the landing page to that of the users usage pattern so that the user can get to their preferred
method of exploration as quickly as possible. This also makes the interaction organic as there is a response from the
system taking the users preferences into concern”

Implement
IMPLEMENT

Rapid ideation
Rapid ideation

Just a part of rapid ideation and wireframing done

Style guide
Style Guide
The style guide of the high fidelity screens

Typography colours gUI ELINES AN D D icons

IBM PLEX SANS

1B1B16 888888
IBM PLEX SANS

IBM PLEX SANS

IBM PLEX SANS

IBM PLEX SANS 515151 FFFFFF

IBM PLEX SANS

IBM PLEX SANS

FFinal Screens
inal Screens
High fidelity screens of the app

L anding Page

9:41

S earch

Explore Electronics

Laptop Smartphone Headphones Speaker

Up to 20% off

on headphones

Shop now

Top Deals View all

Sandisk 8GB Pendrive Samsung Galaxy Watch

₹500.00 (25%off) ₹10000.00 (20%off)
₹250.00 ₹8000.00

The overall UI of the landing page is kept minimal and easy to understand manner. Emphasis
is given to the representation of the product. Hierarchy has been established within a product
card where the image is given the most preference and then the amount follows.

C omponents of the landing page

S earch Bar: The search is

9:41 situated at the top of the page.
It has a cool tone to it so it
S earch
doesn’t hinder with the other
Explore Electronics screens.
Categories: This carousel can
be used by the user to select a
specific category to look at. Laptop Smartphone Headphones Speaker

Up to 20% off

on headphones
Banner: The banner showcases
current events that are active in
the app.
Shop now

Top Deals View all

Top Deals: The products are

displayed with an image, the
name, the MRP, the discount
and the final sale price. The top Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar
deals tab shows the best deals ₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
that are generally available in ₹250.00 ₹8000.00 ₹3000.00

that category.
Ne w

Arrivals

In
N ew Arrivals: The new arrivals
Smartphones
in specific categories are either
represented as a carousel, or as
Take a look at what
a tab which the user can select
is hot right now!
to access that specific set of
For you View all
products
For you: This is basically
recommendations based on
your past searches. These can
be assortments of various
categories, or category specific Sony XB7 00-F MSI GL63-9SDK(32G... Logitech

₹8000.00 (10%off) ₹140000.00 (5%off) ₹5000.00 (50%off)

recommendations too. ₹7200.00 ₹133000.00 ₹4000.00

Learn More

Learn more: This tab shows

guides for the user based on
their searches earlier so that
they can go through it and make
an informed decision.

How to choose the right laptop

Head into this easy to understand detailed walkthrough

Bottom Navbar: The bottom

on how to find the perfect laptop for your needs

nav allows the user to access a

dedicated search, the cart and
the user profile along with
accessing the home.

How AFRS Will Work

The page will adapt to the users usage pattern through AFRS. A few scenarios are illustrated
below to showcase how the screen will look like for different types of users.

9:41

Explore Electronics

S cenario 1- Search Bar Low Laptop Smartphone Headphones Speaker

Up to 20% off

on headphones

The search bar usage of this

user is below the threshold set
by the AFRS system. So the Shop now

search bar is removed to make

way for more information to be
Top Deals View all
shown.

Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar

₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
₹250.00 ₹8000.00 ₹3000.00

Ne w

Arrivals

In

Smartphones

9:41

S earch

Explore Electronics
Up to 20% off

on headphones

Shop now

Laptop Smartphone Headphones Speaker

Top Deals View all

S cenario 2- Banner conversion High

Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar
₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
₹250.00 ₹8000.00 ₹3000.00

If a user has a high conversion Up to 25% off

rate for banners, then the on Macbooks

AFRS increases the occurences
of banners throughout the
page. The order in which the
Shop now
elements are displayed is also
changed as banners now are
displayed right at the For you View all

beginning of the page due to

the judgement by AFRS based
on User usage data.
Sony XB7 00-F MSI GL63-9SDK(32G... Logitech

₹8000.00 (10%off) ₹140000.00 (5%off) ₹5000.00 (50%off)

₹7200.00 ₹133000.00 ₹4000.00

Explore Top Deals

on Speakers

Shop now

Learn More

S cenario 3- When conversion rates are low

9:41

S earch

Explore Electronics

Laptop Smartphone Headphones Speaker

Up to 20% off

on headphones

Shop now

Top Deals View all

Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar

₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
₹250.00 ₹8000.00 ₹3000.00

The most important thing for Learn More

an ecommerce site is the
conversion of a listing to being
sold. Even though the
conversion rate to product
pages is high, but those are not
converted into purchases. If
this prevails, more help articles
are made available by the
AFRS so that the users can How to choose the right laptop
make an informed decision Head into this easy to understand detailed walkthrough

on how to find the perfect laptop for your needs

easier

For you View all

Sony XB7 00-F MSI GL63-9SDK(32G... Logitech

₹8000.00 (10%off) ₹140000.00 (5%off) ₹5000.00 (50%off)

₹7200.00 ₹133000.00 ₹4000.00

Explore Top Deals

on Speakers

Shop now

Get to know

The best racing wheels of 2021

While the world of sim racing is waiting for your arrival,
take a look at the best gear available now

Interactions on the page

C arousels
9:41

Explore Electronics

Laptop Smartphone Headphones Speaker

The entire page will now have Up to 20% off

very consistant representation on headphones

of data and the interactions
too. All the shown product tabs
are a carousel and can be
Shop now
swiped to access more options.
The progress bar is also
included to let the user know Top Deals View all

what is the status of their

scroll.

Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar

₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
₹250.00 ₹8000.00 ₹3000.00

Ne w

Arrivals

In

Smartphones

N ew interaction: 3D touch

Adopting the apple 3d touch technology which has also now made its way into android too.
Here we are using this to showcase more options that are available regarding an item even
without opening it. Its main aim is to reduce clicks and inturn save time.

9:41 9:41

Explore Electronics Explore Electronics

Laptop Smartphone Headphones Speaker Laptop Smartphone Headphones Speaker

Up to 20% off
Up to 20% off

on headphones on headphones

Buy now

Add to cart
Shop now Shop now
Bookmark

Top Deals View all Top Deals

Compare View all

Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar Sandisk 8GB Pendrive Samsung Galaxy Watch Bose Soundbar
₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off) ₹500.00 (25%off) ₹10000.00 (20%off) ₹6000.00 (50%off)
₹250.00 ₹8000.00 ₹3000.00 ₹250.00 ₹8000.00 ₹3000.00

Ne w
Ne w

Arrivals
Arrivals

In
In

Smartphones Smartphones

Press and hold to activate the 3d touch on product listings. When activated, users can select
options such as buy now, add to cart, bookmark and also compare. The compare option
works as a clipboard where the products of same category that are added to the clipboard
are grouped together to compare. Bookmark allows you to save the item for later.

See the interactions and pages in action in the interactive prototype below

Link to prototype