pfi-web-redesign

SECTION 7

Website Redesign

ACTION BUTTON

The excessive use of action buttons on the website makes navigation and usage of the website tedious.

VISUAL LANGUAGE

The colors used for the borders in the collages are different.

ALIGNMENT

Due to the different sizes of the images the grid has not been maintained.

PIXELATED IMAGERY

Poor image quality reflects badly upon the brand.

TEXT HEAVY

Excessive textual content and links discourages viewers; information is not crisp and to the point – creates ambiguity.

VISUAL LANGUAGE

Images are not harmonious – photo editing required.

HEURISTIC EVALUATION

A heuristic evaluation is a usability inspection
method for computer software that helps to
identify usability problems in the user interface (UI)
design. It specifically involves evaluators examining
the interface and judging its compliance with
recognized usability principles (the “heuristics”).

This method was developed by Jakob Nielsen in
collaboration with Rolf Molich in 1990.







PROBLEM STATEMENT

The website is designed in documentation format
and lacks emotional element. The look and feel of
the brand is absent. Excessive text and multiple
links create confusion. There exists no harmony in

the visual language of the website.

REFERENCE WEBSITES

• https://www.genny.com/en/

ELEGANT AND MINIMAL

COLOR STORY

RELEVANT CONTENT & CLEAR NAVIGATION

CLEAR NAVIGATION

PICTURES HAVE SIMILAR TONES

• https://www.stellamccartney.com/in

TROPICAL WHITE SPACE

• https://www.armani.com/us/armanicom

MINIMUN AND CLEAR NAVIGATION; TRANSITION

• https://www.apparatusstudio.com/

CLEAN AND TO THE POINT

MINIMUM TEXT

CARD SORTING For the study in question, hybrid cart sorting sessions
were held.
Card Sorting is a method used to help design or evaluate
the information architecture of a site. Hybrid card sorting is especially useful if:
In a card sorting session, participants organise topics into
categories that make sense to them and they may also • You have your information architecture partially
help you label these groups. complete you are interested in seeing how
participants label and sort the rest of your structure
Open card sort
• You think that allowing participants to create their
Participants sort cards into categories that make sense to own categories will mean less people abandon the
them, and label each category themselves. study.

Close card sort Participants –

Participants sort cards into categories that you give them. 1. Vinay Elumalai –
Chef at Bread and Chocolate, Auroville
Hybrid card sort
2. Shajin Kalathingal –
Participants sort cards into categories you give them, and Biker and traveler, Kerela/Saudi
can create their own categories as well.
3. Uzma Saiyyed –
Fashion stylist, Mumbai

4. Anais –
Marine biologist, Germany



SORT 1

CRAFT SHOP CLOTHING GENDER PRODUCTS
TANGAIL WHAT’S NEW ACCESSORIES MEN SIZING
JAMDANI COLLECTIONS FOOTWEAR WOMEN COLOR
SEARCH UNISEX
GIRLS
BOYS

ABOUT PREMA FLORENCE ISAAC
DESIGNER
CONTACT
AUROVILLE
FAQ

SORT ONLINE STORE GENDER ACTIVE WEAR COLOR
COLLECTIONS CARE
HOME PAGE CLOTHING MEN TOPS SIZING
WHAT’S NEW
SEARCH ACCESSORIES WOMEN BOTTOMS

ABOUT FOOTWEAR UNISEX SKIRTS
DESIGNER CONTACT
AUROVILLE FAQ GIRLS DRESSES
CRAFT
TANGAIL BOYS T-SHIRTS
JAMDANI
NECK TIES

SCARVES
WAISTBELTS

JEWELLERY

BAGS AND KITS

SORT PREMA FLORENCE ISAAC

SHOP ONLINE COLLECTIONS
PRODUCTS
WHAT’S NEW SEARCH
CLOTHING
DRESSES ACCESSORIES
T-SHIRTS
SKIRTS NECK TIES FAQ
TOPS
BOTTOMS SCARVES COLOR

GENDER WAISTBELTS SIZING
MALE
FEMALE BAGS AND KITS PAYMENT
UNISEX
GIRLS FOOTWEAR CARE
BOYS
CRAFT ABOUT
TANGAIL DESIGNER
JAMDANI CONTACT
AUROVILLE

SORT

PREMA FLORENCE ISAAC

ABOUT ONLINE STORE GENDER
DESIGNER WHAT’S NEW MEN
AUROVILLE
CONTACT SEARCH WOMEN
CRAFT COLLECTIONS UNISEX
TANGAIL
JAMDANI FAQ GIRLS

SIZING BOYS ACCESSORIES
COLOR CLOTHING NECK TIES
SCARVES
CARE ACTIVE WEAR WAIST BELTS
BAGS AND KITS
PAYMENT DRESSES JEWELLERY

T-SHIRTS FOOTWEAR

BOTTOMS

TOPS

SKIRTS

TASK ANALYSIS

One of the most important steps in the Design Thinking
process that is often employed as standard practice in
UX design is to define the users’ problems. This means
being able to clearly identify and articulate problems
in the user experience so that you can later begin the
process of ideating. Task Analysis is a simple exercise
that UX designers can undertake during the definition of
a problem, which can help not just in identifying where
opportunities to improve the user experience exist but
also to generate some preliminary ideas as to how you
might approach these challenges. Let’s find out how.

Joann Hackos, communications expert, and Janice Redish,
UX consultant and writer, advise that task analysis is
useful for understanding –

• Your users’ goals and what they are trying to achieve
• The steps that your users currently take in order to

achieve their goals
• The personal, social and cultural experiences that

users bring to the tasks
• The influence of the physical environment on the

users while attempting to meet a goal

A clear understanding of the above factors will help you
to define and frame the users’ problems so that you can
then ideate ways to help improve their experiences.

TASK 1 TO KNO ORE ABOUT THE BRAND

SUBTASK ACTION OBJECTIVE REQUIRED ACTION FEEDBACK
BY THE USER (FROM UI)

1.1 Open website Intend to know about the brand Read and browse Provide information regarding

the brand

1.2 To know about the designer and Intend to know about the Read about the designer and the Provide information regarding
the brand designer and the craft craft the designer and the craft

1.3 View collections and products Intend to view the brand’s work View work Shows collections and products

TASK TO RESEARCH ABOUT THE CRAFT

SUBTASK ACTION OBJECTIVE REQUIRED ACTION FEEDBACK
BY THE USER (FROM UI)

1.1 Open website Intend to research Read and study Provides information about the
craft, the brand is associated
with

INFORMATION ARCHITECTURE

Information architecture (IA) is a science of organizing
and structuring content of the websites, web and mobile
applications, and social media software.

Information architecture aims at organizing content so
that users would easily adjust to the functionality of the
product and could find everything they need without big
effort.

IA forms a skeleton of any design project. Visual
elements, functionality, interaction, and navigation are
built according to the information architecture principles.

PREMA FLORENCE ISAAC

HOME SEARCH

ABOUT CLOTHING ACCESSORIES FOOTER
CONTACT
THE DESIGNER WOMEN SCARVES ADDRESS
INSPIRATION HOLY DAYS NECK TIES PHONE
AUROVILLE ANOTHER WAY MAIL
SUMMER DREAMS KAGERA SOCIAL MEDIA
CRAFT HOLY DAYS REBOOT JWELLERY
TANGAIL
JAMDANI MEN
VAGABOND

UNISEX
FABRIC ART T-SHIRT

KIDS
IT’S MAGIC!

12 column grid 6 column 960px grid
16 column grid
GRID STUDY

The 12 column grid

• Quite flexible and widely used
• can be divided into many equal and proportionate sections
• Easy to organise complex content harmoniously within a

web page

The 16 column grid

• A 16 column responsive grid designed to be folded
into 8 and then 4 columns as the viewport decreases

The 6 column 960 px grid

• 960px grid was used due to lack of availability of
higher resolution screens in the earlier days

• Flexible for a responsive design
• Overall look is outdated

The redesigned website will be using 12 column
grid.

• 1366px screen width
• 107px column width
• 8px gutter width
• 49px margin width
• Resolution 72dpi

COLOR PALETTE

The brand uses multiple colors in its designs. The images
are very colorful too. Taking this into consideration, the
route chosen for the website redesign is
“White : Blank Canvas”.

PremaFlorence Isaac Passive buttons
and active buttons #707070
#424242

Headings and body Icons
text #666666
#333333

ICONS

Size: 40px x 40px

Etsy Facebook

Instagram

TYPOGRAPHY

Currently used: Trajan Pro

• Its an all-caps font
• Small font family
• Kerning

Font option # 1

Josefin Slab
• Serif, detail
• Elevation suggesting foresight
Open Sans
• Recommended for body text
• Clean
• 10 styles
• Neutral, but friendly appearance
Extremely legible

Font option # 2

Poiret
• Elegant, sleek, simple
• Graceful curves
• Elevation denoting foresightedness (letter ‘e’)
Lato
• Semi-rounded details which gives a feeling of warmth
• Easy going and stable
• Recommended for body text

TRAJAN PRO (currently used)

The Trajan design is a serif font with elegant, sweeping
curves and due to its Roman typography inspiration is
consequently an upper-case only font family.

The Trajan design conveys a feeling of importance,
elegance and is very easy to read at a distance but seems
to have found its niche in Hollywood. It has been used in
a huge number of movie title sequences and is even more
popular on DVD packaging. Just about every genre of
movie has at one time or another used the Trajan design
for the main titles. It has appeared on National television
worldwide in numerous title sequences and even used in
presidential campaign promotions.

Typographers enjoy using Trajan because of its truly classical
feel, its stoic look, its combination of complexity and
subtlety and its distinct proportions and geometry.

PremaFlorenceIsaac

Trajan Pro

JOSEFIN SLAB

Josefin Slab is an open-source slab serif typeface
designed by Santiago Orozco. The design was inspired
by geometric sans-serifs from the 1930s combined with
more modern slab serif designs.

The low x-height doesn’t make it the best font for body
copy, however it makes an excellent display and headline
font.

OPEN SANS

Open Sans is a humanist sans serif typeface designed by
Steve Matteson, Type Director of Ascender Corp. This
version contains the complete 897 character set, which
includes the standard ISO Latin 1, Latin CE, Greek and
Cyrillic character sets. Open Sans was designed with
an upright stress, open forms and a neutral, yet friendly
appearance.

It was optimized for print, web, and mobile interfaces, and
has excellent legibility characteristics in its letterforms.

POIRET

A fresh decorative geometric grotesque with a hint of Art
Deco and c‘onstructivism. Poiret One is a unique typeface
with light forms and pure elegance. Sleek and simple.
Based on geometric forms, it has stylish lines and graceful
curves. The font is applicable for large signs, labels, titles,
headlines and any type of graphic design on the web, in
motion graphics, or in print - from t-shirts to posters and
logos.

It is also well-suited for short texts and advertising where
style is desired. Complete with a lower-case letters, the
Poiret One is also useful for all-caps usage.

LATO (Selected)

Lato is a sanserif typeface family designed by Warsaw-
based designer Łukasz Dziedzic. A typeface that would
seem quite “transparent” when used in body text but
would display some original traits when used in larger
sizes. He used classical proportions (particularly visible in
the uppercase) to give the letterforms familiar harmony
and elegance. He created a sleek sans serif look, which
makes evident the fact that Lato was designed in 2010 —
even though it does not follow any current trend.

The semi-rounded details of the letters give Lato a feeling
of warmth, while the strong structure provides stability and
seriousness.

PremaFlorenceIsaac

Lato Heavy
Tracking - 100
Font size - 26 (Web)

Headings

Lato Semi-Bold
Tracking - 100
Font size - 26 (Web)

Body Text

Lato Regular
Tracking - 50
Ledding - 26
Font size - 18 (Web)

WIREFRAMES

Home Page



WIREFRAMES

About Page