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