Nordic Noir Tour Report

51

The Website Mockup FIRST MOCKUPS(Studio by UXPin, 2017)The mockup was made by using the hierarchy from the wire-frames and the style from the style tile. The first mockups werecreated with the client’s keywords in mind, the style tile andthe team’s decision of keeping the design simple, having goodwhite space, minimalistic, mysterious and use more imageryinstead of colours. Therefore, the first mockups didn’t have anycolours except for shades of black and white. 52

THE FINAL MOCKUPS On next page you will see the final outcome of the mockups of the website, ready to be developed even further and coded.. With the design process of the mockups and by testing colours, navigations, buttons, the footer and the usability of the website a lot of changes were made along the way. Eventually an interactive / call to action colour was added into the design of the website.53

54

55

56

57

The Admin Panel Mockup MOBILE VERSIONWEBSITE VERSION 58

UI / UX Design (Anon, 2017)The group’s approach to the development of this product was booking system which is a better UX than she already has. Thisto keep the customer in mind and make them first priority. To however, was not in line with our client’s needs, therefore thefollow this concept of development the group has conducted team couldn’t continue on the idea.various research methods in the Discovery phase of DesignThinking (The Interaction Design Foundation. 2017) method to help and The approach for designing the User Interface was to conductidentify customer needs that were previously hidden from our research on the original User Interface and Design of Nordic Noireyes. Tours website. With the help of Google Analytics, CRAP (Deshdeep, 2016) principles and Benchmarking (John Reh,2017) the group wasMany of these research methods are aimed towards the needs able to identify recurring problems with the Visual Identity andof the clients existing customers, such as Google Analytics, User Usability of the original website.Flow Diagram (OptinMonster. 2017) analysis or the Content Audit(Spencer, 2017) to name a few. These identified problems gave the group opportunities one can build on to convey the message of Nordic Noir Tours with aWith the help of these methods the research team was able new visual identity and website.to gain insight on the existing customer base, what are theirneeds, what do they like and for example: how do they browsethe Nordic Noir Tours website? Analysing these researches gaveus opportunities to build up on with the Design of the website.The field of User Experience contains many different paths. Dueto this fact our group had to carefully select the methods thegroup has been working with to fit our client and its customers.In the interview, the group had with the client in the first weeksof the development process the group has gained opportuni-ties from first hand. Many of our development ideas came fromthe first meeting, where the client presented us with her needsfor the project to be successful.The group wanted to only implement business and designchoices that best match the customer’s needs, for example a 59

60

To conclude the main findings, the survey identified: Imagery and pictures are a high priority of satisfaction for the customers. Customers tend to learn about the activity before they attend The amount of people who read blog posts on travel websites are almost equal, with the answer ‘Yes’ in the lead.The group conducted an online survey through the customers Customers highly agree that the prices of tours have toand fans of Nordic Noir Tours where the group has addressed be clearly visible and in the centre of attention.important questions on the content, the design of the website, Based on the Content Audit the group was able to refine theand about tour companies in general. Giving us the opportunity Information Architecture (Uxbooth.com, 2017) for the new websiteto work closely with the customers when the group is creating of Nordic Noir Tours. Given that the original website in itself didthe visual appearance and the user interface, some of these not have a complicated Information Architecture, this task wasquestions and answers helped us during the development pro- fairly simple to do so. With the Information Architecture in mindcess. the development team moved on to the process of wirefram-While early in the process this survey couldn’t answer specific ing the new website.questions, instead the group was trying to address more gen- The process of wireframing involved different layouts for theeral knowledge and web design principles with the customers. different kinds of subpages on the website, feedback and in-The questions address general knowledge and preferences terview with the client and presentation of the ideas. Researchwhen it comes to booking an activity, in this case a tour on- about current internet trends in UI design and the reviewing ofline. Specially, what the customers are looking for when they the client’s competitors.are browsing content and what is that makes their experiencepositive or negative with the product. The mockups have been done based on the ready wireframesThe survey has received a great sample size of answers which and the feedback the group has received from the client, andgave the team clear oversight of the important questions. its customers. Furthermore, the mockups were tested two times with the A/B test method in person and online. 61

Costumer Journey Map (WalkMe Blog, 2017)CUSTOMER JOURNEY SATISFACTION Satisfying experience / Selling Point Noric Noir Tours Date: 2017.11.28ROADMAP v 1.0 Costumer Pain point Name: Balazs Korcsog Selling point Purpose: Costumer Journey Map High Satisfying experience / Selling point USER 1 USER 2 Costumer Pain point LowSTARTS HERE ENDS HERE INQUIRY COMPARISON INTERACTION CONCLUSION Phase explanation: The Inquiry phase explains Phase explanation: During this phase our Phase explanation: During this phase we have reached a point where the costumer is reaching out to book the Phase explanation: During this phase we are the key points of the beginning of each costumers are making a comparison brainstorm tour. This is the point where we turn the potential costumer into a fan of Nordic Noir Tours. The user requests describing the costumers experience during and customers journey with our product, the Nordic session between two or multiple choices. a tour by emailing our client, they agree on a time and date for the tour. after booking a tour with Nordic Noir Tours. Noir Tours. Exploring the competitions price, value and proposal they are deciding on what is best for USER 1 USER 2 them. USER 1 USER 2 USER 1 USER 2 1.1: User action: 2.1: User action: 1.1: User action: 2.1: User action: 1.1: User action: 2.1: User action: 1.2: Pain Point: 2.2: Selling Point: The costumer is looking This costumer is a fan of USER 1 USER 2 The costumer wants to The process of booking This is really excited to Nordic Noir Tours is The costumer finds the This costumer is having for an activity Online in scandinavian crime TV get in contact with tours could perhaphs get in touch with Nordic unique in its category process of booking too a wonderful time on Denmark, preferably in Series and is doing a 1.1: User action: 2.1: User action: Nordic Noir Tours to negatively affect the Noir tours, however and offers tours for a difficult and thinks it Noric Noir Tours where Copenhagen where he research about her inquiry more about the costumer experience founds it unpleasing niche market. does not worth hes she finally can be a true lives. Doesn’t know favourite ones: The The costumer is This costumer is doing a tours. due to increasing that she cannot book a time. scandinoir fan and exactly what type of Killing and the Borgen. comparing different research of the different waiting times on reply tour just online, she has discover all the famous activity. She finds Nordic Noir kind of experiences he options she can choose and the fact that the to send an email. 1.2: Pain Points: locations used in the TV Tours Website. can get for hes money related to scandinoir process is not Series. 1.2: Pain Points: in Copenhagen. tours. She finds out that automated or The costumer thinks it 2.2: Pain Points: the market is mostly steamlined. is too difficult to book 2.2: Costumer Reaction: There are too many 1.2: Selling Points: niche and there is not a tour with Nordic Noir options to choose from Some of the TV series much competition. Tours therefore decides “Yes! I have seen this in the city, the she is watching might The costumer discovers not to. location on TV before! competition is strong. not be available for Nordic Noir Tours and 2.2: Pain Points: Oh my god its soo tours on Nordic Noir finds it to be an amazing just to stand 1.3: Selling Points: Tours website. interesting concept. Some of the TV series where she was giving she is watching might that intense interview of The costumer discovers 2.3: Selling Points: not be available for the politics scandal!” Nordic Noir Tours and tours on Nordic Noir finds it to be an The costumer is a fan of Tours website. interesting concept. the Scandinoir TV Series. 62

The customer journey roadmap is a sample of what the group Plan To Publish Contentis expecting a typical user’s journey to be on the redesignedNordic Noir Tours website. The journey is representative. It shows After analysing the data gathered both from research and thetwo of our personas walkthrough on the journey of getting to meeting with the client, a clear weakness existed with the mar-know Nordic Noir and the different kind of channels that a user keting in the company. Since a website was to be created, aneeds to go through to book a tour. good opportunity came up to promote the tours. After some research, a good solution came in mind, that is, the size of theThis analysis allows us to gain insight on the specific selling and company, budget and visual presence on the market, small so-pain points users might often have with our product. As the cial media advertisements are the optimal way to publish thegroup has learned from previous research done in this report’s content. Allocating 1000Dkk to small advertisements on Face-Discovery part, users tend to drop out of the chain of booking book to start with.tours due to not having a booking system. This user journey isshowing the representation of this paint point on User 1 as a First, a decision on what should be advertised needed to benegative experience. made, therefore research was done. By analysing the way so- cial media advertisements work, the conclusion was a video.For the User 2, the journey represents a positive experience with People are more likely to be attracted and take a look at an ad-a customer that has always been a fan of Nordic Noir TV Series vertisement if it’s a video. Research shows as well that peopleand found out about the Nordic Noir Tours. Navigates to their tend to remember video advertisements more than images.website and goes through the process of booking and attend-ing a tour. (More, 2017)Both of the personas go through four phases while they are in- By having the target group and advertisement concept in mind,teracting with Nordic Noir Tours. a Facebook advertisement calculation was made.The first part is all about discovery, the second part is when thecustomers compare the product (the tours) with other com-petitors, the third part is when they decide on an action, thefourth part is conclusion.Each part and the personas have description below them thatexplains the reasons and actions behind every step of the jour-ney and the roadmap. 63

As seen in the pictures, the area that the first advertisements are made are in Copenhagen and Paris, which connects with the target group. The target group needs to have the right in- terests and the budget to be able to see the advert. By running these advertisements for 70$ each, the estimation indicates that 4200 - 11000 people will see the advert.64

The VideoMost of the videos today on the social media follow a certain pattern. To get more knowledge todeliver a good video for promotion, multiple videos were gathered and analysed. Most of the videosare short 30-60 seconds and the ones that have the most emotional impact stick with the viewer.After having gone through these inspirations and research, a story board was created. 65

Having in mind that the tours are about crime TV shows in Scandinavia, a certain style is used. Thestory is thought out to show the beautiful Copenhagen, but at the same time have a shocking cutover to how dark it can be sometimes.All the footage for the video is free licence, except for the footage from Copenhagen. By contactingthe owner of the video, the group got the approval to use just for educational use. The video andaudio was edited in Premiere Pro. One scene was a photograph that was edited in Photoshop, andthen brought over to Premiere pro to be combined with the footage.CLICK HERE to check out the video 66

Sub-ConclusionThe main focus for this phase was to come up with a good solution to an improved website for theclient. To make it simple with usability and user experience in mind. Therefore the sitemap and usecase diagrams/description were made to help understand the users needs. By doing so the teamwas able to create sketches for the website that evolved into wireframes and eventually mockups.Several changes were made through the process from the sketches to the mockup of the websiteas the team discussed the usability, UI/UX and the over-all design of it back and forth. Therefore, thesketches, wireframes and mockups do not look exactly the same as the finalised website. However,the simple style of it was kept in mind throughout the whole time as the focus was as well to im-prove their visual identity. To do so, we created several style tiles that helped a lot during the designprocess to keep a clear image of the coherent style we were aiming for. Finally a plan was made tohelp Nordic Noir market themselves by publishing their website on social media platforms. Thereforea short video advertisement was created for the publishing plan, which eventually will play a part ingathering potential customers.

EXPERIMENTATION 68

Introduction to ExperimentationIn this phase the group starts to put the previously created ideas into action in order to find an an-swer to the one question that defines this phase “How do I build it?”.This part of the report will discuss the process and the decisions behind one of the most importantdeliverables in the project, the website.Additionally, this part of the report will go into testing and the decisions that came from this, the de-sign manual and lastly the style guide.

Test PlanINTERACTIVE COLOURS All of the call to action colours were designed with gradient to give a modern feeling, something that resemblance the designA/B Testing in person (Optimizely.com, 2017) in the Nordic / Scandinavian countries.Colours are chosen differently depending on how well they The different colour variations, displayed as mockups, was test-match your brand. The new improved website has a simple, ed by using the A/B testing method along with the Think Aloudminimalistic, mysterious style with mainly shades of black and method. Firstly, the following test plan was made to help thewhite and a lot of white space and imagery. As the website group to understand more the challenge they face when itdoes not use any colours it is important to use one colour that comes to test a product. The expected outcome from this teststrikes out from the rest of the website and calls for immediate was that the blue call to action colour would be chosen, as it iscall to action. Something that you can interact with. That one the most common colour to be used as interactive.colour had to be carefully chosen and therefore testing wascrucial in order to get the best results. A/B testing is a method of comparing two or more versions of an item/website. You have version A and version B from whichThe call to action must increase the contrast on the website. the participant is going to choose, which he/she thinks fulfils theTherefore, research was made to find the best eye-catching question asked. colours that as well matched the company’s style and its toneof voice.There were three colours chosen for the testing, with its onlypurpose to represent call to action.Blue is known to be the most commonly used colour for hyper-links. Most people know that if a text is coloured blue you canclick on it. Most of the time the colour red is known to have ei-ther positive or negative effect on people, nothing in between.It can be aggressive and competitive and often representsdanger as well something that is bold and exciting. It standsout. The last colour chosen was purple which often representscreativity, as well the Nordic skylight which appears after thestorm. 70

Test Plan - Interactive colourSCOPEThe website mockups will be tested with interactive / call to action colours.PURPOSEThe purpose to this test is to gain insights on the different interaction colours the group would usethrough the website as a call to action.SCHEDULE & LOCATIONLocation: EAL University, In Person Testing along with the Think Aloud MethodSESSIONSDuration: 15 MinutesEQUIPMENTDigital Mockups, Timer, LaptopHOW MANY PEOPLE WILL BE TESTEDThe group is going to test 10-15 people that have no personal relationship to us.PARTICIPANTS1 Participant, 1 Examiner and 1 Observer / Recorder.SCENARIOSThe user is going to sit at a table with a laptop in front of him that displays the mockups previouslyprepared. Each mockup has been multiplied three times and has been assigned a differentinteraction colour the participant can choose from A, B or C.The examiner will start by introducing the company this test is for and explaining what this test isabout. Then the examiner will ask the subject to speak freely about how well the differentinteraction colours work with the mockups and which one of the three; A, B or C, the participantprefers.The person observing will take notes and is going to record the session. At the end, the user willgive his feedback on the process and his experience and eventually some recommendations.METRICSThe user will be asked questions in order to know if the team succeeded or not in making a visuallyappealing interaction colour. “How would you rate your experience/process? What went well?What went wrong?”QUANTITATIVE METRICSSuccessful Task CompletionA successful testing would be more than 50% of the subjects pointing out the same interactioncolour, with similar feedback.Critical ErrorsLess than 33% overall agreement of colours.Time on TaskThe participants should not take longer than 15 minutes to complete the testing session. 71

The TestingThe different colour variations were test-ed on 10 participants. As seen on the dia-gram on the right the “gradient red” wasthe most chosen colour.60 % of test participants chose the “gradi-ent red” when it had a white backgroundand 70% chose the same colour when ithad a dark image as a background.When testing the call to action coloursdisplayed on a mockup of the landingpage of the website, 50% chose the gra-dient red, 10% the blue and 40% the purple.The gradient red colour was a winner aswell when displayed on a mockup of thewebsites “Tours” page. There, 60% of theparticipants chose the red colour, 30 %chose the blue and only 10% the purplecolour. These results show an obvious re-sults that the most likeable call to actioncolour in this AB test was the “gradientred”.Therefore, based on these results a de-cision was made to keep that colour asthe website’s interactive colour, despitethe teams expected outcome before thetesting took place. 72

Test Plan Test Plan – Navigation & Footer NAVIGATION & FOOTER A/B Testing (Optimizely.com, 2017) - Online Survey SCOPEThe following test plan has been made to help the group un- The design elements and UI of the website are being tested in an online survey.derstand more the challenge they face when it comes to Testa Product. In this case an AB test was conducted on the design PURPOSEand user interface in the mockups. The group is looking to gainthe insights of already existing customers from the clients mail- To gain insights on the different User Interface and Design elements of the website from theing list. customers.four main questions were asked in this survey and sent to the SCHEDULE & LOCATIONclient’s email list of customers. The survey targeted 200 peopleand the response rate was around 10% which is a great sample Location: Online quantitative testingsize, given the fact that most people ignore online surveys andnewsletter emails. SESSIONSEach and every question was a simple decision of design be- Duration: 5 Minutestween different variations of: header, footer and the way thewebsite displays the content. EQUIPMENT Digital Mockups, Images, Laptop PARTICIPANTS 15 Participants, 1 Observer SCENARIOS This survey has been sent out to the clients mailing list so that the group can gain first hand insights from the already existing customers in the business. The test has been sent as a link and it needs to be filled out online. METRICS The survey asks questions to the user in order to know which User Interface Design variations they like the most on the website. QUANTITATIVE METRICS Successful Task Completions A successful testing would be more than 50% of the subjects pointing out the same UI elements or Design. Critical Errors Less than 33% overall agreement of Design. Time on Task The participants should not take longer than 10 minutes to complete the testing session. 73

The TestingThe group had several ideas for the navigation, footer and thecontact page, therefor an online survey was made by using ABtesting method.Three questions were asked where different variations of thenavigation, the footer and the contact page were displayedand the participant was asked to choose which ones he likedthe most.There were 15 people that participated in the online survey. Bylooking at the results the final decision for those designs wereeasy to make, as the results obvious. Over 60% of all participantsagreed on the same things for all three questions.Below you can see the questions that were asked, as well thediagram showing the results from the questionnaire. 74

The Design ManualWhen it comes to representation of the client, the team want-ed to make sure that the visual identity being provided doesnot get easily forgotten. Going through the original website withvarious methods, the team realised that the previous designelements and visual identity was not consistent.Therefore, this design manual has been made with the client’svisual identity to make sure external and internal representa-tion of the clients company is universal.The group has followed the usual structure of the Design Man-ual and made it visually appealing with the use of whitespaceand clever text alignment so that the reader easily finds whatthe reader is looking for in the document.First and foremost, the design manual is presenting the NordicNoir Tours logo, which has not been changed during the devel-opment process of the group. The design of the logo is mini-malistic black and white, on point, therefore it is great to standthe challenge of time, as time is designs worst enemy.Afterwards the design manual displays the typography and co-lours one must use when representing Nordic Noir Tours on weband in print as well. Following these details, the design manualabout imagery, buttons, social media icons and products thepublic can associate with Nordic Noir Tours.View the Design Manual HERE through an online flipping toolsoftware. 75

DESIGN CLEARSPACE Computation APPLICATION On black background On imagery MANUAL On white background 6 To work out the clearspace for the logo, Made by 1 / 4th of the actual you take the height of the logo and divide it The yellow background can only be White logo should be used on darker logo size into four. The clearspace of the logo needs used in 80% opacity backgrounds or images, black logo Erna Gudrun Gunnarsdottir to have the margin of 1/4 of the logo, which should be paired with brighter images. Balazs Korcsog Clean white space goes fo the top, the left side and the right MINIMUM LOGO SIZES Eduard Carmocanu between the logo side. Baldur Arge Sveinsson and content. Full logo The bottom has only the margin of 1/4 of Minimum size: 75 x 75 pixels for web the height of the logo, from the middle of the logo to the bottom 1/4 of the logo. Which means, another object is allowed to go all the way up to the first 1/4, so parts of the graphical elements (the animals) can lay on that object. Definition Whenever the logo is used, it should be sur- rounded with clearspace to insure its visi- bility and impact. No graphic elements of any kind should interfere with this zone. 7 18 TABLE OF TYPO CONTENTS GRAPHY INTRO DUCTION THE LOGO..................................................................... 4 Nordic Noir Tours typography choices represent ad- Headline H1 TYPOGRAPHY............................................................. 8 venture, mystery and the scandinoir experience. Sans These guidlines describe the visual and verbal elements COLOUR PALETTE..................................................... 10 serif and serif fonts used together to create contrast in Font-family: Lora - Font-size: 36px - Font-weight: Reglar - Line-height: 44px - Colour: #171717 that represent Nordic Noir Tours identity. This includes IMAGERY....................................................................... 12 our content. Nordic Noir Tours name, logo and other elements such GRAPHICAL ELEMENTS.......................................... 14 The chosen typography represents the clean and clear Headline H2 as fonts, colours and graphics or imagery. OUR PRODUCTS........................................................ 16 design of Nordic Noir Tours, as our goal is to have it ap- This design manual is highly important for Nordic Noir pealing for both young children and adults as well easy Font-family: Lora - Font-size: 28px - Font-weight: Bold - Line-height: 36px - Colour: #171717 Tours, as it is part of how we represent ourselves for who to read. we are and what we stand for. It is the image that we The following fonts are what must be used for all online Headline H3 present and therefore the message we show through and offline media. The typeface “Lora” is used for the our visual identity must be accurate. header and subheader, which can only be used with Font-family: Lora - Font-size: 20px - Font-weight: Bold - Line-height: 28px - Colour: #171717 upper case letters, and the typeface “Poppins” which is2 3 used for the body/content. This is a paragraph using Poppins light at 12px, with a 15px line-height in the colour #171717. Each letterform is nearly monolinear, with optical corrections applied to stroke joints where 8 neccessary to mantain an even typographic colour. 9 THE THE FULL LOGO TYPE LOGO CONSTRUCTION, COMPITATION COLOUR LOGO & WHITE SPACE PALETTE Nordic Noir Tours has a typeface logo type, which4 means that it mostly consists of font and very min- It is important to keep the logo clear INTERACTION COLOUR PRIMARY COLOUR PRIMARY COLOUR imal graphics besides that. of any other graphical elements. NOIR RED COOL BALCK OFF WHITE Colour Codes Colour Codes The graphical element of the logo represents the To control this, an exclusion zone has Colour Codes CMYK: 3 93 97 0 CMYK: 73 67 65 79 CMYK: 2 2 2 0 mysteryous scene Nordic Noir Tours tries to make been established around the logo. CMYK: 32 95 64 28 Lab: L53 a-66 b-52 Lab: L8 a-0 b-0 Lab: L97 a-0 b-0 its own, and this is what they are communicating Lab: L32 a-43 b-10 RGB: 231 56 39 RGB: 23 23 23 RGB: 248 248 248 towards their clients. This exclusion zone specifies how RGB: 137 37 62 WEB: #e73827 WEB: #171717 WEB: #F8F8F8 close any other graphical element or WEB: #89253e The logo is presented through the use of white message can be positioned when it The cool black colour represents the mood Nordic This colour is used to contrast the Cool Black co- space as well as shape and form. comes to the logo. Noir Tours wants to communicate with their cli- lour presented above. Can be used on black back- ents. Mystery, crime and the scandinavian lifestyle ground as Text colour or graphical elements. The Noir Red colour blend represents the moody crime TV series shares shades of black as their representative co- Nordic Noir Tours is representing. Full of tragedy, crime and inves- lour. tigation, this colour provides a great contract for interaction colour. 5 10 11 76

IMAGERY CodingA picture says more than a thousand words. In this section of the report it will be discuss the client side im-Therefore, images that are displayed on any of our plementation of the website or as perhaps more commonlymedia, both offline and online should have to be known, the front end.chosen carefully. The image should always be trueto the feelings whta Nordic Noir Tours communi- The website can be seen online HERE and the project can becate. 13 downloaded from the GitHub repository if you click HEREIt is allowed to adjust the brightness and contrastof the image but the colours should not be edit- Technologies useded too much, because they should be as true tonature as possible. All images must be in at least HTML - For creating the website structure1024x780 pixels and good quality.The imagery should communicate dark mysterious (W3schools.com, 2017)enviroment that resonates with the scandinavioncrime TV series like the Borgen, The Killing and the CSS - For styling the websiteBridge. (W3schools.com, 2017)12 JavaScript- For adding behaviour to the website and display- GRAPHICAL Facebook DEFAULT HOVER ing data ELEMENTS Instagram DEFAULT HOVER Snapchat DEFAULT HOVER (W3schools.com, 2017) Facebook Instagram PHP- For bringing together the website components and get- Twitter ting data from the database14 15 OUR Bag (W3schools.com, 2017) PRODUCTS Git (Git-scm.com, 2017) - For version control and collaboration Gift voucher on building the website Brochure (Git-scm.com, 2017)16 SASS (Sass-lang.com, 2017) - For extending the capabilities of CSS in order to make development easier and faster (Sass-lang.com, 2017) AJAX (W3schools.com, 2017) - Although not a technology or tool, the group has used this tTechnique in order to communicate between the client side and the server side (W3schools.com, 2017) JSON - As a data interchange format 17 (W3schools.com, 2017) 77

WEBSITE DEVELOPEMENT MANAGEMENTThe development of the website has been managed using the UNTRACKED FILES AND FOLDERSGit VCS (version control system) (Git-scm.com, 2017) In the project structure you will notice a few files and folder thatBy using the branching system (Git-scm.com, 2017) provided by are not included in the github repository. This happens becauseGit the group has enabled itself to have multiple members de- of the .gitignore (Git-scm.com, 2017) file which states a set of rulesveloping the website at the same time without creating code that tell GIT what to ignore when tracking project files and fold-conflicts. ers.Moreover, it allowed the project to be safely stored into an on-line repository for code sharing. This not only made the projectsafer in term of having an online backup but it also enabled themembers to work with the same code.Lastly, the group has included a file named README.md (Help.github.com, 2017). This file describes how to get started with theproject as a person who is developing on it.Also, it states the coding standards used in the project andsome general guidelines to keep in mind while developing thewebsite.The file displayed in the online repositoryhttps://github.com/EduardCarmocanu/nordic-noir/blob/master/README.md 78

Project Structure Moreover, the website splits the reusable components into partials, inside the partials folder where you can find the HTMLThe project is structured in 2 parts: The public part which con- structure of the components.tains everything that that is going to be openly accessible andthe admin part you will find everything that is going to be avail-able only to the website administrator.Moving on, the group has used SASS in this project which en-abled the capability to split the CSS into modules, declare vari-ables and create mixins (Sass-lang.com, 2017).This has been done inside the scss file which is outputting thebundled CSS inside the css folder with the help of the SASS en-gine which is running in the background. Furthermore, there is the js folder where all the JavaScript files are stored. 79

And then the assets folder where the website stores all the im- UTILITY FUNCTIONSagery. The project makes use of the “$” utility function which acts as a shorthand for selecting DOM(W3schools.com, 2017) elements from the website. Snapshot of the “$” function codeJAVASCRIPT FUNTIONALITY THE NAVIGATIONIn this part, the functionality of the website will be discussed Starting with the landing page, you can observe the behaviourin terms of JavaScript. In addition, you will see the process of of the navigation bar once it reaches a certain point in thegathering data from the database and outputting it dynami- page.cally for the user. 80

It is visible in the code snapshot below how this workThe navigation bar changes in order to help readability, andthe same happens on the mobile version 81

Here the website is checking the window inner width in order to Moreover, you can see in the code below the implementationavoid conflict with mobileNav.js and then looking to see if the of the toggling functionality for the mobile navigation.user is on the landing page or not. If both condition succeedthe website sets the navigation bar accordingly for the landingpage and its permanent behaviour.Moving forward, the site is using a trigger system on both themain navigation and on the mobile version. This way it can usethe data from the triggers in order to set certain attributes orcompare their offset with the page offset in order to changethe styling of the navigation to favour readability.The mobile navigation works on the same concept as the main THE TOURS PAGEnavigation but it’s implemented slightly different. Here thegroup is using another set of triggers and the styling has been This page is the most reliant on JavaScript because it hasset differently. to perform a greater number of tasks in order to display the tours data in the right way. Here the JavaScript is creating an AJAX request (W3schools. com, 2017)in order to get the data from the database. The re- quest goes to one of the controllers in the admin section that sends back the data in JSON format to be displayed. 82

API On the landing page, the 6 latest Instagram pictures are dis- played, in order to attract more visitors. This was done with a plugin called Spectrogram (Spectragram.js.org, 2017) which calls the Instagram API and returns the appropriate data. On the contact page, google maps API (Google Developers, 2017) was used in order to display the company location as seen in the image below.83

FAQ PAGE SEOThe last part that is going to be discussed is the functionality All the html is coded with SEO in mind. Using html5 standards,on the FAQ page. This page implements the question toggling minimizing the css and JavaScript and having a SEO friendlyfunctionality in order save page space and make the content files, such as, robots.txt.more organized. To sum up, the website has been structured in a logical manner by separating concerns in term of development and the devel- opment process has been managed by using the appropriate tools to make this easier and safer. In addition, the functionality implemented in the website exists there in order to make the user experience more enjoyable. Also by having the client side communicate with the server side the website can display the data dynamically to the user and have the updated tour information if the website admin decides to change anything on the website. In the next section the report is going to have a look at the back- end implementation of the website. 84

PHP Example of how MVC is used in the project, logging in as a user. First the index.php includes the login controller and runs theThe backend was coded using PHP, and is almost only used $Clogin->userLogged() function. Within the controller the func-when it comes to the admin panel, however its used to gather tion calls to the model QueryBuilder. The Querybuilder startstours for the user to see. The project is structured and written with collecting all the users from the database and sends itusing the MVC (www.tutorialspoint.com, 2017 ) structure, that is Model, back to the login controller. The controller checks if the user ex-View and Controller. The view is the only thing the user sees, and ists in the database and if the passwords match. If it matcheshas almost no functionality within except for displaying desired then it adds the user to the session so the user stays logged incontent. The view connects to the controllers, which have most even though the browser is closed. Then the index.php calls aof the functionality within. And lastly, the model, which contains dashboard view since the user is logged in.the database functionality. The database was created in MYSQL, which works well with PHP. The Database is created with improvements in mind. For exam- ple, the roles table is not used, but can be used if the compa- ny gets editors that have certain rights within the admin panel. Each table has a connection with each other, through primary and foreign keys. 85

CRUD (Stackify, 2017) Style guide (Anon, 2017)When opening up the Admin panel you will immediately be The group has created a style guide (ThoughtCo, 2017) that rep-displayed data from the database. You start with the first tour resents a document that helps achieve consistency in terms offrom the database and all the pre-existing data will be filled in design by stating the repetitive elements of the visual identity.to the form.When creating a new tour, an empty tour is created in the da- CLICK HERE to view the Style Guide.tabase, ready to be updated.Updating the tour, is done through the form that is already filledout with previous data. After altering the data or uploadingphotos, clicking the submit button will update the database.Pressing the delete button on the bottom of the admin panelwill delete the tour table from the database. By doing this the group has ensured future consistency no mat- ter who is working on the website. 86

Sub-ConclusionTo sum up this parts of the report, the experimentation phase has gone through the process of cre-ating the project deliverables.By testing the group has enabled itself to take strategic decisions according to the resulting data.Also, the design manual and the style guide have ensured consistency and made sure that thegroup is on the same page in terms of visual identity. In addition, the website has been developedby using the previously manual and guide in order to achieve overall consistency.With this part ending the report will continue on to the next phase of design thinking, evolution.

EVOLUTION 88

Introduction to EvolutionThis part will discuss the improvements that the group members would like to bring to the projectafter an in depth reflection on the outcomes of the project. It can also be thought of as the next it-eration of discovery, interpretation, ideation and experimentation.

C.R.A.P. Analysis - New WebsiteBy following the design principles of CRAP analysis it becomes REPETITIONeasier for the team to improve the new website to the better.Therefore CRAP analysis was made and can be used for further Repetition can be seen through the coherent design beingimprovements in the future. used throughout the whole website. As well by having a blackBy doing so the team can see if there are things that can be and white theme along with imagery on each page.improved for an example, if they are not aligned correctly, as The footer design and menubar is the same on all pages.one of the focus points for this project was to keep a coherentdesign throughout the website. ALIGNMENTCONTRAST The content text on the website is aligned by making each text box justified, except on the Contact page. Which could be im-Fonts: proved to keep a coherent design through the website.By using Serif and Sans Serif fonts, as well capital letters in On the landing page of the website, the sections “Who Are We”the headings, and both lower- and uppercase letters in the , “Tours” and Instagram images all go in the same alignment.sub-headings and body it creates contrast. The body content text and headlines have different alignments. However all body content on each page on the website haveColour: the same alignment, except for the content text on the ContactThere is contras in the menu bar as it is white(#f8f8f8) and the page. The headline/main title for each page is aligned to thefooter is black(#171717). By using black text on dark/black back- first letter to the left of menu bar in the hedder.ground or vise versa. The red Interactive colour stands out from Footer is not aligned to anything special which could also beits background, dark or light, and therefore gives a good con- improved.trast from the rest of the design, as it is the only colour beingused for the website, except for black and white. Lastly, by using PROXIMITYwhite icons on dark background and vise versa it gives a goodcontrast. Basic proximity rules were used for the content by placing ob- jects closer together if they are relevant to each other, andImagery: having it consistent throughout the entire website.Using colourful and good quality images it creates contrasts By making use of whitespace on the website it is easier to followwhen displayed on white background. The light drop shadow the rules of proximity.on the images also provides more contrast to the images. 90

Think Aloud Test - New Website Test Plan – Think Aloud / New Website With the outcome of the website in mind, the next logical step could be a series of testing. These tests can improve the web-site quality, the user experience in general through the website SCOPE or the functionality. The finished product is going to be tested with the think aloud method.The group has prepared a Think Aloud test plan to gain moreinsight about the product that has been developed. This Think PURPOSEAloud test is aiming for the customers experience when it comesto interacting with the website. The subject is usually asked to The purpose for this think aloud test is to gain insight of the finished product from the actual users.perform a series of tasks while doing so, he or she is asked tospeak freely and say every single thing on his / her mind about SCHEDULE & LOCATION the website. Usually besides the test subject and the personwho conducts the research there is one or more person taking Location: EAL University, In Person Testing with Think Aloud Methodnotes and observing the subject. This is called the observer. SESSIONS Observers can be present during the research personally, orcan be connected through a camera or similar to take notes. Duration: 10 MinutesThey can also be an external part of the research keeping adistance from the research conductor and the subject and ob- EQUIPMENT serving from the far. This is useful when the research team donot want to influence the subject. Users tend to behave differ- Website, Timer, Laptop, Recording Deviceently while they know that someone watches them, and this is agreat way to eliminate this kind of unwanted behaviour. PARTICIPANTS The scenario the group has chosen is simple: One person who 1 Participant, 1 Examiner and 1 Observer / Recorder.conducts the research, one observer from distance takingdown notes as the test subject. SCENARIOS The user is going to sit in front of the examiner and will be given a laptop with the website opened. Afterwards a series of tasks will be asked from the user to perform on the website itself. The examiner will ask the subject to speak freely about what, why and how he or she is doing. The person observing will take notes and is going to record the session. At the end, the user will give his feedback on the process and his experience and eventually some recommendations. METRICS The examiner is going to present tasks for the user. The user is encouraged to speak out loud every single thought he or she might have related to the actions and the website. QUANTITATIVE METRICS Successful Task Completions A successful testing would be that more than 60% of the test subjects understand and can complete the given tasks on the website without much confusion. Critical Errors Less than 50% of tasks completed by users. Usability issues. Time On Task The participants should not take longer than 15 minutes to complete the testing session. 91

Example of Think Aloud test recording: age so its better for the SEO. More improvements are of course required, but in order to figure out what direction to go withSubject Name / Think Aloud test subject 1 / 14.12.2017 that, some more research and testing is needed to be done on the new website.Can you find out what is this website about?Reply. Behaviour. Body Language. Contact FormCan you find out how much a ticket costs to the Borgen Tour? The contact form is an improvement that could benefit theReply. Behaviour. Body Language. website image by making it more professional. In addition, it would extend the functionality of the website and enable forCan you find the Social Icons on the website? easier communication between the customer or the potentialReply. Behaviour. Body Language. customer and the business.How would you book a private tour? Email Subject & BodyReply. Behaviour. Body Language.Insight The business is setting the tours reservation based on book-Every insight or opportunity the group has gained during the ing email received from the customers. In order to make theinterview. booking experience easier for the customers the website will set the subject and the body of the booking email with the userCode Improvements input data from the website. This way the user has to take less actions, doesn’t have the write the entire email and is alreadyAPPLYING IMAGES CORRECTLY given a template to start the email.When Creating a New TourAfter analysing the website and admin panel, there are somenew improvements that are definitely an improvement. Firstlythere can be done more with interactions within the adminpanel, fx. Alerts, animation’s and tooltips. Secondly when up-loading an image, there could be done optimization, both so itwill always be displayed the right way and compress the im- 92

Sub-ConclusionTo sum up the last phase of the report, the group has done an in depth reflection on the project re-port and discussed it in order to show the advantages of implementing those in the next iteration ofdiscovery, interpretation, ideation and experimentation.

CONCLUSION A more concrete visual aspect of Nordic Noir Tours website has been created, with a proposal of how to use the new website for further marketing of the company. By doing research on both the competitors and the company itself, the team was able to put them self into the empathetic state that the client and her customers are feeling and a more narrow path is found to fix her problems. After analyzing the data from the research, a clear problem is visible, that is the website is not co- herent with what the company offers. With this in mind, the group formed the most likely target group based on the research, which lead into forming the right ideas for solving the problems. With both the problems and the timeframe in mind, a website was the right direction. By going through the process of research, sketching, wireframing and creating a mockup, the group got closer to the solution. To create the product to be on point with the user, testing was done, which hopefully de- livers a more on pointend result. When a concrete idea was put to paper and a tested mockup was ready, the group started developing the product. Using the up to date trending development meth- ods and tool, the product was created. Since one of the problems that the client had with the former website was the content management, a more user friendly and more unique for nordic noir tours was created. The functionality to create, update, read and delete tours, with modern UI patterns and UX in mind. When the product was ready, the concept of publishing the new website was created. A social media advertisement video, which not only advertises the new website, but the company itself. The next steps for the product would be evaluating the final result, testing and observing the usage for future improvements. 94

REFERENCES IMAGERY All Imagery in this report and on website is from www.unsplash.com. It is free licensed and legal to use publicly. https://unsplash.com WEBSITES Anon, (2017). A Beginner’s Guide To AB Testing: An Introduction. [online] Available at: https://blog.kiss- metrics.com/ab-testing-introduction/ [Accessed 05.12.2017]. Anon, (2017). [online] Available at: UX Planet. (2017). How to Get Started in UX/UI Design? – UX Planet. [on- line] Available at: https://uxplanet.org/how-to-get-started-in-ux-ui-design-ae097cc0d1c [Accessed 17 Dec. 2017]. [Accessed 17 Dec. 2017]. Bowers, M. (2017). Creating Perfect User Flows for Smooth UX. [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/creating-perfect-user-flows-for-smooth-ux/ [Accessed 17 Dec. 2017]. Buick, P. and Buick, P. (2017). The Messy Art Of UX Sketching – Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketch- ing/ [Accessed 05.12.2017]. 95

Buskbjerg, M. (2017). SWOT analyse. Guide og skabelon til arbejdet med SWOT >>. [online] Alt om ledelse.Available at: https://altomledelse.dk/swot-analyse/ [Accessed 17 Dec. 2017].Creative Bloq. 2017. 7 reasons why mood boards are worth the extra time | Creative Bloq. [ONLINE]Available at: http://www.creativebloq.com/graphic-design/7-reasons-why-mood-boards-are-worth-extra-time-4132367. [Accessed 06 December 2017].D’Aveni, R. (2007). Mapping Your Competitive Position. [online] Harvard Business Review. Available at:https://hbr.org/2007/11/mapping-your-competitive-position [Accessed 11 Dec. 2017].D’Aveni, R. (2017). Mapping Your Competitive Position. [online] Harvard Business Review. Available at:https://hbr.org/2007/11/mapping-your-competitive-position [Accessed 17 Dec. 2017].Deshdeep, N. (2016). Build Better User Experience With C.R.A.P. Design Principles. [online] VWO Blog.Available at: https://vwo.com/blog/crap-design-principles/ [Accessed 11 Dec. 2017].Developer, E. (2017). Exactly What You Need to Know to Be a Front End Developer. [online] Skillcrush.Available at: https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/ [Accessed 17Dec. 2017].F, John Reh. (2017). Why Benchmarking is Important for Your Business and How to Get Started. [on-line] Available at: https://www.thebalance.com/overview-and-examples-of-benchmarking-in-busi-ness-2275114 [Accessed 05.12.2017].Google Developers. (2017). Google Maps APIs | Google Developers. [online] Available at: https://de-velopers.google.com/maps/ [Accessed 13 Dec. 2017].Git-scm.com. (2017). Git. [online] Available at: https://git-scm.com/ [Accessed 9 Dec. 2017].Git-scm.com. (2017). Git - About Version Control. [online] Available at: https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control [Accessed 13 Dec. 2017]. 96

Git-scm.com. (2017). Git - Basic Branching and Merging. [online] Available at: https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging [Accessed 13 Dec. 2017]Git-scm.com. (2017). Git - gitignore Documentation. [online] Available at: https://git-scm.com/docs/gitignore [Accessed 9 Dec. 2017].Google.dk. (2017). development of a baby week by week - Google-søgning. [online] Availableat: https://www.google.dk/h?q=development+of+a+baby+week+by+weeearch?q=porpoise+fe-tus&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj5_pKT4vvTAhVQEVAKHV1NAuUQ_AUIBigB&bi-w=1679&bih=950#tbm=isch&q=dolfin+fetus&imgrc=1kmFlIFCN7TkKM: [Accessed 05.12.2017].Grocki, M. (2017). How to Create a Customer Journey Map – UX Mastery. [online] UX Mastery. Availableat: http://uxmastery.com/how-to-create-a-customer-journey-map/ [Accessed 05.12.2017Howlett, L. (2014). How To Create Your Own Front-End Website Testing Plan. [online] Smashing Mag-azine. Available at: https://www.smashingmagazine.com/2014/11/how-to-create-your-own-front-end-website-testing-plan/ [Accessed 11 Dec. 2017].Help.github.com. (2017). About READMEs - User Documentation. [online] Available at: https://help.github.com/articles/about-readmes/ [Accessed 9 Dec. 2017].HARNED, B. (2017). How to Write a Good Project Plan in 10 Steps | Project Management Guide. [online]Teamgantt.com. Available at: https://www.teamgantt.com/guide-to-project-management/how-to-plan-a-project [Accessed 17 Dec. 2017].Lim, W. (2017). A Beginner’s Guide to Wireframing. [online] Web Design Envato Tuts+. Available at:https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 [Ac-cessed 17 Dec. 2017].Long Island Web Design Company & Marketing Agency | Fat Guy Media. 2017. What is a Target Audi-ence, and why is it so Important?. [ONLINE] Available at: https://fatguymedia.com/target-audience/.[Accessed 10 December 2017]. 97

“Mo” Goltz, S. (2017). A Closer Look At Personas: What They Are And How They Work | 1. [online] SmashingMagazine. Available at: https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/ [Accessed 17 Dec. 2017].More, T. (2017). The Psychology of Video Advertising. [online] Adage.com. Available at: http://adage.com/article/digitalnext/psychology-video-advertising/308160/ [Accessed 17 Dec. 2017].MSG. 2017. Desk Research - Methodology and Techniques. [ONLINE] Available at: http://www.manage-mentstudyguide.com/desk-research.htm [Accessed 05.12.2017].MSG. 2017. Field Research - Definition and its important sources[ONLINE] Available at: http://www.managementstudyguide.com/field-research.htm[Accessed 05.12.2017].Nielsen Norman Group. 2017. The Definition of User Experience. [ONLINE] Available at: https://www.nn-group.com/articles/definition-user-experience/. [Accessed 05.12.2017].Optimizely.com. (2017). A/B Testing. [online] Available at: https://www.optimizely.com/optimiza-tion-glossary/ab-testing/ [Accessed 17 Dec. 2017].Optimizely.com. (2017). A/B Testing. [online] Available at: https://www.optimizely.com/optimiza-tion-glossary/ab-testing/ [Accessed 17 Dec. 2017].OptinMonster. (2017). How to Design a User Flow Diagram for Your Website. [online] Available at: https://optinmonster.com/how-to-design-a-user-flow-diagram-for-your-website/ [Accessed 17 Dec. 2017].Pinterest. (2017). Booking site. [online] Available at: https://www.pinterest.com/baldursveinsson/book-ing-site/ [Accessed 17 Dec. 2017].Scrum Alliance. 2016. What Is Scrum?. [ONLINE] Available at: https://www.scrumalliance.org/why-scrum. [Accessed 05.12.2017]. 98

Sharp, E. (2014). How to Design the Structure of a Website with Site Mapping in Eight Steps. [online]ProtoFuse, Inc. Available at: https://www.protofuse.com/blog/details/how-to-design-structure-web-site-with-sitemapping/ [Accessed 11 Dec. 2017].Spencer, D. (2017). How to Conduct A Content Audit. [online] UX Mastery. Available at: https://uxmas-tery.com/how-to-conduct-a-content-audit/ [Accessed 17 Dec. 2017].Sizemore, E. (2017). How to Do a Content Audit [Updated for 2017]. [online] Moz. Available at: https://moz.com/blog/content-audit [Accessed 17 Dec. 2017].Staff, C. (2017). The web designer’s guide to style tiles. [online] Creative Bloq. Available at: http://www.creativebloq.com/web-design/style-tiles-4132333 [Accessed 17 Dec. 2017].Studio by UXPin. (2017). What Is a Mockup: The Final Layer of UI Design. [online] Available at: https://www.uxpin.com/studio/blog/what-is-a-mockup-the-final-layer-of-ui-design/ [Accessed 17 Dec. 2017].Saylordotorg.github.io. (2017). C.R.A.P. Principles of Graphic Design. [online] Available at: https://saylor-dotorg.github.io/text_business-information-systems-design-an-app-for-that/s07-01-c-r-a-p-prin-ciples-of-graphic-.html [Accessed 17 Dec. 2017].Smash Magazine (2015). All About Customer Journey Mapping. [online] January 16, 2015 Smash Mag-azine. Available at:https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/[Accessed 3Dec. 2017].Scrum.org. (2017). What is Scrum?. [online] Available at: https://www.scrum.org/resources/what-is-scrum?gclid=Cj0KCQiAyNjRBRCpARIsAPDBnn3JCaj-sguvR8ltAc_HHWEvp30zGfnJwajXzlYL-2jPhX5382kmJQFMaAm_-EALw_wcB [Accessed 17 Dec. 2017].Sass-lang.com. (2017). Sass: Sass Basics. [online] Available at: http://sass-lang.com/guide [Accessed10 Dec. 2017]. 99

SilverEGG Media. 2017. Why Is Understanding Your Target Audience So Important? |. [ONLINE] Availableat: http://www.silvereggmedia.co.uk/understanding-target-audience-important/. [Accessed 10 De-cember 2017].Slickplan. (2017). What is a Sitemap?. [online] Available at: https://slickplan.com/sitemap/what-is-a-site-map [Accessed 17 Dec. 2017].Spectragram.js.org. (2017). jQuery Spectragram. [online] Available at: http://spectragram.js.org [Ac-cessed 17 Dec. 2017].Stackify. (2017). What are CRUD Operations: How CRUD Operations Work, Examples, Tutorials & More.[online] Available at: https://stackify.com/what-are-crud-operations/ [Accessed 17 Dec. 2017].Sass-lang.com. (2017). Sass: Syntactically Awesome Style Sheets. [online] Available at: http://sass-lang.com/ [Accessed 9 Dec. 2017].Travis, D. (2017). Desk research: the what, why and how. [online] Userfocus.co.uk. Available at: https://www.userfocus.co.uk/articles/desk-research-the-what-why-and-how.html [Accessed 17 Dec. 2017].Travis, D. (2017). The Beginners’ Guide to Benchmarking User Experience. [online] Userfocus.co.uk.Available at: https://www.userfocus.co.uk/articles/guide-to-benchmarking-UX.html [Accessed 17Dec. 2017].Trello.com. (2017). Trello. [online] Available at: https://trello.com [Accessed 17 Dec. 2017].The Interaction Design Foundation. (2017). 5 Stages in the Design Thinking Process. [online] Availableat: https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process[Accessed 17 Dec. 2017].ThoughtCo. (2017). Popular Style Guides for Writers. [online] Available at: https://www.thoughtco.com/style-guide-reference-work-1691998 [Accessed 17 Dec. 2017]. 100