Pepperfry | My Site

Pepperfry Redesign

Brief: As part of the learning process in our UI/UX course, each group was asked to identify a website and propose UI and UX improvements by applying design methodologies, tools, and processes.
We have decided to redesign the Pepperfry website (https://www.pepperfry.com/) to make it more appealing and friendly from a usability perspective.

Deliverables: Produce the outcomes from Brain Storming, mind mapping, ideation, card sorting, information architecture, wireframing, and prototyping.

Team

Ananth, Shreya

Sahana, Disha

Duration

4 Months

Platform Used

Figma

Methods

Brainstorming

Mindmapping

Cardsorting

Wireframes

Prototyping

Brainstorming

Brainstorming is a group creativity technique by which efforts are made to find a conclusion for a specific problem by gathering a list of ideas spontaneously contributed by its members.

The conclusions drawn from the brainstorming session are succinctly depicted in the following two diagrams, which have been appropriately categorized as "features" and "UI" respectively.

Features

Compare

Product

Visual Search

Product

Recommendations

Chatbox

Design Yours

Locate Product In

Online Stores

Font

Logo

Customizable Theme

Interactive

Elements

Iconography

Color Palette

Layout Change

Card Sorting

Card sorting is a usability testing method for determining how users will categorize and label information. It is a common method used in information architecture (IA) to help designers understand how users think about and interact with content.

Based on the results of the card sorting activity, we have determined that the inclusion of a new category, titled "design yours," would significantly enhance the information architecture. Additionally, we have identified and outlined five supplementary sub-categories, which are detailed below for reference.

Tracking an online store

Your Location

Nearest Location

Save Location

Dimension Customization

Viewing in 3D

Material Thickness

Length,Width,Height

Depth

Visualise in 3D space

Click a picture

Save Image

Color customization

Thickness

Gradients

List of colors

Color Palette

Texture custumization

Texture

Pattern

Material Used

Shades

Information Architecture

Information architecture (IA) is the practice of organizing and structuring information so that it is easy to find and use. It is a critical part of the design process for any website, app, or other digital product.

The updated Information Architecture is presented below, featuring individual diagrams for each level to enhance the clarity of representation. The notable inclusion in this revised architecture is the introduction of the "Design Yours" category, which is a significant addition the Information Architecture.

Pepperfry

Sign-up

Homescreen

Track

The subsequent levels for each of the categories provided above with different color-coding are listed below.

Track

Order Status

Order ID

Cancel Order

Design Yours

Insights

The two main categories that we brainstormed on were

- Features

- UI

Under the "Features" category we were consolidating services that could add more value to the user community. Some of such major services could be categorized under "Design yours".

In the UI category, we figured out that the website needed more iconography, a layout change, a new logo, and interactive elements with a bit more animation. Also, we have identified the placement of promotions has not been optimized and the same has been addressed in the prototype.

Augmented Reality (AR) viewing in 3D space would help users visualize the furniture of their choice in any place they wished.

Tracking products that they like on the online stores to their offline stores if the users wished in-hand feel.

More features like adding Q&A, Chat box, View 360, and Visual search have been added.

We have noted ample opportunities to implement the principles of neumorphism within the user interface (UI).