Site Redesign Proposal for Marni

33
marni.com website redesign proposal Course: CN6042 - Web Design & Development - Fall 2014 Professor: Dr. Maria Roussou Students Lida Rekoumi – 173526 Christos Devaris Elena Katsara 12/16/14 MARNI WEBSITE - REDESIGN PROPOSAL 1

Transcript of Site Redesign Proposal for Marni

marni.com website redesign proposal

Course: CN6042 - Web Design & Development - Fall 2014

Professor: Dr. Maria Roussou Students

Lida Rekoumi – 173526 Christos Devaris Elena Katsara

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 1

About the brand Marni is an Italian fashion label founded by Consuelo Castiglioni in 1994, who remains as the label's designer. Today, the company produces: •  ready-to-wear clothing

(womenswear, menswear) •  handbags •  jewelry •  eyewear •  perfumes

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 2

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

"   European-inflected bohemianism

"   quirky, feminine, off-beat, funky "   idiosyncratic prints and

vintage-inspired shapes and fabrics

"   juxtapositions of texture " colorblocking; a palette

focused on gray, beige, and blue, in which bright colors are interspersed

"   unusual shapes, such as bell hemlines, gathering, asymmetry, and large volumes.

About the brand By the end of 2012 the majority in Marni was acquired by Renzo Rosso, President of OTB Group, the holding group of Maison Martin Margiela, Viktor & Rolf, Diesel and Staff International. Marni sells clothing in sixteen countries; boutiques locations include London, New York City, Los Angeles, Las Vegas, Beijing, Shanghai, Sydney, Moscow, Kuwait, Hong Kong and Tokyo. Online sales began in 2006 with the brands’ online store www.marni.com.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 3

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

The concept Marni aims to attract both clients and fashion lovers to marni.com. The brands’ clients are mainly women that fit the profile of a busy, on-the-go woman with a full everyday life. This type of woman

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 4

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Motivation The existing websites’ layout is very complicated and does not have a clear distinction between the shopping area and the experience area. The goal of the brand is to make it easy for the user to chose weather to enter the shop or the experience, more informative area of the website depending on their needs.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 5

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas A Persona is a description of a character that the site will be designed for. Acts as a focus for design. A persona encapsulates the most critical behavioral data in a way that designers and stakeholders can: "   Understand "   Remember "   Relate to Personas help the designer of the website to focus on the needs of the user and map in the best possible way the path potential users will follow.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 6

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas (Persona 1)

Carolina Mazzanti Art Gallery Curator, Milan Moto “ It’s all about art! I express myself through it and so I want my style to do” Identity "   38 years old "   She lives in Milan, Italy but travels a lot "   Married (2 children) "   She is very familiar with technology and she uses it in her everyday life. Her

“best friend” is her Blackberry and she never leaves her house without her iPad.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 7

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas (Persona 1)

Back Story Carolina is a very busy woman. Married and mother of two little children but also a very successful Art Gallery Curator. Her everyday life is divided between her those two equally important for her roles. After finishing her Bachelors Degree in Fine Arts in London, she moved in New York where she completed her studies with a Masters in Arts Management. She lives in Milan with her family but most of the time she travels around the world because of her job.

She is always on a hurry and she doesn’t have time to shop for herself. She cares a lot about her outfits and she wants to feel stylish and up-to-date yet comfortable.

12/16/14

MARNI WEBSITE - REDESIGN PROPOSAL 8

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas (Persona 1)

Motivations "   She has no time to go shopping "   She loves art and clothes that fit her

personality "   She is a great fan of MARNI and a

loyal customer because she believes that fashion fades, only style remains the same and the brand totally supports this idea.

"   “What you wear is how you present yourself to the world, especially today when human contacts go so fast. Fashion is instant language.”

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 9

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Frustrations "   Carolina has no time to shop.

Therefore she goes online to order her favorite apparel.

"   She wants to be able to find easily the path to the final order (selection of design, size, add to bag, payment)

"   She is used to shop online but she always wants very detailed instructions of the procedure.

"   She shops very often so she aims to find the latest trends online. For her, her husband and her children.

Personas (Persona 1)

Use case scenario

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 10

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Shop Women’s

New Arrivals

Places Order Buys Items

Personas (Persona 2)

Lukas Beck Fashion Editor & Blogger, Berlin Moto “ I am a fashion addict! I love to search, find and spread the latest news. It’s not just my job but my whole life” Identity "   Male "   30 years old "   Single "   Fashion editor & blogger

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 11

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas (Persona 2)

Back Story Lukas lives and works in Berlin, Germany. He always wanted to become a Fashion designer because of his love in Fashion but he wasn’t as talented in designing as he was in writing so he studied Journalism. Loyal to his eternal love, he became a Journalist for fashion and worked in famous Fashion magazines. He travels a lot to attend fashion events and shows and he doesn’t have any free time. Because of his job he hasn’t been in a relationship for a long time. Lukas is not that familiar with technology as he hates mobile phones (he uses his phone only to call). He owns a personal computer but he uses it only to send e-mails and navigate the web in research for news).

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 12

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Personas (Persona 2)

Motivations "   Lukas is always in need for the latest

news from all the famous brands and in constant research for triggers.

"   He doesn’t have much time so he wants to find everything he is looking for easily.

"   He believes MARNI is one of the most interesting brands of the fashion market and must be followed.

"   Lukas wants to follow the fastest and easiest path to find information, so most of the times he choses to look on the Official website of the brand instead of secondary news websites.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 13

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Frustrations "   Lukas is not very familiar with

technology and hence not patient when it comes to usability problems.

"   He is looking for the latest news on the Official website of the brand so the “experience” part needs to be visible and updated.

"   He doesn’t like complicated layouts. He prefers minimal and to the point designs.

Personas (Persona 2)

Use case scenario

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 14

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Experience Blog

Usability studies The usability testing was conducted using people who correspond to the personas created for the redesign of the website. The results were the following: •  Users were totally ignoring the experience area of the website (collections,

marni group, waffling, anticamera, fragrance and library) •  They all had the same reaction when the pop-up window for the subscription

to the newsletter appeared. They got disturbed and closed the window without even reading the content.

•  Users that were looking to shop faced he following problems:

1.  On the page of the product list they found the navigation (vertical scrolling) very difficult to use.

2.  On the page of the product cart they wouldn’t find the button Add to Shopping Bag in order to conclude the buy.

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 15

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Usability studies - Homepage

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 16

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Shop and experience are mixed

Too much information for a homepage The naming of the blog(WAFFLING) and the magazine(ANTICAMERA) isn’t familiar to the average user.

The placement of a video on the homepage is not the best choice because it distracts the user from the areas of Interest.

The fragrance area is placed between shop and experience on the top/menu bar and thus loses of its value as a premium Item.

Usability studies – Product list

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 17

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

It wasn’t easy for the sample users to use the arrows in order to see the rest of the products. Vertical scrolling is not a practical way to go back and forth on the product list.

Usability studies – Product cart

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 18

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

The main information of interest is placed on the right side of the item. This layout makes it hard for the user to find the information as the “eye” reads from left to right. All the important information must be placed on the left side.

Usability studies

Card sorting was conducted with a sample from the “target” audience and after long discussions of how they would like to navigate through the website, the results came up with the following sitemap:

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 19

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 20

Homepage

Store Experience

Shop women’s Shop men’s Collections blog Online

magazine Marni Group

New arrivals

Accessories

Bags

Bijoux

Dresses

Shoes

etc.

New arrivals

Shoes

Trousers

Accessories

Shirts

etc.

Fall/winter

Spring/summer

SS15

FW14-15

SS14

FW13-14

etc.

Profile

Shops

Offices

Press

Fall/winter

Spring/summer

Requirements

Requirements are the features that the future website should have in order to cover the needs of the users in the most efficient and user friendly way.

Based on the use case scenarios of the personas created for the marni.com website, we came up with the following requirements:

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 21

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Requirements for Persona 1 – Carolina Mazzanti

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 22

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

1. Shop Women’s

2. New Arrivals

3. Places Order

4. Buys Items

•  Ability to find the button on Homepage.

•  Categorization of products e.g. Bags, shoes, shirts etc.

•  Ability to find size, colors etc.

•  The “add to bag” button must be visible.

•  All information about product, quantity and price must be clear and visible.

Requirements for Persona 2 – Lukas Beck

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 23

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

1. Experience

2. Blog

•  Ability to find the button on Homepage.

•  Ability to find all the information about the brand that he is looking for

•  Latest news on top of page

Homepage

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 24

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

1st level

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 25

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

2nd level

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 26

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

3rd level

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 27

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Homepage

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 28

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

1st level

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 29

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

Carolinas’ sample path

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 30

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

CLICK ON STORE

CLICK ON SHOP

WOMEN’S

CLICK ON

SHOP FALL

Lucas’ sample path

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 31

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

CLICK ON EXPERIENCE

Low-fidelity protypes – Axure development

http://pqy9i5.axshare.com/home.html

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 32

About the brand / The concept Motivation Personas Usability studies Requirements | | | | | Low-fidelity prototypes

12/16/14 MARNI WEBSITE - REDESIGN

PROPOSAL 33

Thank you!