High-Fidelity Prototypes

From the low-fidelity prototypes, we are able to design our mini-site and landing page with a clear idea as to what it should have and look like. InVision has helped us put together the pages and our ideas of how the mini-site and landing pages work together.

Landing Page:

Desktop version

Mobile version

As an option is chosen, the next page slides up to reveal the information. The use of InVision has helped us execute this idea into reality, to see if it works before using it in the actual final product. As the effect became real and having looked at the way it looks, and comparing it to how we had imagined has helped us decide that we will use this transition effect.

The rest button (on the landing page) has been placed on the top left-hand corner instead of in the centre as the centre is a little crowded. By placing it at the left-hand corner, it is a more recognisable spot for a back button which in this case acts like one. Giving users an option to reset the page will allow them to click on the option they had not chosen before, enabling them to learn the difference between the two wines.

Mini-site Page effect:

Desktop version

Mobile version

As mentioned previously in blog posts, the mini-site (desktop) is going to be a single-scroller page. InVision has once again, helped us put our thoughts into a quick and real example of our page. The only thing with our mini-site with InVision is that each section does not fill up the screen as we intent it to, due to it being an image. However, seeing as it still works allows us to further imagine how well our mini site could look with it taking the full screen of the webpage.

Every icon on the page leads back to the home page.



As our client’s website’s colour scheme is white and grey, so we decided to use these colours for our campaign in order to keep it consistent. That way users that come across our campaign will be able to go to our client’s website and feel like it is a continuation of information, without feeling like they have go onto a website that is completely different.

Landing Page Desktop Version


For the landing pages we are planning to have multiple iterations with slight differences in focus (Food over wine, location over event, etc.)

The viewer will be able to choose which wine they would like to know about. The image of the wine that is not chosen will fly down off screen while the information of the wine that was chosen will fly down and occupy the space on the right.

For example: The bottle on the left is chosen so the information about that win appears on the right.

The large image of more pizzas with wine will be a clickable image that will allow the viewer to go to our client’s site to learn more.

Landing Page Mobile Version

The mobile version of the landing pages is very similar, but it is portrait instead of landscape so mobile users view their phones portrait. Therefore keeping it portrait will be easier for the viewer to look at our landing pages on their phones.

The same concept of tapping on the left or right side is used on the mobile page but the user will be tapping on the top or bottom option. The question will be at the centre so the viewer will read it and choose between the top or bottom.


Mini Website Desktop Version

Home Page:


A large HD image will be the background image of the home page. Our client’s logo will be at the top centre of the home page, enabling users to know who’s site they are currently on. The three images at the bottom are the different sections that are on the page, ‘Wines worth watching’ are wine videos, ‘Fact of the day’ is information taken from our client’s glossary page, and ‘Match of the day’ is foods pairing with wine.

Video Page:

As explained in our mockup blog post, the video section has a playlist on the right-hand side with the clicked video taking up majority of the webpage. The link to our client’s website will be on the bottom right, making it easy for users to click on the link if they are wanting to see more than that is already in the playlist.

Fact of the Day Page:


We are planning to have images of the wine on both sides and the information in the centre to bring as much attention to it for viewers to read.

Match of the day: 



Each day, there will be a different wine and food pairing so there is always something new for viewers to read and find out. By having an image of the wine and food, it will emphasise which foods go with certain wines. The text will also be in the centre for viewers to easily read. If viewers are wanting to learn more, they are able to go to our client’s website which will be a link at the bottom right-hand corner.

Mobile Versions:

Home Page:

Instead of having the images in a grey box like the mini-site, the hander will be in colour to differentiate it from the content below. The viewer will be able to click on one of the three images which will lead to the section.

Video Page:

The header will stay the same on all pages with a grey background so the logo stands out. On the video page, the main video of the day will appear at the top making it easy for the viewer to watch as it will be the main thing on the page. Below the video, will be a description of the video  and information that is not shown in the video.

There will be a playlist of other videos users could watch and a button to view more on our client’s site.

Fact of the Day Page:

The title of the wine will be at in the centre bring attention to the name, with an image of the wine below it. This page will have a little fun fact about the wine that the viewer would probably not know. As always the button to find out more will be at the bottom, easy for the viewer to click.

Match of the Day Page:

The design for this page is very similar to the ‘Fact of the day’ with a grey box holding all the content. We have decided to place an image of the wine bottle at the right side to show the viewer what kind wine they can drink with certain foods. The type of food will be at the top left-hand corner so it is obvious to the viewer that this is the kind of food that goes nicely with wine.


(Note: We will be given images from our client to use for this campaign.)

Low fidelity prototypes

Landing pages – Low fidelity prototypes

These two prototypes will help us to visualise the sketches and mock-ups more thoroughly and also to present the client with a basic functionality. This is only for early demonstrations and does not include any effects. Also, the final versions will see us implementing all into one page rather than having Desktop and Mobile as two different versions.

– The added reset button is not part of the final design –

Landing page – Low fidelity – Desktop

Landing page – Low fidelity – Mobile

Mini Site – Low fidelity prototypes

The low fidelity prototypes for the Mini Site are illustrating the general idea and flow of the page. Sections can be directly linked to or the “index” at the top of the single-scroller lets you decide which area you would like to visit. At the bottom of each element are links back to the client’s website for further information on the topic (each one linking to a different section on his website).

Mini Site – Low fidelity – Desktop

Mini Site – Low fidelity – Mobile

Google Analytics and issues with single-scrollers (AND solution)

Google Analytics will be our main tool to evaluate the impact of our campaign. We are going to place Analytics on the Landing Pages and the Mini-Site to see how many people we attract, where we lose them or how much of a regular clientele we receive.


Because Google Analytics is tracking the changes in pages and ultimately the activity between webpages, we are facing a problem about our pages which are going to be single-scrolling entities with only one file.

There will be no clicking and linking between different pages and therefore Google Analytics will show us that all visitors are bouncing (leaving the page without interaction).

However, we have options and clickable items on our pages and we would like to track what people do when they arrive at one of our campaign elements.


We are not going to embed Google Analytics as per standard solution, we will utilize the Google Tag Manager to do so.

With the Tag Manager running on our campaign elements, we can designate events and therefore prove actual user interaction with the pages. This allows us to not get the 100% bounce rate and it will make it easier to compare what elements performed better and kept a greater audience focused longer.

Site Map and Sketches

Mini Site Site Map

The mini site will be have three sections: video, glossary and food pairing. We are also planning to have PHP selectors so the content that audiences are viewing will continue onto the site for a favourable experience.

Landing Pages Site Map

The landing pages will have two images (options) which the viewer will have to choose between. Depending on their option chosen (with a click/tap), it will lead them to more information about that particular wine.


Mini Site on desktopimg_2675

The mini site is a single scroller with the 3 sections at the bottom of the home page. The wineguy’s logo at the top for viewers to know whose page they are viewing, and the three sections made clickable for viewers to go to the selected sections easily.

Once selected on one of the three options, they are taken to the section where the information or video will take up the full screen. As it is a single scroller mini site, viewers are able to scroll through to the different sections without having to click on the three options on the home page. This allows them to have freedom to look through the site before choosing which one they would like to look at.

Video Section: The video will take up majority of the page with a playlist on the right hand side for viewers to click on to watch more. There will also be a button on the bottom right hand corner that will allow viewers to go to wineguy’s website to view all videos.

Fact of the Day Section: This is the glossary which will be made into facts of the day for people to learn something new about wine each day. The title will be at the top with the fun fact beneath and an image to go with it on the right-hand side. “view more” will also be on the bottom right-hand side.

Match of the Day Section: Information about the wine will be in the middle of the page with an image of the wine on the right-hand side and an image of the food on the top left-hand side. A “find out more” button will also be on the bottom right-hand side.

Mini Site on Mobileimg_2678

The site will be portrait with the logo on the top and the three sections below each other taking up the rest of the screen. The video page will the logo at the top, the video beneath it and the playlist and the “view more” link below.


Landing Page(s): There are going to be two options the viewer will have. Two different wines, two different venues to drink wine, two different foods to have with wine, two different occasions..etc. Out of the two options, the option they choose will reveal information about what wine is best for that particular situation or the wine that best suits certain foods. We will also include the more button at the bottom for viewers to go to the wineryguy’s website.


Landing Page(s) Mobile: This is going to be very similar but it will be on portrait form. The question/headline will be in the centre and the one image will be on top and the other on the bottom. Once the viewer has chosen an option, the option that was not chosen will disappear and the information will be revealed at the bottom. As always, there will be a more button that will allow viewers to go to the website.

The first meeting with the client

Date: Fri, 17 March 2017
Location: Dida’s Wine Lounge (54 Jervois Road, Herne Bay)
Time: 4.30pm – 6.30pm
Attendees: Gavin (Client), Hulu, Chris

After initial contact to check the availability of utilising Gavin’s website a week prior to the meeting, we all met up to discuss the procedures, timelines and collateral required.

Presenting the timeline:

  • Agreed to proceed as outlined in the timeline post (24 April – 20 May)
  • Gavin offered to help out with imagery and text requirements
  • Leading up to the 24 April all collateral is to be produced
  • 20 May will launch with a new category under features on his website (Comparing wine varieties Oaked vs Unoaked)

After the agreement on the timeframe, we discussed the nature of the new material we will create in order to launch and run the campaign for the duration of four weeks.

Material to be created:

  • Mini-website (3 pages – single-scroller site)
  • 2x Landing pages (both with A&B variants)
  • After the creation of these elements, we will take a closer look at what material will best match it to be utilised on social media
  • #wineguy and #winesworthsharing (motto of the site) are to be contained in all social activity
  • PHP selectors will be utilised on landing pages and social media to reflect different content on the pages
  • 2x LinkedIn articles (A: Friday Drinks and B: Business Etiquette/Gifts/Lunches)


The Mini-Site will give an overview of wineguy.co.nz (also accessible via wineguy.nz) and focus on three categories of the page:

  • Glossary
  • Food Pairing
  • Vineo (Videos about wine)

For the videos, we will be creating different libraries, which get loaded via PHP selectors and then embedded utilising a jQuery randomizer to ensure that the content from social link to landing page to mini-site is coherent and matches the users’ expectations. This way we will be minimising drop-off rates and deliver a comprehensive on-topic experience that will allow us to communicate and achieve our goals throughout the campaign.

Landing Pages

The landing pages will explore different scenarios and contain varying approaches of how people consume wine and in what environments. The content and imagery will be supplied by the client and contain the actual content from the first four articles of the new categories (changing each of the landing pages weekly to offer variety and keep users interested).

Page 1
The first landing page will focus on food and wine pairing. According to the new category that will be introduced throughout the campaign and starts on the website on the 20 May, we will give the user two options – The left-hand side will show an oaked version of a wine with a food pairing in the bottom left corner. Clicking on it will transform the page and briefly explain why this goes together. The right-hand side will have an unoaked version of the same label with a different food pairing. Again, clicking on it will reveal brief information of why it goes together.

Page 1 – Alternative version
The alternative version will see us swapping around the wine and food focus – Food as the main object and wine match in the corner.

Expected outcome:
The expected outcome here will show us whether people are more likely to be driven by the food or by the wine choices. An educated guess is that the food-centred version will do better with people outside the wine industry.

Page 2
The second landing page will see us explore common situations where wine is part of the experience. Again, we will split the page in two halves and put two different locations opposite one another. The first will see us compare a social BBQ scenario versus a family dinner at home. Clicking on either one will bring up suggestions that are best matched to the scenario with the food offered and also taking into account the time of day.

Page 2 – Alternative version
The alternative version here will see us putting a cafe against a restaurant experience. Again we are looking at different times of day, different kind of food experiences and both of these are away from the home and can be part of a private as well as a business context.

Expected outcome:
To guess the outcome here is very hard. We are thinking it will be a close call and be equally popular with visitors.

Conclusion of the meeting

In the end we have agreed to touch base again by Thursday, 23 March 2017 to supply the client with sketches and mock-ups of the Mini-Site, Landing pages and their variations. Based on these initial mock-ups, we will start prototyping the elements and also start working on potential layouts for all social media elements.

Future deadlines:

  • All Mock-Ups and prototypes to be designed and confirmed by the client on 3 April 2017
  • Production of all material between 3 April – 24 April
  • Launch Campaign execution 24 April – 20 May
  • Posting the new feature category 20 May (Client to execute)
  • After 20 May 2017 evaluating data from analytics, social activity and comparison to activity prior to campaign – Reflection

Time Line and Collateral List

Proposed Caimpaign Dates: 24 April – 20 May 2017

Proposed Platforms:

  • Mini Site
  • Landing Pages (2x A-B Testing)
  • Facebook Posts/LinkedIn
  • Twitter
  • Pinterest
  • Instagram
  • maybe a promotional editorial text on AUT’s website
  • notcot.org entry
  • other website if possible (as we go along we will add here)


Mini Site (running along the whole campaign time) (example: https://www.polroger.com/en/champagnes )

Explaining the cause, getting people interested, offering a sneak peak of the new category

Landing Pages (4 in total, least visited gets killed each week – One for business manners article and one for everything else (two versions each))

Brief intro, image, link to existing article(s)

Facebook (twice a day – timetable for posting changes every week)

utilise 360 panorama image posts,

LinkedIn (twice over period of the campaign)

Research posts about manners and business outcomes – connect to wine

Twitter (twice a day timetable one hour behind facebook)

#wineguy compares/explains/reminds you..

Pinterest/Instagram (same time as facebook – 3 times a week)

Landing page related collateral (postworthy)



  • Quiz (easy)
  • Quotes
  • Memes


Learning Resources brainstorm


Good compendium for all HTML, CSS and jQuery commands and possibilities. The first location when it comes to clarify commands and their effects.


The main page for the open source library of jQuery. This library makes it easy to use all features Javascript has to offer and each command is explained through different executions and implementations.


Whenever we are stuck on a certain functionality issue, stack overflow has already a post which is querying exactly that issue – an outstanding resource for trouble shooting.


Ideas for marketing and creative campaigns are collected and moderated on this page. It is a very useful resource to initiate ideas, see great campaigns and sometimes even to switch off for a few minutes and regroup the mental ability to get back to the code editor.


The blog our client has been writing for years. To dive deeper into the topic of the launch campaign, we must know the page and use it as guidance for collateral.


Good examples for campaigns, what can be used and what is changing in the world of marketing. A resource that keeps us informed and at the pulse of time.


To make an impact, we only have four weeks and apart from our efforts to spread our campaign across many social platforms and websites, we will have to optimise it in terms of SEO to try and get listed in search engines as fast as possible.


Another good resource to understand and adjust campaigns, landing pages and everything else to play our content directly into the arms of major search engines. Be found to create an impact!


Interesting read to get people out of their comfort zone and into the learning boots. In regards to our project, this fits quite well. We are trying to engage people to widen their horizon.


Brief concise summary for what to strive for in webdesign (also applicable to landing pages and our mini campaign page)

Research brainstorm

Since our project is to create an online campaign for our client, we looked at how other businesses caught people’s attention online through their campaigns. The examples we found were rather interesting due to their approach. We are looking at how they used their approach and possibly gain some inspiration and ideas as how we could create our campaign.

Quizzes used to engage and interest users:

Outbrain.com is addressing a variety of cases that included quizzes within their campaigns. These include growing a customer base, assessing leads, driving engagement/enrolment, raising awareness and cutting cost for leads. Our launch campaign falls into several of these categories. Therefore, quizzes are a great idea to make an ad more playful and get shares across social media channels.

Takeaway for our task:
Our client is already utilising quizzes on his page. He has got around 50 different quizzes around grape varieties and growing regions. However, these quizzes are very specific and even people from within the industry hardly get 80% right. Taking the idea of his hard and very information-rich quizzes to create shorter and easier ones for beginners might be a great approach. The only downside here would be that people previously exposed to his hard quizzes might skip it because it did not give them a positive/successful experience.

Creating a set of questions where there is no wrong answer. Picking up on the comparison of wines, several statements can be true and the reveal could explain why all answers are correct. This way we are encouraging people to take a quiz, they always achieve a perfect score and can learn more about what they are drinking.


This particular campaign was pledging for a whiskey emoji and reached more than 7 million people with an ad spend of 5,500 English Pounds. Ballantine’s was the company responsible for it and was raising awareness for their brand as well as their consumer’s.

Takeaway for our task:
Everyone wants to express themselves, everybody is an individual and everybody uses some sort of instant messenger that includes a set of emojis. The idea is great and does not prioritise on the brand itself. It actually focuses on the individual, their habits and their way of communicating with like-minded people.

In regards to wine, there are already emojis in most programmes that have a glass of wine. But maybe in our case, we should take the idea and slightly alter it. There used to be ASCII art on the internet. Images consisting of hundreds and sometimes thousands of symbols that would make up a big picture. In regards to comparing wines, we could make the same ASCII art with different symbols and create the same big picture but with a slight tweak of using different elements to create it.

Post-it note banners

The post-it campaign has a unique feel to it and uses remarketing campaigns to support a user’s journey through the internet.

Takeaway for our task:
Our critique on it is that the actual interaction with a banner is usually quite limited. People expect that clicking on it will take them to a page where they find more information about a product. Also, remarketing campaigns require setup and data collection for specific criteria long before the actual campaign can begin. In our case we do not have that time to prepare and the budget to spend on large-scale campaigns.

The take-away from this campaign is to create a use-case that users can instantly gain by looking at our posts and landing pages. Maybe weather related wine suggestions or food pairing ideas.

Global online interactive campaign

Narcos, a hit-series on Netflix has created a toolkit for global coordinated and mediated content in context to territories. Their campaign used various rich media production techniques that then could be changed and dispatched to certain areas while in other locations different variations of the same ad could be played.

Takeaway for our task:
As great as a campaign this has been and the elements featured in the summary, we are not having the means to shoot material to that quality. Also, out target audience will mainly focus on New Zealand and gain more traffic within the national borders.

We think that the greatest lesson out of the example for Narcos is the mixed media implementation. Looking at the campaign at hand, we should utilise video, imagery and write-ups to offer a variety of elements to get more visitors and make it a success.

Changing history

A DDB campaign that looks at vintage ads and re-writes the copy on the actual posters. This has an effect and highlights what many people do not perceive with the original advertisement. The campaign triggers thought and thinking across both illustrations to come to an agreement that the original message is less important today than the re-written alternative.

Takeaway for our task:
Having this campaign sink into the mind, it triggers a lot of points that create parallels with our launch campaign. We are taking one product, but will have to explain that there are variations and it is not all the same. Along the journey, we must convince consumers that it is worth knowing what is going on behind a label and that the differences can increase your well-being, enjoyment and social appearance.

Looking at promoting a campaign that is focussing on pointing out the difference in wines of the same grape variety will see us having to explain it with different parallels. Maybe we need to look at setting up different environments and scenarios to illustrate better what these subtle, yet distinct differences mean a more familiar setting.

Utilising the Journey as the goal

Boundary Road Brewery needed to stand out within the by now well over-saturated craft beer market. To achieve this, they utilised the journey and experience of creating a beer to draw their audience. An unpaid internship for an international craft brewer would generate into a line-up of unique and distinct products that then will be available on the shelf.

People are always interested when they or at least their opinion can be heard. By being able to apply for the internship at the brewery, they felt included and achieved a greater sense of knowing the product.

By involving people and setting up scenarios that are familiar to them with brands they already know, it is easier to reach their attention. Going forward, we should utilise the new feature category on the wineguy website and put it more into everyday context. This way we can paint a picture at our users’ homes, favourite places and scenarios that apply to them privately and at work.

Put people in their favourite scenario

Pepper Jack (Australian Wine Label) started a campaign to make sure that their entry level wine is enjoyed at most BBQs throughout the lengthy and hot Australian summer. They utilised social media and a voting website to give the consumers a voice and opinion.

Similar to the Boundary Road campaign, it was the ability to voice themselves and the depicturation of a familiar scenario that ensured the great success.

Looking at the two previous examples which were focused on New Zealand and Australian audience, it seems important to connect alcohol with a situation or a way of life (Think of Corona or Bacardi). To facilitate the consumer to imagine a familiar situation even improving with a product will drive attention and eventually sales. Now, we are just looking at an educational website, but this seems an important fact that we will look at implementing.

Modularizing Content

To ensure that content can be consumed by the appropriate platform it is viewed on, it is important to modularize content and be able to serve the most appropriate part to individual content outlets (Facebook, Twitter, Landing pages, etc..)

Brad Frost talks about the whole process of not only creating content, but also the processes and terminology in creating websites. For us the modularization is important to be able to break up the quite lengthy and terminology-driven content on the client’s blog and make it more accessible and easier to understand for the average user/visitor.