UI/UX(Sample Works)

MRINMOYEE BANERJEE
 A Brand with a pan euro presence
facing issues with their presence
in India and with the footfall on

01.
their website both in India and
Europe India and Europe .

Maharishi A Brand with a pan euro presence

facing issues with their presence
in India and with the footfall on

Ayurveda
their website both in India and
Europe India and Europe .
About
The beginning of Ayurvedic company
Maharishi Ayurveda harks back to the
time when Swami Brahmanand Saraswati,
Shankaracharya of Jyotirmath, preached
that ‘life is bliss’, and that ‘life reflects itself
in suffering and stress when people do not
accord with nature.’

Maharishi Mahesh Yogi took it upon

himself to spread this message, along
with propagating the Vedic sciences like
Yoga, meditation, and Ayurveda.
The problem The ASK
The brand has a very weak presence in India with We are required to build an online experience from
a limited footfall on the website and needed to scratch for both the Indian subcontinent and Europe.
capture a wider audience over Europe as well.
understanding the difference of user behavior in
both countries and creating an inclusive experience
respectively.

Key Metrics
FOOTFALL RETENTI ON O RD ER FREQ UEN C Y S E GR E GAT E D DAT A CAP T U R E
 Process flow
The process flow For Maharishi was the first time I saw a live action project work
from the beginning of it. It has been a long process with some of the steps going
on parallely and a lot of back and forth.

Analysis Primary investigation secondary research

we as a team sat and chalked Staging scenarios and Pulling up facts and identifying
out the bugs and the features extracting people’s response trends of the premium ayurveda
of their current experience so as towards ayurveda, their market to bring us up to speed
to retain all that’s good and add awareness towards Maharishi with it along with parallely
on to the experience. Ayurveda, and their direct educating self on the principals
opinions on it of ayurveda and yogic culture.
 Analysis & Ideation Structure and Design
Analysing the position of the
wire-framing
client feedback
brand, and people’s perception Moving to putting all that thought
of it & ayurveda. thereafter and plotting it as a wire-flow and
ideating the best possible then low fidelity wire-frames.
Design
structure for the website.
client feedback
....
 MA AROUND THE
Principles of ayurveda
Ayurveda describes three fundamental universal Ayurvedic medicine is based on the idea that
energies which regulate all natural processes on the world is made up of five elements — aakash
both the macro-cosmic and microcosmic levels. (space), jala (water), prithvi (earth), teja (fire),
That is, the same energies which produce effects and vayu (air)
in the various galaxies and star systems are
operating at the level of the human physiology A combination of each element results in three
in our own physiology. These three universal humors, or doshas, known as vata, kapha,
and pitta. These doshas are believed to be
energies are known as the Tridosa.
responsible for a person’s physiological, mental,
and emotional health

“Vayuh pittam kaphasceti trayo dosah samasatah !!”

vata pitta Kapha

Ether + Air Fire + Water Earth + Water

Maharishi ayurveda apart from its products and therapies values sharing the ayurveda gyanam that
they so meticulously collated, so that the user makes an informed and appropriate choice that adds
on to his betterment one such way of their doing this is the dosha quiz and therefore it was imperative
that we understand how this particular segment of ayurveda works out.
 Maharishi Mahesh Yogi,
Original name
Mahesh Prasad Varma

Born 1917, Jabalpur, India Died Feb. 5, 2008,

Vlodrop, Neth, Hindu religious leader who
introduced the practice of transcendental
meditation (TM) to the West.
 TYPOGRAPHY AND COLOR GUIDE
The type used for heads is play-fair display to give it that rich and classy
feel paired with inter that is a clean font for the web.

The Color scheme is very earthen and natural to support the already
existing brand personality
 GOALS PAIN POINTS

01. To find products that are 01. Does not have enough time to
natural, organic and consume time taking
accessible concoction

02. To make sure of the 02. Authenticity and lack of

authenticity and the information on the relevant
genuinity of the products item
Maya Malik
Corporate fresher, 23, Female 03. wants to make sure that the
products are easy to
Maya i s an a mbitious 2 3 y/o l iving in consume
Banglore. She l oves e xperimenting and
researching o n different k inds o f alt healt
care m ethods. She s pends a lot of t ime
sourcing and m aking the medicines and THEIR INTERACTION WITH M A BELEIF IN AYURVEDA
concoctions but t his new corporate
What would draw them to MA? What is their ayurveda exposure?
lifestyle wouldn’t allow her to d o so. She
Knowledge, their research and facts
looks out f or b rands t hat a re r esearch
driven and convincing.
Where would they buy MA products?
She is an ideal TG as she would buy them off
the website.
Education: MBA

Languages: Telugu, Hindi, English, French

Comfort with technology: She is very

comfortable with mobile and internet
usage.
 GOALS PAIN POINTS

01. To find products that are 01. Stores close to his house do
natural, organic and not have MA or ayurvedic
accessible products

02. To cater to his and his wife s 02. He is not comfortable with e
health need commerce platform and
technology
Dr. Vishwak Sen
03. Wants to make sure they are
Retired Professor, 67, Male subscribing to the right 03. They can’t afford the long
product duration of ayurveda
Dr. Vilas is a retired professor who now lives
comfortably with his wife in nagpur and his
kids live in the US. Both Dr. Vilas and his wife
are very health c onscious especially due
to t heir heart and d iabetic c onditions THEIR INTERACTION WITH MAPR BELEIF IN AYURVEDA
respectively. They avoid eating out but still
What would draw them to MA? What is their ayurveda exposure?
are looking out f or h ealthier choices a s
Knowledge, trust in name, Maharishi’s
their age m akes them s usceptible to
association
diseases and ailments nevertheless.
Where would they buy MA products?
They would ask their kids or grandchildren to
Education: PhD help them figure out if they do not find it
accross a physical store
Languages: Marathi, Hindi, English (poor)

Comfort with technology: Not very com-

fortable with mobile and internet usage.
Can use Whatsapp as he communicates
with his kids through that
Wire flow India
Note s and Low fed scribble s
These are a few relevant notes and low fed
paper wire-frames that can give one an idea
about the process. These were created for
internal discussion and feedback.
01 About us
Covers all important sections
specially about the brand that further
moves to those specific pages.
About us

Most of the sections that the page

has redirect to another with only a
few info to be static and limited to the
page
01 PDP
The product description page
has all relevant sections to each
product.
 The Page has many sections with Gyanam
so as to seize all opportunity to convert a
potential buyer into a sure one.
PDP
03 Home page
The home page that is the centre
of all actions to be performed and
pages to be visited.
 The home page had the requirement
to cover some gyanam and about
the brand along with a fair amount
of product placing and promotion.
or a combination of the two.
H ome page
03 Research page
A page mainly for professionals
with all the research details and
more.

+ pop up
05 Gyanam page
MA has a lot of Ayurveda gyan that
they wish to share with their users.
This page consists of that.
 The MAK PDP

The Product description page for MAK (being the hero product) is different
than the rest odinary products and hence has a significant amount of
information to convince the audience.
 The Gyanam page

The gyanam page comprises of all the knowledge that the brand
wants to impart to the general audience, as for the experts and
professionals there is another page
 The About us page

The about us page comprises some of the most important sections for
the brand like the principles, timeline, what makes them stand apart as a
brand and ideology.
 The Generic PDP

The Product description page for other products (amlant) is the generic
framework of the rest ordinary products and hence has a significant
amount of similarity in structure it is a different variation to raktda.
 The Dosha quiz

The Dosha Quiz form that entails three sections of three

different types. The approach towards the form might
change but the logic remains the same.
 Dosha quiz Type-form

The Dosha Quiz is divided into three sections Vata assesment,

Pitta assesment, and Kapha assesment. As soon as the user
checks the answer the screen moves on to the next question
if in case they need to go back there are two pg up and pg
down buttons at the bottom of the form.
 The Dosha quiz result

The Dosha Quiz Result is an extensive report on what

percentage of which dosha are you and the traits that you
posses and the precausions needed to be followed along
with the relevant product placement at the end.
02.
Mapro A Brand that makes all happy
with its Jams and gardens
needed a smoother and more
engaging experience for their

website
users.
About
Located around the idyllic hill-town of Panchgani in Western of precooling 20 MT of fresh fruits and produce chocolate. Its
India, Mapro Foods manufactures Fruit Jams, Fruit beverage food park is open for all guests looking for delicious treats.
concentrates Crushes and Squashes, and Fruit Bars. With an
annual processing capacity of around 30 thousand MT, Mapro The company has grown organically over the last five
is a market leader in Western India. Founded in 1959, The decades with sustained profitability. Known for its quality and
company has grown organically over the last five decades innovation, Mapro has been built on its founder’s philosophy
with sustained profitability. of developing products that are wholesome, nutritious, value
for money, and imaginative.
Started the first self-owned factory in 1989 and then set up
state of the art cold storage at Wai, in 2005, which is capable
The problem The ASK
The brand has a very weak online presence
To unify and create one website that
and for a few products is physically limited
includes all the facets of Mapro and
to a small area of the north western india.
imparts all their information to the the
now that the brand has decided to revise
people. The website needs to understand
some of its policies and better its reach
the values of the brand and create a
they require a website that connects with
personality for it that resonates with the
their loyal audience but also brings in new
user.
consumers

Key Metrics
FO O T F A LL RETENTION ORDER FREQUENCY M AP R O G AR DE N E X P E R I E NC E
 Timeline
The client in this particular project has a very tight timeline given we are the
ones doing design, photography and content for them. The POC from Mapro
asked for a UX timeline that spans for 4 - 6 weeks.
Notes and scribble
The initial approach towards Mapro was to
go all out. That was being penned to be
discussed later.
 Process flow
The process flow or Mapro was also essentially similar in structure it was just
the change of plans on the client’s end that brought about some change in the
system.

A nalysis secondary research Primary investigation

We mapped the character, bugs Pulling up facts and identifying Staging scenarios and
and the features of their current trends in the jam and condiments extracting people’s response
experience so as to retain all market , perception of Mapro in towards Mapro, their
that’s good and add on to the the audience and a 360 look at awareness towards the brand,
experience. what Mapro does, stands for or and their direct opinions on it
provides.
 Analysis & Ideation Structure and Revisited wire-framing
Analyzing the position of the wireframing approach
brand, and people’s perception
Moving to putting all that thought client feedback
of it & interest towards the
and plotting it as a wire-flow and
condiments. Thereafter, ideating
then low fidelity wire-frames.
Design
the best possible structure for
the website. client feedback
....
 GOALS PAIN POINTS

01. To take his family out on trips 01. He doesn't get time out of his
and spend time with them busy schedulk

02. To cater to the interests and 02. Everyone in his family has
needs of his wife and different likings and
daughters contraints due to the age
difference
Gopal kishan 03. To take care of his elderly
Software Engineer, 42, Male parents and their health
needs
Gopal is a software engineer who lives with
his joint family in Pune. He has two (diabetic) 04. To find the best offers and
parents, his spouse and h is t wo daughters deals to buy in bulk for the
(14 & 1 2 y/o). H e has g rown u p in P une and
family of 6
has v isited P anchgani & M ahabaleshwar
often with h is f amily. they’re a re l oyal t o
Mapro. Nostalgia is attached to it. He hasn't THEIR INTERACTION WITH MAPRO BUYING HABIT
been able to v isit r ecently due t o his tight
What would draw them to Mapro? What do they like to buy?
schedule. Aspires to travel but can’t afford to
Experiences, flavour, nostalgia, affordable Family trips, spends mostly on
go to expensive places, hence he gave them
the best possible experience close to home. goods his family’s necessities, food

Where would they buy Mapro products? Where do they shop?

Education: Bachelors in Technology
Experiences in the Mapro spaces, Super markets, E-commerce this is
Concentrates, Falero, Khakhra because he is constantly looking for
Languages: Marathi, Hindi, English
deals and discounts that help him
Which Mapro products would they purchase?
Comfort with technology: He is pretty make bulk purchases on a budget
Supermarket, Amazon
comfortable with mobile and internet considering he is taking care of a
usage and uses ecommerce platforms to family of 6
order sometimes
 GOALS PAIN POINTS

01. To give her kids tasty food 01. Lack of variety in food and
and spend quality time with flavours can bore her kids
them sometimel

02. To serve good food, drinks to 02. Can't spend time with the
her guests when they visit guests if she spends too
much time cooking
Chaaya Dutt
03. Wants to recreate recipes
Home maker, 47, Female she sees on her favourite 03. Kids are always busy so the
cooking show only time she gets with them
Chaaya is a home maker and a mother of is during snacks and dinner
3 from Nagpur. She loves s pending t ime
with h er k ids. H er k ids are busy with t heir
lives w hich m akes i t hard to s pend t ime
with them. The only time she gets to spend THEIR INTERACTION WITH MAPRO BUYING HABIT
with t hem is w hen she's cooking for them
What would draw them to Mapro? What do they like to buy?
or eating with them so she wants to make
Variety, flavour, memories, bonding Groceries, chocolates, home
it w orthwhile. She also e njoys watching
decor, clothing
cooking shows, hosting h er l ady friends Where would they buy Mapro products?
and embroidery in her free time. Super market, local stores or her spouse/ Where do they shop?
children might order it from Mapro website She shops primarily in the super
Education: 10+2 market or local stores. She shops
Which Mapro products would they purchase?
from e-commerce sites like
Languages: Marathi, Hindi, English (poor) Concentrates, Jams/ Spreads, Falero
Amazon sometimes but with the
help of her spouse/ children and
Comfort with technology: She is not very
comfortable with using a mobile for only when she has tried and tested
something other than for calling or mes- the product before
saging
 Understanding shopify for Mapro
Limitations:
Although Shopify Support is able to support a wide range
of basic customizations, apart from the following tasks:

Editing the checkout and cart

Customizing or troubleshooting themes that contain

significant code changes (Only elements can be tweaked)

Installing, removing, or modifying third-party

apps

Customizing or troubleshooting content

added via the rich text editor

Editing images (including cropping, adjusting color

profiles, removing backgrounds, etc.)

Implementing changes that provide misleading or

deceptive information to customer

Custom translation services (including order

printer and e-mail notification templates)

Create product category levels

01 PDP
The product description page has all
relevant sections to each product like
recipes, comparison, ingredients etc.
PDP
02 PlP
The product Listing page collapsed
and with filters has all relevant input
options that make the experience
smother.
 PDP Variants
Tried taking a fun lighter approach towards the
PDP these two variants were a very first draft
basis designs
 The Jam PDP

The dedicated ‘JAM’ PDP has very detailed view of how mapro makes and
positions their product from sharing consumer experiences to making
valuable promises this page has all.
 s
gres
n Pro
rk I
Wo
This is the second variant of the same jam PDP we saw previously.
Comparatively toned down on the playfulness as there are other sub
brands that would not work along the similar language.
 The Gardens page

First draft of the dedicated Gardens page talks about their gardens in a
360 POV where almost anything a person has to enquire is solved along
with sharing the experiences others took from there.
 The Jam PLP

The dedicated ‘JAM’ PLP has retained a few sections from a Jam PDP that
are generic for all jams it also has all the filters applicable to jams.
 The About us page

The About us for Mapro consists of the nostalgic brand story, info, about
their sub brands, their gardens, and their top management lead so as to
be as transparent and warm as they can be.
About
SMSA has been a client for long and
Noor has been working and delivered on
multiple sub-projects and the main SMSA
app and its adjoining dashboards.

SMSA Express has been one of the leading

name in the Saudi and now international
logistics market since 1994.

SMSA provides its distinctive services

to numerous organizations and
governmental entities, which depend
on time sensitive service and security
compliance. It is proud to serve businesses
that demand a high level of care and
quality.

It is licensed to handle dangerous goods,

accredited as an authorized shipping
agency and licensed to transport via
transit (TIR).

The queuing project is a small project

that falls under the scope of uplifting the
customer experience at a SMSA service
Centre while queuing for various actions
to be performed.
 understanding the existing idea

Quematic is a queuing software solution To understand more about how all of

company that provides custom and pre- their system works i requested for a
build queuing solutions to all businesses demo and took a complete demo of
that require it. the software over a zoom meet.
the mobile WEb app

Ticket Flow
feedback Flow
Locate packages Flow
 Other misc. screens

Other projects like Flo, Wave axis, DDL, SMSA mobile etc were some that I
worked a little on too, mostly the UI as the the UX and most part of UI was
already accomplished.
 Flo - Landing Page

The Flo landing page talks about a big hero product in comparison to a
competition this landing page is for a limited time period on a promotional
agenda.
 Wave Axis - service page

The Wave axis services page talks about the particular software
services this company provides this one page is about ‘Computer vision
application’.
 Wave Axis - Home page

The Wave axis home page has all the information needed to know about
this software brand, from their portfolio to a sneak peek at their services.
 References

https://getnoor.com/
https://mapro.com/#1
https://maharishiayurvedaindia.com/
https://www.flomattress.com/?utm_source=google&utm_medium=cpc&utm_
term=flo%20mattress&gclid=Cj0KCQjw1ZeUBhDyARIsAOzAqQIluGZFGRppn3y65pw9x6hT8_
NxcF6L6K8ZCqyAHlfFYOBVcYsv4kAaAjhiEALw_wcB
https://www.ayurveda-products.eu/
https://xd.adobe.com/view/e167b027-8aff-4b29-9999-81b6b3313dfc-b434/variables/
https://mapi.com/
https://www.smsaexpress.com/home