Website Redesign

WEB PLATFORM REDESIGN PROPOSAL

House Doctor group

by Benita Ilgenstein 280707@VIA.DK March/ April 2019

0 1

02 Methodology

Visual identity audit Typography Color scheme Photographic style Logo

07

Content audit Product categories Design implications

09

Competitor analysis

1 1

1 3

Design Low fidelity sketches High fidelity mockups Site explanation

1 9

Additional thoughts Useability Multiple devices

20

2 1

23

24

Table of Contents

Press release

1

Sources

03

Sitemap

Data Video content

Google certificate

M E T H O D O L O G Y I chose to do the website design for House doctor’s brand Monograph. Currently, all House doctor brands are exclusively available to retailers, thus the major change I decided to make was to build a b2c website for Monograph.

As Monograph is an already existing brand I started with conducting a visual identity and content audit by collecting all existing design assets and looking at which implications the findings could have on the website’s design. I continued by researching the market and taking a look at two competitors of Monograph and how they designed their websites. I proceeded by visualizing a structural plan for how the website’s pages will be laid out and organized in the form of a sitemap.

To start of the design process I sketched low fidelity wireframes, which I then translated into high fidelity mockups. I briefly explained the purpose of every site sketched and went into detail with the purpose behind site 11 (Inspiration post) and 13 (Feedback).

Lastly, I am mentioning additional thoughts on usability and conventions as well as responsive design across multiple devices and provide some data on the effectiveness of video content.

2

VISUAL IDENTITY AUDIT Typography

BrandonGrotesque-Bold • Used in headings

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0

BrandonGrotesque-Medium • Used in headings & subheadings

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0

BrandonGrotesque-Regular • Used for body texts

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0

BrandonGrotesque-Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0

• Used for body texts

SchoolBook-Italic • Font of mission/ vision statement

3

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 0

Color scheme

MINT

GREY

R:

217

R:

238

G:

224

G:

238

B:

229

B:

238

YELLOW R:

242

G:

235

B:

182

ROSE R:

230

G:

216

B:

214

Overall Monograph is charactarized by a pastel color scheme that is broken up from time to time by metallic gold accents.

4

VISUAL IDENTITY AUDIT Photographic style

Photography adds an element of consistency and depth to any brand identity. Monograph uses two different kind of images, first simple product shots and second, more relavant to the brand identity, well structured flatlays.

5

Logo Serifs Delivers a sense of elegance and tradition.

Gives the impression of a rich heritage, however styled with contemporary colors they become ultra modern.

Emphasizes Monograph’s approach to bring back traditional handwritten notes and creating a break from the screen.

Letterspacing The fairly large letterspacing in combination with the Serif font, creates a desirable and high end look.

Office essentials for everyday entreprenuers and creative thinkers

White • Used for sales material • Used online • Used on products • Used on colorful and dark backgrounds

Black • Used for sales material • Used online • Used on products • Used on light backgrounds (white)

Metallic gold • Only used on textured products

6

CONTENT AUDIT Product categories

2202 PRODUCTS

7

CATEGORIES

13

S U B CATEGORIES

Office decor • Calendar & watches • Various • Noticeboards Office tools • Stickers • Rulers • Clips • Tools • Magnets • Pencils & pens Notebooks Storage Giftwrapping Sleeves & pencil cases • • • •

Cards Tape Ribbon Wrappingpaper

Travel accessories

This product and category width is compatible with two header options for the website, which both have their respective advantages and disadvantages. After evaluating those it was decided to go with the first option.

1. Here the subcategories are shown as a drop-down menu as soon as the user hovers her curser over the main category. The instant feedback of the action will be given by displaying the category and if present the subcategory dropdown by in a light grey color. The main advantage of this option is that the user can inform herself over all available subcategories without leaving the home page. Then again this ways doesn’t directly expose her to as many products, she might have bought impulsively.

7

2. With this design option, the user has to click on the main category, which will lead her to a different page, which displays all products within the main category and the subcategories are more of a filter option at the top. The downside of this is that the user doesn’t know, which main category has subcategories and under which main category which products are located. The advantage over option 1 is that the user is exposed to actual products as soon as she clicks on a main category.

1.

Design implications

2.

8

COMEPTITOR ANALYSIS Wireframes

Moleskin is an international stationary brand. On their homepage, they are showcasing 7 product categories: Planners, notebooks, Moleskin+, bags and accessories, device accessories, pens and pencils, and books.

The brand is aimed at creatives of both genders and it was able to integrate technology into their tradiotonal offering over the last years.

9

Wireframes

JO & JUDY is a stationary and lifestyle brand from Germany.

Their home page is held in a clean, minimal and pastel look - similar to Monograph.It features just four product categories in its header: Stationary, jewelry, home, and gifts.

The home page displays a number of style images - showcasing their product in aesthetically pleasing flatlays.

10

SITEMAP

WISHLIST

HOMEPAGE

2.

BASKET

3.

1.

DECOR

TOOLS

6.

Calendar & watches

Stickers

Various

Rulers

Noticeboards

Clips

NOTEBOOKS

Tools Magnets Pencils & Pens

ABOUT

INFORMATION

Our story

7.

Shipping

Team

8.

Customer Service Terms & Conditions Imprint Data Protection Terms & Conditions

11

INSPIRATION

9.

10.

Posts in this category 11.

COMMUNITY

12.

Feedback

13.

#sharing

14.

LOGIN

STORAGE

4.

SEARCH

CASES

5.

WRAPPING

TRAVEL

Cards Tape Ribbon Wrapping Paper

X The purpose of the numbers is to simply be able to identify the wireframe we are talking about and to keep track of and indicate how many templates need to be designed/ coded in the end.

12

DESIGN

Low fidelity sketches

1.

Homepage

The homepage is the page the user will land when she enters the brand’s URL. It is the first thing she sees, thus it should offer an overview and give a clear idea about who the brand is and what it does.

This is achieved by placing the main categories in the header so users who came with a clear intention for one product can easily find it. Underneath there is a slider displaying inspirational photo and video content of Monograph products, so users without intent can be encouraged to purchase those and users with intent might get inspired and purchase those impulsively additionally.

11.

Inspiration post

The idea here is to partner with home decor influencers, who are provided a range of Monograph products, which they then use to decorate their home office.

Then they film a room tour which Monograph can embed and promote on their website.

Ideally, the user will watch the video or parts of the video and aspires to be like the influencer or gets inspiration on how the products will look in reality. Directly under the video, the products that can be seen in it will be listed so they can be instantly purchased while the consumer is still inpsired/ emotionally involved in the video.

13.

Feedback page

This page can be accessed through the footer and gives the users the opportunity to get involved, while it is an easy source of data on consumer needs for the company. The user will be asked to make a suggestion on what products she wants Monograph to come out with next.

With the right text, accompanying the form the user will also feel valued by Monograph and personally involved with the brand, which tends to increase brand loyalty.

13

Low fidelity sketches

6.

Product overview

No matter which main or subcategory the user clicks on, she will be led to a page displaying the products in the respective category. Thus this wireframe is one of the most important templates for the website.

The initial image the user sees is a product shot, as soon as the user hovers over the image a flat lay styling image, in which the product is integrated, is going to be displayed. This way the user is clearly informed which product she is looking at, and then gets insight on how the product will look in its natural environment.

10. Inspiration page This page is accessible through the footer and is a collection of all the inspirational posts (X) on the website.

The video widgets are active which means the video starts playing without volume as soon as the user hovers over it. When it is clicked, the site of the respective inspirational post opens.

Over the video widget there is a banner which states the instagram name of the Influencer as well as saying its their room tour.

Inspirational posts do not have to be videos, they can also be images of peoples desks for example.

3.

Shopping basket

This is the checkout page the user goes to, to finalize her order. On the right, she will see a product shot of the products in her basket, next to it the description, followed by the quantity she is about to order and the price. Between those two there is also an option to delete the product out of the basket or save it to the wishlist.

In the bottom right corner, the total price and shipping are displayed as well as a button to place the order, which will then lead you to a page asking for your personal information.

14

DESIGN

High fidelity mockups

3.

1.

15

Shopping basket mockup

Homepage mockup

High fidelity mockups

10.

Inspiration page mockup

When hovered over, the picture changes from a product to a style shot.

6.

Product overview mockup

16

DESIGN

Site explanation

11.

Inspiration post mockup

The idea behind this is a holistic approach to online marketing. An influential Blogger with a great brand fit is selected and can pick a number of Monograph products to decorate their office or home office. In exchange, depending on their largest platform, they film an office tour (YouTube) or take pictures for their Blog post or Instagram. In this content, they mention and promote Monograph.

Furthermore, bloggers can set a backlink to this site on their blog post or in the description of their YouTube video, which will likely lead to increased traffic on Monograph’s webpage.

Monograph can use this video or image content created by the bloggers on their website, as shown in the mockup above, and with a direct call to action (“Shop the look”) create a motivation to complete the desired action in this case purchasing the products featured in the video.

17

To develop this idea furtherly, the marketing department could also let bloggers choose a product of the other subbrands of House doctor to incorporate them into their content. Then they could place backlinks on the Monograph website to the respective other websites such as House Doctor. (In the hypothetical situation every subbrand has its own b2c webshop.)

Here is an example of a video created by the Blogger Chriselle Lim in cooperation with the American furniture brand Capsule. This is the kind of video I suggest Monograph to do with Bloggers from their target countries. https://www.youtube.com/watch?v=eC h A 5 _ e M x o k & l i s t = L Lf CrW Hg e c z _ Zw y 9 0 To k e u d w & i n d e x =2 & t =2 8 8 s

Site explanation

Feedback page mockup

Feedback is an essential part of any business and the IoT makes it very easy for companies to collect and acquire feedback and recommendations from their customers - all for free. First of all, it should be every brand’s main objective to satisfy customer needs and a feedback section is a great way to check if this is actually achieved and if not where it can be improved.

I believe this will be especially beneficial to Monograph, as their customer are “creatives and everyday entrepreneurs� and will feel personally valued for their talent - the text next to the form is supposed to foster that feeling. By having this form always available at the website (can be accessed in the footer) it is voluntary to fill out and will not annoy customers as if it would be a pop-up window.

Additionally, it increases the online support services for customers and thus boosts credibility. And finally, Listening to customer feedback makes customers feel involved and important. When asked for an opinion on a product or experience, the customer will feel valued and treated almost as a part of the creative team. By asking your customers to provide feedback you make them believe that their opinion is truly valued.

Monograph should gather the data generated through this and use it for future product development.

13.

18

ADDITIONAL THOUGHTS Useabilty & Multiple devices

19

Usability and conventions

Multiple devices

Sticking to conventions decreases confusion. Usability should always be the key objective while designing a website and by sticking to conventions usability is increased. When you ask people where they would be able to search for something on a website it is likely they will say either in the top or left corner of the screen. Other usual conventions are that links are blue or underlined and that the navigation menu is at the top left of the page if the navigation is not focues around a centered header.

By using such centered header with dropdown menus and by placing the access icons to pages such as the shopping basket, account, and wishlist in the top right corner I stuck to conventions in order to increase useability.

The website is supposed to have a responsive design which automatically detects the type of screen being used and displays the site accordingly—doing things like stacking text and photos vertically on a smartphone being held upright. Users consume content across multiple devices and if the content is not displayed correctly on one of them, this can easily lead to confusion on the user’s side and change the perception and credibility of the brand in the user’s mind. Especially if Monograph is pursuing the Influencer strategy it is likely potential customers will find out about Monograph through Social Media which is mainly consumed on mobile devices, in this case, it is even more important to have a responsive website design.

DATA

Video content

100 % more conversions were tracked globally on YouTube from 2017-2018 than in the time frame of 2016-2017.

Brand collaborations with YouTube creators are 4X more effective at driving lift in brand familiarity than those with celebrities

Video content Today video is a vibrant and popular part of the online experience. Connecting with customers through this versatile medium can open up valuable advertising and content marketing opportunities. The key goals are to improve web traffic, win sales and educate users. By letting the content be produced and published by Influencers on their main platform Monograph meets the first goal of improving web traffic, sales will likely be won through the direct call to action under the video as well as the influential power the Influencers have on their audience. Lastly, the user is getting “educated� or in this case more inspired on how to use theMonograph products in everyday surroundings and how they look in their natural habitat (an office).

Various data collected by Google think (see on the left) proves just how effective YouTube video content is and how beneficial it could be to Monograph if the Influencer room/ office tour strategy will be implemented.

7.300 years of watch time of apartment tour/ home tour videos in the past two years.

20

PRESS RELEASE Headline Attention catcher, also subject line Information Educational, inspirational INTEND This type of newsletter gets distributed to a number of journalists, publishers, bloggers, etc. the aim is to get them to include the brand (Monograph) in their next publication. Thus, the purpose of the newsletter is to inspire and also supply ideas for possible future publications. In PR Agencies often public events like a royal wedding are taken as an event to send a newsletter out to distribute any kind of products related to weddings. In this case, this is done with the new statistics of the increasingly remote workforce in the UK, thus it would make sense to send the newsletter in this exact form to the UK Segment of the mailing list.

The statistics/ event encourages the journalists to write about that event/ fact and then include the brand rather than exclusively writing about the brand, which is increasingly unlikely.

Most publications are very visual thus it is always required to send a link to a media base where high-quality images for print and online use can be easily acquired. Lastly, a contact for sample requests in case of in-house media productions is provided.

Call to action Link to Mediabase http://media.housedoctor-group.com

Brand description

Content Specific to newsletter topic

Contact information Possibility for personal interaction

unsubscribe option Legally recquired

21

THE DEATH OF THE OFFICE THE RISE OF THE LVING ROOM

55%

50%

of millenials regaulary work from a home office

of the UK workforce will work from home by 2020

DOWNLOAD PRESS MATERIAL

At Monograph we create office supplies and storing solutions for the creative souls. Our mission is to help you bring out your inner creativity. Here at Monograph we love creativity and playing!

Responsive mobile design

Monograph caters perfectly to the trend off people working more and more from home. Its products are stylish, decorative and functional thus can make any room into an office. Whether that’s a seprate dedicated workspace or a living room.

For further press requires or sample requests please contact: Max Mustermann maxmustermann@housedoctor.com +45 55 66 77 88

unsubcribe

Full desktop view

22

SOUCRES

https://www.thinkwithgoogle.com/data/performance-video-ads-increased-conversions/ https://www.wgsn.com/blogs/the-millennial-home-economy-consumer-homes-into-work-spaces/?utm_campaign=wgsnsocial&utm_content=PostID-00439n4e7g0vb0p&utm_medium=social&utm_source=linkedin&fbclid=IwAR0--edlKXGkk7RUe6XHV9IT4kUSkeTnUYgVBCioaTTglTvqLPRBlCXRXpU https://www.thinkwithgoogle.com/advertising-channels/video/authentic-lifestyle-videos/?fbclid=IwAR2e8ouIdCV8T3ajEyyLvcgm6k0LqHX6poAwrmeAauhoksWBuI833VvhXoU https://www.thinkwithgoogle.com/data/performance-video-ads-increased-conversions/ https://www.thinkwithgoogle.com/data/youtube-creator-collaboration-statistics/

23