Promotional Campaign – Designing for Interaction

For this project Veronica and I worked together and we wanted to create a promotional piece on something that we both like.  We are both vegetarians so we I suggested looking for a product that had a illustrative packaging design, which was designed for healthy eating and vegetarians.  Initially, I was drawn to promote with Innocent drinks because of their strong market position and interesting illustrative designs. After investigating their website, I noticed it was quite bland and the timeline history was out of date by almost 2 years.  So I decided to look further into a niche market of product packaging design.  I came across Cawston Press drinks, I also recall seeing them whilst shopping at Waitrose.  Again, this fitted well with our target audience as Waitrose shoppers would be interested in educational events for their children.  I investigated their range and new this product was perfect, so we both agreed.  The task then was to find the event we wanted to promote with this product.  Our target was to promote to an event for children through the Cawston Press kids blend juices range.  I immediately thought of Moomins as I felt this suited the IP of Cawston Press juices.  I looked into the Moomins event and found that there was a current event running at the Southbank Centre entitled The Adventures in Moominland.  Following this an Easter event at Kew Garden.  I was really pleased to see that the Moomins still held up in the contemporary market.  Having looked around for the Cawston Press Kid Blend range, I was only able to find it at Waitrose.  After purchasing a 3-pack of the kids blend, we could then investigate the packaging to analyse how we could initially target the Waitrose shopper audience.

Kids-Blends-02-839x765moomin_characters

To run a promotional campaign via Cawston Press kids blend for the Adventures in Moominland.  My idea was to offer discount at the event through online interaction, whilst promoting the event and healthy eating.  Veronica and I met to discuss the concept and promotional packaging design and web design.  We decided that a small design over on the clear wrap of the juices would be most cost efficient way to promote the event.  I was drawn to creating a game, which involved the children creating juices to promote awareness of healthy eating of fruits, to follow on to receive a voucher to the event.  The game would include Moomin characters to introduce the target audience to the characters and narrative of The Moomins.  Following this, to run a post event campaign to continue to drive awareness of the event via social media.   I started to create a wireframe for the game design as this was our main purpose of the campaign to design for interaction whilst promoting an event.  My initial concept was to create levels for the game ensuring there was interactive stimulates for the target audience, such as touch, sound and sight to stimulate taste and the desire to want to visit the event.

IMG_9420IMG_9426IMG_9427IMG_9428IMG_9429

Veronica and I worked together to create the initial concept design presentation.

Presentation attached:-

CW_VG_Interaction_Presentation1

Following the initial wireframe ideas of the game Veronica and I met to discuss the structure of the game as we felt it was a little bland.  We discuss 4 levels with a narrative within the game, which would enable the target audience to understand the other narrative of the Moomins as the Southbank event; as the event is about the history of the stories of the Moomins, which started in 1945.  We decided that we would split the game design in half as there was many asset to create.  I started to design Level 1 and 4 and Veronica would create the assets for 2 and 3.  We also looked into the character and how they would fit into the game.

IMG_9429IMG_9430

I felt that a child’s voice for reward recognition would be most appropriate throughout the game, so I recorded my daughter’s voice using an online sound recording app to record the sounds, Well Done, Great Job, Superstar, Awesome.  I these were then incorporated into the game.  I set up a google drive folder for Veronica and I to share our project files and assets to ensure we both could work smoothly.

MOOD BOARD AND ASSET DEVELOPMENT

I created the assets of the fruits for the game using same fruits as in the Cawston Press illustration to create the association.

Hierarchy mapping out character and association to place within the game.

img_9436.jpg

MOOD BOARD FOR CHARACTER AND ASSET FOR THE GAME

CONCEPT AND ASSET DESIGN FOR LEVEL 1 FOR THE GAME

I Created Level 1 assets to kick off the game design concept.  We decide to start the narrative of the game at dawn, moving through to morning, afternoon and finishing the game at evening time in Mammamoonmins Kitchen.

CARD SCREEN FRUIT

LEVEL 4 CONCEPT DESIGN – FINAL LEVEL MAMMAMOOMINS HOUSE

img_9440.jpg

Whilst we were designing the assets, I want to build a hierarchy of the characters, so I took some time to research the Moomins in detail to be sure we had appropriate characters representing in the game and promotional packaging.  For the promotional packaging we decided that the Blippar app was the best way forward to link the packaging promotion with the online interaction.

Whilst Veronica took on the creation of the game in more detail, I wanted to investigate further interaction to bring awareness of the event to the target audience.  Creating designs within multiple devices the audience could see where the interaction would take them once they scanned in the icon from the packaging design via the Blippar app.

This is put forward in the attached presentation below.

I wrote presentation notes in a draft, but these notes also enabled me to process ideas and enhance my concept design ideas to share with Veronica.

DRAFT 27.3 Promotional Campaign for the Adventures in Moominland Exhibition at the Southbank Centre

Button Assets sent to Veronica to incorporate in the game so the user can access the videos.  Device frames were also sent over to Veronica to incorporate into the game.

Advertures in Moominland Button-01 moomin shop

 

 

 

 

FINAL FINAL CW VG Internative Presentation Pitch 3.4.17

Not only did I want the game to be interactive, which would lend to a promotion of 15% off at the Moomin shop at the Southbank Centre.  I decided the initial promotion would easy to access with a 10% off tickets to the event from scanning the icon on the packaging design via Blippar app.  On the screen featuring the promotional code, I wanted it to have an taster video of The Adventures in Moominland to the target audience could get inspired by the taster video.  I changed the video to have the ‘Southbank Centre’ logo featured throughout the video.

In the blippar app there would also feature a button on the history of the Moomins so the user read about the author and the creation of the brand.  The blippar app would also feature a Cawston Press button, which would lead the user to the Moomin Quest game.

MOOMINS QUEST

Following the game, there would be a promotion code to receive 15% off at the Moomin shop.  Again, to enhance the user experience I wanted to create a video for the user to have an interactive experience of visiting the shop.  Within the Moomin shop there would be an interactive game and story books for the consumers to enjoy and get inspired by the Moomins stories.  This is featured in the video.  I have included the Moomin shop logo to remind the viewers on where they can have this interactive experience.

Finally, I decided on a post event campaign via social media.  This detail is written in the presentation.

Advertisements

Making Web Pages – The Design Museum Exhibitions Page

Copying the information on The Design Museum Exhibitions page, I created a webpage from this.  Firstly, I drew out my wireframe for the page.

WIREFRAME

IMG_9460

TYPEFACE

Then I decided on typeface of Helvetica Neue, which created a font-family of Helvetiva Neue, Helvetica, Arial “Sans-serif” in CSS.  I applied a font-family to ensure the similar font style would appear in all browsers, should the viewer not have Helvetica Neue it would defect to another one of the sans-serif listed above.  The same font-family applied to headings tags h1, h2, h3 etc and to paragraph tags p.

DESIGN COLOURS

4 colours I chose:- Claret, Navy, Dark Purple, Dark Grey (boxes only), Black and White.  The design is contemporary, minimalistic to reflect that of the Design Museum style.

SOCIAL MEDIA WIREFRAME

A this is a simple webpage, I wanted to include some links to the Design Museums social media pages.  This will be displayed following the footer on the webpage.

IMG_9461

 

IMAGES

Following the above I chose my images, I resized the images in photoshop to the appropriate dimensions to that I chose in my wire framing as above.  By organising the images prior to inserting them into the code prevents any adjustments later on, as the image will be the correct dimensions.

Icons design, like the above with the images I chose my social media from Icon finder website.  I chose an illustrative design of the icons as I felt it reflected the Design Museum style.  I resized these icons in Photoshop to 128 x 128px to ensure they fitted appropriately in the footer and relevant to that of what icon sizes look like.

Now that I chosen, re-designed the Logo colours and resized all my images, I saved them in an images folder in my webpage folder so this are ready to connect to my coding/webpage.  It’s important that we save everything in the same folder to ensure no links are broken from missing files.

CREATING THE WEBPAGE

To set up my webpage, I used Dreamweaver.  I created and saved a webpage index.html and dragon.css.  For each webpage, the html file should have an appropriate name relating to the webpage (and navigation bar button).  For example, home should be index.html, the rest can be named as per the webpage i.e. contacts.html.  The CSS is the style sheet which will be linked to the html page to give it it’s design style.  This is all placed in the head of the html file when writing the code.  It’s important to write the title of the page as this appears in the browser.  A favicon can be inserted here as well, which will also be displayed in the page bar at the top of the browser.  I’ve designed favicons for a few websites and I usually make that 16px-16px, I believe this is the standard size for them.

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>The Design Museum – Exhibitions</title>

<link href=”dragon.css” type=”text/css” rel=”stylesheet” />

</head>

Following the head, I created the body, this is where most of the coding will appear for the body of the webpage.  To create a frame for the body I used the a div ID of page.  This is standard css div which gives the overall structure of the page.  In the header I placed the first image, which is the Design Museum logo.  The img src, is a link to that chosen file in the folder ‘images’ where I saved all my images.  I saved the file format of the image as png. to ensure the background was transparent and a recognised file format for most browsers.  The page size was set to 1920 x 1080 to allow the page to fit up to a monitor size screen.

<body>

dmlogo.png

NAVIGATION BAR

Following the logo but still in the header I created a div class inside the id page for Navigation.  Originally I designed my buttons in Ai, then I decided to make use of a CSS button generator link instead to save time as this created the rollover/hover css coding.

For the navigation buttons, I used my standard font family in the css, in the colour claret, code using hex code.  I used a strong tag to highlight the text in Bold.  When the cursor is rolled over the button the text changes to navy colour to highlight its selection.  Again, this is design in a minimalistic style to represent the Design Museum.

I created an unordered list tag and li tag to list the navigation within the bar.  The height of the bar was set in css.  This was to ensure the buttons ran side by side in the navigation bar by applying a small height.  The link these buttons to the other webpages, if they were designed.  I would have used the link tag a href and type in the appropriate webpage name i.e. contacts.html.  All webpages would be save in one folder and along with the image assets and css files.

 

</header>

EXHIBITIONS 

I wanted to created a design of blocks of information, so applying a css code of columns style and float, the column classes would then run side by side.  I resized all my images for this section so I linked them in the code from the images folder.

Below is what my webpage is starting to look like when tested in the browser.  Ensuring I ‘saved all’ and tested in the browsers as I completed each div ensured I could pick up any errors as I went along and not try to hunt down the problem afterwards.  I tested in both Safari and Google Chrome browsers to ensure the page was developing the same style in both.  This is important as it considers the viewers browser of choice, so I want it to look the same in both.

EXHIBITIONS

Design is a continually evolving subject: visit the museum to be inspired and informed by the exhibitions.

CURRENT EXHIBITIONS

15 March 2017 – 4 June 2017

Imagine Moscow : Architecture, Propaganda, Revolution

Marking the centenary of the Russian Revolution, this exhibition explores Moscow as it was imagined by a bold new generation of architects and designers in the 1920s and early 1930s.

Screen Shot 2017-04-14 at 10.03.55.pngDESIGN VIDEO

Starting to use the tags h1, h2, h3, h4 and p to display a hierarchy of information for the design layout.  Font family set up in CSS.

VIDEO 

Following the Exhibitions, I embedded a video.  I chose the video from one of the Design Museums footage.  I converted it in clip converter and saved it as two file formats .mp4 and .ogg.  I could have created a link to this footage, which would have been just as effective, but I decided to embed the video and save as these file formats to demonstrate its use.  I saved in two file formats to ensure the video would run in multiple browsers as some viewers may not be able to run mp4 files or ogg files.

I chose appropriate dimension for my video 500x500px and added control button so the user can choose to play the footage or not.  Sometimes an autoplay button can be coded.  This is useful if you want a video to run in the page as part of the overall web design, for example in the background of a page or a header.  Video usage is becoming extremely popular in contemporary website design, particularly in the header, which enhances the user experience, so the autoplay button is very useful.

<center>

<h1>WHAT SHOULD BE IN THE DESIGN MUSEUM’S COLLECTION?</h1>

<video width=”500″ height=”500″ controls>

<source src=”videos/What should be in the Design Museum’s Collection-.mp4″ type=”video/mp4″>

<source src=”videos/What should be in the Design Museum’s Collection-.ogg” type=”video/ogg”>

</center>

</video>

MORE EXHIBITIONS

For the more exhibitions design, I wanted to vary it to the above exhibitions design, so I used a figure class with a float for the image coded in css.  This allowed the text to get pushed over to the right of the section div.  I chose my images and resized them prior to the coding.

Screen Shot 2017-04-14 at 10.04.58.png

<div class=”section”>

<h1>EXPLORE MORE EXHIBITIONS</h1>

<section>

<figure>

<img src=”images/futureexhibitions.jpg”/>

</figure>

<h2>Future Exhibitions</h2>

<p>Explore upcoming exhibitions at the Design Museum.</p>

</section>

FOOTER

Applying the same method as that in the navigation bar to create the footer layout.  Further design to both the navigation bar and the footer would be to link the pages associated with each button by inserting link coding for each button.  I have demonstrated how links work in the social media icons buttons below.

Screen Shot 2017-04-14 at 10.05.08.png

SOCIAL MEDIA BUTTONS/ICONS

To create social media buttons I first chose my buttons from icon finder and resized them in Photoshop.  Wrote the code for each button and link.  Image source to the image i.e. Facebook, the inserted the a href tag as a link to the chosen URL.  The Facebook icon is linked to the Design Museum Facebook page.  This method was applied to all buttons to link to each of the social media websites representing the Design Museum.

<fa>

<center>

<img src=”images/facebook.png” height=”50″ width=”50″><a href=”https://www.facebook.com/designmuseum/&#8221; class=”fa”></a>

</fa>

To close the body and html page.

</body>

</html>

App Reviews – Top 3 and Worst 3

TOP No 1 – SPOTIFY

The app is a music app with most artist listed.  Paying a student fee of £4.99 a month being able to listen to any music artist and genre is a great way to enjoy the music experience.  The app allows the user to store music in playlist and follow artist and friends, even some artist have listed their playlists as public, which is interesting to see what they like to listen to.  To enhance the music listening experience in a collaborative way. Being able to log in on multiple devices is also a great feature.   Stuck for inspiration? Spotify will suggest new, but similar artists, and daily mixes for the user based on their saved choices in their playlist, separating the genres in the selected daily mixes.

When attaching to a Sonos speaker, the user can download the app to their screen and place their song choice in a queue in a shared screen with multiple users.  This is a great way to share the music listening experience with users and is also handy in an office environment as music brings people together!

https://www.spotify.com/uk/

Example shown on a mobile device

  1. Your Library – categories in your library.
  2. Daily Mixes based on your saved artists, with new artist added by Spotify/ Suggestion on artist to follow.
  3. Browse – browse all and suggested playlists.
  4. Browse genres and moods – icons simply divide the categories to offer an easy interaction for the user based on how they are feeling.

IMG_9332IMG_9329IMG_9330IMG_9331

TOP No 2 – BBC IPLAYER

The user can experience television programmes through this app on multiple devices.  Although, it doesn’t always like Safari browser if viewed through the website, switching to Google Chrome offers a clear picture (tested on iMac).  It’s a valuable app for entertainment and learning experience.  Some users wish to use it for live programmes listed in the TV Guide.  I personally select from the categories ‘Arts’ or ‘Documentaries’.  There is usually enough added in these categories for entertainment and educational learning at least daily.

The navigation is clear for a smooth user experience.  The interface is a touch screen with scrolling up and down and swiping left to right to show the categories.  The still  images offer the user an experience to see what the programme is features, with a description underneath the image and valuable information about its duration/time available and other episodes.

  1. TV Guide.
  2. Home page with Categories and Channels.
  3. Selection under the Arts Category, with images to represent the programme
  4. Selection under the Documentaries Category, with images to represent the programme.

IMG_9334IMG_9333IMG_9335IMG_9336

TOP No 3 – 3 MOBILE

This app for the Mobile Network 3 Mobile is easy to use and will suit all users as it’s a simple design with great functionality.  The user opens the app and turns off the wifi to access it’s mobile customer plan and usage.  It’s an interactive screen with clear icons to navigate and clear plan and usage details which are up to date for the user experience.

As well as the current usage for the billing month and when the next bill is available, the user can access previous bills and full statements.  It’s a simple app with great functionality to allow the user to keep on track with their data, voice and text usage as well as billing.

  1. Usage screen, updated and current with a turn off of the wifi button to access the network direct.
  2. Billing screen – monthly billing and option to view bills in full statement PDFS.

IMG_9405IMG_9406

 

WORST No 1 – RINGGO (LONDON BOROUGHS)

This app is designed to enable users to park their vehicles in London borough areas.  Once logged into the app and parked in a designated bay, the user can type in the display screen on the app the Parking Location Number.  This will bring up the street name of the parking area.  The app can be used for visitor parking or pay by meter parking.  Whilst, I think this app has many benefits for the user; such as hassle free cashless parking, as it’s connected to the users chosen bank card.  The transition to park and go is not hassle free.  The app is not available in all boroughs in London and therefore you still need to have cash to pay by meter in some boroughs.  Also, and the most frustrating error with this app, is it ability to work, especially at the most crucial of times!  

Experiencing errors with this app has become quite a habit.  It’s inability to cope with the vasts amount of people logging into it at once, just lets down the user experience and it’s functionality.  This is particularly noticeable at peak/rush hour times.  Although, regularly it does not work even at the quietest of times.  It often logs the user out and doesn’t allow the user back into their account.  Cash is king when it comes to this app, so the user must always be prepared to not be able to log in and park efficiently.

  1. Log in details loading, but fails to log in.
  2. Logged in first interface with button for ease of navigation.
  3. Booking screen.

IMG_9396IMG_9402IMG_9401

WORST No 2 – PAYPAL

PayPal is a well know app, which enables users to pay for good or services without revealing card details online.  This is quite good for security and data protection purposes.  One feature that isn’t available on this app is its ‘message centre’.  Should a user have a query or issue with payment, they need to log into PayPal from a computer to be able to access the ‘message center’ button to be able to contact customer services for support.  Upon receipt of a message from the customer service, this is received by an email notification to the users linked email from the message centre. The only way the user knows it has a message from customer service is by an email notification, which doesn’t display the whole message.  Unfortunately, the user can only access the message via the message centre, if they log in on a computer, which is not easy to find as it’s only in the footer under ‘Help & Contact’.  Accessibility is limited for many users as most user would access from a mobile device or possibly a tablet device. 

  1. Logged in screen of Paypal user.
  2. Selection of services, not listing message centre.
  3. Help & Contact button on the footer of the website accessed via an iMac desktop screen – not available on the app.
  4.  Desktop screen of Paypal, accessed via the footer of the website to reveal the message centre button.

IMG_9399IMG_9400Screen Shot 2017-04-11 at 22.10.12screen of paypal.png

WORST No 3 – MET OFFICE

This app was one of my favourite apps, it’s now moved into one of the worst apps since it’s recent update.  The updated UI design now features adverts, which not only make this apps interface look tacky, it also distracts the user from it’s functionality with flashing adverts.  There is an option to remove the adverts, by opting to pay a fee of £2.99.  Surely the Met Office would have funds from the advertisers themselves, so asking the public to pay to remove ads is just appalling.  Their response to my complaint, did really back it up much either.  The option of paying for the app would have been much better than leading a user into a scam style payment option.  I certainly would have preferred to pay for the app then pay to remove adverts!

  1. Updated UI featuring advertising at the footer of the app.
  2. Fee UI screen to remove the app with the cost of £2.99.

IMG_9403.jpgIMG_9404.jpg

IMG_9397.jpg