Monalisha Das

Designer

Redesign

CEPC category pages

Welcome

Agenda

Steps towards Improvements in Browse Experience for CEPC Category page / Electronics Page

Next

Breif

Re-design Electronics page

Purple Speech Bubble Pattern

Few points to be considered while re-designing the page

1

Best in class design in technology, few brands to refer are Apple, OnePlus, Samsung, Sony etc.

2

Refer New widgets used by Fashion team, wireless pages too

3

Key elements to continue as current electronics page

4

Mark out the limitations with respect to brand assets vs overall design language, long term solutions

5

5

How do we measure success (key metrics)

Methodology

Following a Double Diamond Design Thinking Process to carry out the investigation.

The procedure is divided into four stages: discover, define, develop, and deliver.


Iterative Prosess

Design Thinking: Process and Principles

Discover

Develop

EMPATHIZE

IDEATE

TEST

DEFINE

PROTOTYPE

IMPLEMENTATION

Define

Develop

Deliver

UNDERSTAND

EXPLORE

MATERIALIZE

Redesign Roadmap

Expected delivery of stage

UNDERSTANDING THE AGENDA

  • Marking the initial hypothesise
  • Discussing the process approach

USER INTERACTION

ANALYSING THE DATA

  • User Survey
  • Story boarding exercise
  • Note and vote(Gain point / pain points )
  • Heuristics
  • How might we
  • Mindmapping
  • Widget size and ratio
  • customisations limit

WIREFRAMING

  • crazy 8's
  • paper wireframing

PROTOTYPING

FIRST VIEW

  • FIGMA

9 Aug

11 Aug

14 - 16 Aug

17 Aug

18 Aug

21 Aug

Discover

DEFINE

DEVELOP

DELIVER

NOTE: Subject to revision.

Initial Hypothesis

We began with a hypothesis centered around whether our webpage struggles to maintain user engagement. Consequently, we explored ways to enhance the appeal of our page and make it more captivating for users.

Next

We aim to

GAIN TRUST

as a marketplace with

WIDE CATEGORY

and act as an

INFORMATION PROVIDER

for all the present / upcoming

LATEST TECH

2

Heuristics of the Page

3

User Intuitive Flow

DISCOVER

About the agenda

1

Understanding the Brand Book

  • Research and Analysis

Studying given website

  1. Fashion
  2. Competitor Analysis
  3. Apple
  4. Samsung
  5. Sony
  6. OnePlus

Look at the new widgets the wireless pages and fashion team are using for ideas.

Timer Icon

Time: 5 minutes each

Tip: Go through the website as a user

DISCOVER

Identify Stakeholders

Define Goals and

Objectives

Create User Personas

Conduct User

Interviews

Gather User Feedback

Analyze User Journeys

Competitive Analysis

Collaborate with Stakeholders

User Empathy Exercises

Synthesize Findings

USER INTERACTION

1st User Interaction (Brainstorming Session)

USER SURVEY

STORYBOARDING

NOTE AND VOTE EXERCISE

User Brainstorming sessions

2

Heuristics of the Page

3

User Intuitive Flow

1

Understanding the Brand Book

Consistency and Standards

Error Recovery

Error Prevention

Accessibility

Questions

  1. Heuristics of a e-Commerce Page
  2. Elements it Posses
  3. widgets supporting it
  4. Limitations
  • Study the aesthetics, user experience, and design philosophies of the brands mentioned.

Heuristics of a e-Commerce Page

Visibility of System Status

User Control and Freedom

Prioritize Content

Search Functionality

Flexibility and Efficiency of Use

Recognition Rather than Recall

Help and Documentation

Gesture and Touch-Friendly

Mobile-Friendly Design

Aesthetic and Minimalistic Design

Clear Call to Action (CTA)

Feedback and Response Time

Efficient Navigation

Brushstroke Arrow Smooth Curve Down

Click on the links to view

1

Understanding the Brand Book

2

Heuristics of the Page

3

User Intuitive Flow

Gain Points / Pain Points

  • Analyze the current electronics page to understand its strengths, weaknesses, and user feedback.

NOTE AND VOTE EXERCISE

HOW MIGHT WE ?

Questions based on the points

DEFINE

Clearly outline the objectives of the redesign

  • Improved user experience
  • modern aesthetics
  • better integration of wireless pages and fashion widgets

Identify the key elements from the current electronics page that need to be retained.


Brand Assets vs Design Language

  • Assess existing brand assets ( color palette, typography, etc.) and evaluate how they align with the desired design language.
  • Determine limitations in adapting brand assets to match the design language of brands like Apple or OnePlus.
  • Propose adjustments to brand assets if necessary, keeping long-term brand consistency in mind.

MINDMAPPING

Design Language and Elements

  • New design language that combines the best aspects of Apple, OnePlus, Samsung, Sony, and the current electronics page.
  • Attention to









to create a visually appealing and user-friendly design.


Ensure a consistent design language across different sections of the page while accommodating these widgets.

Typography

Color

scheme

Spacing

Imagery

2

Development and Implementation

3

User Testing

1

Wireframing and Prototyping

DEVELOP

About the agenda

  1. User Personas and User Journeys
  2. Wire-framing and Information Architecture
  3. Visual Design and Brand Alignment
  4. Prototype Development

Look at the new widgets the wireless pages and fashion team are using for ideas.

CRAZY 8'S

Section : TOP OFFERS FOR YOU

CRAZY 8'S

Section : TOP OFFERS FOR YOU

WIREFRAMING

FIGMA LINK

A Run through the existing CEPC Electronic page

PAIN POINTS

White space

  • size of header

Stripes taking up lot of space

  • could be consized in smaller space
  • ITS hard to preset more that 2 in stripe rectangle format
  • play with stripe ratio
  • play with design

EXISTING AMAZON PAGE

Category scroll

  • 2 line taking up lot of space
  • colored with space
  • looks the same
  • not able to understand whether its same section
  • if same why is it repeating

HMW concise in one section without losing the options

TOP OFFERS FOR YOU

  • Dark
  • Distractive
  • Out of place
  • Ratio OFF
  • long view
  • Takes up lot of space

TOP OFFERS FOR YOU

  • Header looks NON responsive but gives feel of a button
  • Dark
  • Distractive
  • Out of place
  • Ratio OFF
  • long view
  • Takes up lot of space

Shop from your brand

  • creative way to incorporate with other curated section to brake the monotony

New and trending sections

  • A continues view
  • too many sections
  • information overload
  • work for users
  • no break for users
  • user might skip it due to overload or exit

Premium curated store

  • Follow the design language to not fall out of place


top reasons to buy from amazon

  • NON responsive section
  • header gives feel of a button
  • section is large taking up too much space


VIDEO

  • Placed before electronics zone to introduce new sections and break monotony

Buying guide

new widgit selection

List of new sections to be added

  • cUSTOMER MOST LOVED

The Re-designed view

Bank stripe

  • As bank stipe take a huge chunk of the first glance of the page sometimes due to its number of quantity
  • So to consize it, in past stripes are kept in an auto scroll motion but due to the quantity of stripe user might miss one or the other


hence to not compromise on the information the stripe is redesigned and ket in an auto scroll mode

atf halo

  • As CEPC page is a heterogeneous category introducing a new widget for one-stop spot for users to find branched category involved under CEPC Category

Category SECTION

  • Category banner

a. Scrollable banner

b. Auto scroller

followed by


  • THE SUB BRANCHING

Each category is equipped with at set of SHOP BY division which gives

a. Structure to each category as per customer needs/wants and top preferences

b. help to show upfront what the category offers

c. forms a new consumer behavious

  • BESTSELLERS

Scrolling tiles arranged in terms of rank to provide user with upfront TOP options to ghave aquick glance at


all the Category SECTION

THUMBNAIL EXPERT REVIEW

  • CURATED STORE (Premium)
  • customer most loved ticket
  • Top reasons to buy
  • buying guide

PROTOTYPE LINK - SCROLL mobile VIEW

Click on the screen to view the prototype

Brushstroke Arrow Smooth Curve Down