Download - 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