Responsive: J20 Brief

J20

Redesign J2O to become more appealing to adults

Background

J2O was born out of Britvic’s historic expertise in juice blending. When it launched in 1998, J2O was a pioneer in the adult soft drinks category, enabling consumers to have a satisfying drink experience that didn’t disappoint when socialising with friends.

By expertly blending different fruit juices with their unique aromas, J2O is carefully crafted to create a satisfying and multi-dimensional taste experience. The drink delivers strong, well-rounded flavours that have a velvety, sweet mouth-feel with lingering fruit flavours and a zingy finish.

However, despite a strong heritage story around blending, many consumers are not aware that J2O is a blend of two fruits.

Target Audience

25–35-year-old men and women who love getting together with their friends and family, both in and out of home. They are grown up, confident, have an established social network, and feel relaxed with those around them. They don’t need alcohol to boost their confidence or lower their inhibitions and are happy to interchange between alcohol and soft drinks.

Creative Challenge

As it stands, 40% of J2O consumption is by those aged 16 and under, but we’re wanting to change that. The current artwork design is not seen as ‘adult’ by many; the colours are viewed as bright and childish, and some consumers have even described it as cheap and ‘chavvy’. We’d therefore like you to redesign J2O to appeal to a target audience of 25-35-year-old men and women. The design should make them proud to be seen holding J2O in bars, restaurants and at home, and should bring through J2O’s expressive, unpretentious and playful personality.

Designs must be created for both our Orange & Passion Fruit flavour and our Apple & Mango flavour. Please also come up with packaging designs for the 4pk packaging for each of these flavours. You'll find cutter guide artwork in the Project Pack.

Our flavour descriptions are:

Orange and Passion Fruit
J2O O&P is a perfect marriage of the honeyed and fragrant passion fruit and citrusy orange tangs

Apple and Mango
J2O A&M is a delicious combination of mild apple flavours mixed with the sweet mango aromas that create a smooth, mouth-watering drink.

Considerations

• Ensure that consumers know that J2O is a blend of two fruits.
• The J2O logo and bottle shape drives consumer recognition so must be maintained.
• The J2O brand is synonymous with the colour green that is on all of our packaging. Please make sure that it features in some capacity when coming up with design ideas.
• In the past, the depiction of fruit on our packaging has increased taste credentials so although it’s not compulsory to do so, bear this in mind when coming up with design ideas.
• We would encourage you to visit bars, pubs and supermarkets to view J2O against its competitors to better understand the scale of the challenge. 

Creative Requirements

Please share up to eight images in total showing your solution for individual bottles and four pack, along with supporting information that briefly articulates your idea in words (up to 400 characters)

Should you wish, you can also submit physical material such as prototypes and mock-ups etc.

We’re also interested in seeing the creative process that led to your final idea. This can be hand sketches or alternative design directions you explored before selecting your final one.

Deliverables & Additional Information

For guidance on how to submit your work, please adhere to the main Deliverables information which can be found at the YCN website.

Any additional elements referenced in this brief can be found in the supporting Project Pack which can be found in the Student Awards section of the YCN website.

Responsive - Working with Briefs: Rebranding Yahoo

Target Audience: 13-18 year olds


Whats wrong with Yahoo:

- Colour: Its boring, dated and isn't fresh or vibrant. Purple suggests luxury and a treat when actually Yahoo needs something which you would use everyday.

- Clinical 

- The Type: Doesn't attract a younger audience.



Whats right with Yahoo:

- Icons: They're quite nice.



What features should it have to attract a younger audience:

- Personal Aspects:  Being able to modify the website to suit you. Being able to change simple things like the colour and background picture to being able to pick and choose what news you receive by selecting certain topics and hobbies. This way the website can work for both 13 and 18 year olds - they won't like the same layouts or have the same interests. Being able to personalise it removes this problem.

- Greeting: It knows them as a person and greets them when they log in as well as suggesting what they might like to read or look at depending their hobbies.

- Syncing to Facebook, Twitter, Instagram etc...: Allows everything to be in one place, as one news feed. You can upload something to all of them at once or selected ones depending. Making it easier than ever before to be connected with everyone.

- Weather: Icon or illustration of a person wearing appropriate weather clothes to show what the weather is like as well as a temperature underneath. A personal Avatar which could be modified to suit the person.


Making Yahoo a more interactive website:

Different sections with appropriate yahoo related names such as "Yah Hobbies" Being able to edit the details to really make the website suit the individual.

An Avatar which can be personalised and edited to look how you want. Fun element which also gives you information and tips etc...

Syncs with your calendar - reminding you of important dates or things to do as well as your mums birthday etc... Stay organised with yah calendar.


Graphic style:

Flat design, using brighter colours which could be adjusted.

These are our final sketches and plans for the website. We decided to go with Yahoo Life, to brand it as more than a search engine. If it were to just be with a search engine then it would no compete with google. This way it provides a multi-stream newsfeed for all social media, a calendar which syncs with the computer and phone to keep your life organised as well as a selection of games and quizs to play on the go. The page is modified by the user to suit them and their needs.

"A Brief History of..." (Study Task 07): User Experience Design

Its experience not just usability. The usability is a tiny aspect of the experience. The experience is how it affects their life e.g. Apple - Iphone, They thought how it would work in day to day life etc... Sales went up and blackberry sales went down. Take into account their emotional reaction and connection to the product.

Hand dryers- Push and Dyson. Dyson is more thought through, it claims to be more effective and hygienic. It looks nicer and is branded well so people prefer it even if it isn't more effective.

Yahoo and Google - Yahoo is trying to be everything, this could make it a better experience but no, google is neat and has all the same things but tucked away so it primary use is a search engine. Yahoo having all this information builds its strong identity however google builds an identity around what you want it to do.

Garretts Website
What is the point? Why does it exist?

- Objective: To get people interested in the history of Cyprus.

- User Needs: To easily navigate around the website and learn about Cyprus or gain an interest in learning about it.

- Content Requirements: To cover a lot of information through and illustrated and interesting layout.

- Function Specification: 3 pages

- Information Architecture: Infographic style, 3 column grid, 3 categories

- Interactive Design: Click Buttons and Links to other sites

- Navigation Design: Click on different pages through links which are clear. Same buttons on each page.

- Interface Design: Simple and clear buttons nothing there that doesnt need to be.

- Sensory Design: Visual and Audio could work, visually lots of colours.

User Research: Real life user research. goals of particular groups, this ends up as personas. Key Goals - Do they have a task to complete quickly or time to enjoy it. Consider carefully what content is needed.

Persona: Someone who wants to learn about Cyprus but doesn't like reading heavy bulk more of a visual person who remembers key facts through illustrated points and the use of colours.

Content Stategy: The information needs to be in a simple and clear layout. Everything you want to find should be found in the first three seconds or else they will leave. Hierarchy - key facts and information should stand out to catch their eye and pull them in.

"A Brief History of...": Website Lecture

Html - hyper text mark up language

XHtml - Extended hyper text mark up language

CSS - Cascading Style Sheets

WYSIWYG - what you see is what you get

SEO - Search Engine Optimisation 

FTP - File Transfer Protocol 

URL - Uniform Resource Locator

HTTP - Hyper Text Transfer Protocol - what gets the information to their screen after they type in the url. 

UI - User Interface - Not just a website, an App etc...

UX - Use Experience - you design to consider the user experience, how easy and engaging it is etc.... the experience has to be appropriate to the target audience.


Limitations are governed by this language. Below are some limitations:

Web safe colours 
Only 216 colours which work across all devices. When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 "web safe colours" were identified. 

These colours were reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code. 

Red - #FF0000
        #FF0

White - #FFFFFF
           #FFF

Black - #000000
           #000

Red 256 x Blue 256 x Green 256 = 16,777,216

The RGB colour mode is capable of reproducing 16 million different colours.

A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be:  rgb(255,0,0)

Web Safe Fonts

For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.

Some common font families:

Georgia, serif

"Palatino Linotype", "Book Antiqua", Palatino, "Times new Roman"

You must use quotations or else it will see each word as a separate font.


San Serif

Arial, Helvetica, Tahoma, Geneva etc...


CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.

However using font-face breaches licensing and copyright laws related to specific font foundries.

There are many free font websites which include free license usage for @font-face kits including font squirrel.


Size, Dimension, Pixel Resolution

When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.

800 x 600

1024 x 768 - Work with this size

1920 x 1080

2880 x 1800 (220dpi)

How do you get a website to look good on a computer but still work on the mobile device.

File Format

PNG - Portable Network Graphic

GIF -  Graphic Interchange Format

PDF - Portable Document Format

JPEG - Joint Photographic Experts Group

72ppi - massively outdated pixel ratio, computers could produce at 96ppi. Keep it lower firstly because it will take ages to load, and secondly because it will cost bandwidth.

RGB

Lossy 
Compressed.



Creating the website Y Frame:

768 x 1024 ppi. Top section take 160pixels off for logo and search bar etc... That leave 608 for the rest of the container. 

<html> - from this point onwards we will be coding in html language .

<>

No design goes between the head tags. The only thing that goes there is the other functionalities of the website. The SEO goes in there as well. It is not visible in the design but it is in in the browser.

Anything that you want to show up has to be in between open <body> and  close </body>.

The * means that it hasn't been saved since changes have been made. 

Index.html = home

The website shown as running.

Why to use CSS over HTML

On html each page would have to be coded on each individual page. On CSS you can create a style sheet with all the coding, this can then be linked to each individual page. The type, colour and size etc... would then only have to be written once rather than on each individual page.

Generic CSS which links to HTML.

Open curly bracket select font family. semi-colon ends the command.

The CSS file allowed all the code to be written in one page and then inputted as code into the appropriate web pages.

The green background box was placed in the top left corner by default also with a white pixel border. The coding only works from the left side so the box had to be positioned in the -512px to the left. This meant the middle was bang on the left. Changing the top to 0 got rid of the white border. I was then able to change the left side so that it was in the middle.

"A Brief History of...": Mock up of Grid Layout with the Rest of the Information

I decided to continue with the grid and try to fit the rest of the information into it. The three categories left were: The Land (which would be its own page), and Abandonment and the Invasion (which would be a joint page).

The Abandonment page definitely works as an infographic. At first I really struggled to get the positioning of the layout correct but decided the best way to show it would be people entering Varosha as a tourist destination and the people being forced to leave the other side. This nicely illustrates what happened as well as providing clear sections for informative text. 

The Invasion again worked well. 

When it came to the land I first wanted the map to be at the top just under the key but when it came to fitting information around this I really struggled.

I decided to then change it so the map would be in the middle and information could be spread around the map. Having northern facts above and southern below.

"A Brief History of...": Mock up of Grid Layout with Information

I began working with the grid that I had created using Fibonacci's golden ratio. I used the bullet point information which I had set out previously and began to experiment with how it would fit into the grid. I wrote in the main figures and key words which I want to stand out and then just used straight lines to represent bulk text.

The first set of information I worked with was the history leading up to the invasion. I worked in the three column grid and tried to establish a hierarchy of information so that it is read in the correct order. Although it is important that there is a distinction between the title and the facts, it works well in the set layout because different facts and information will stand out to different people and catch their eye. The use of an infographic allows me to catch their attention so that they want to keep reading whilst educating and informing.

This layout fits nicely into the grid and even when the grid is taken away the information is still legible.

 Although I like this layout I don't think it is the best way to utilise space when talking about history. A time line feels more appropriate both in the presentation of the information as well as being able to illustrate the points more, meaning that less text has to be used.

Presenting the information in the time line works so much better. It allows for less bulky text and becomes so much more visual. This layout looks less cluttered and becomes easier to read and take in. I'm still not happy with the positioning of the title but its definitely getting there.

Using this concept of a time line, I decided to try the same thing with my Green Line information using the Green Line to divide up the page like the time line above. The only problem with this layout is that it wouldn't be a responsive website, it would struggle to work on the mobile device or on a screen that wasn't horizontal.

The green line information works well in the same layout and the same grid. The green line looks like a river in the drawing so once its designed in the adobe street it will hopefully become clear that it is the green line. 

All the information currently would work well as one page which you could scroll down through. The Multipage aspect would come into play when I create a similar but shorter infographic about the Land and the Division/Abandonment.

I am happy with the grid and think I will continue to work with it as it fits the infographic style.

"A Brief History of...": Exploring Infographic Grids

I went back to the Nicolas Fenton Infographic and decided to try and divide it up. It fitted nicely into 4 columns but horizontally things are on different levels with eachother. It works well as an infographic and because the 4 columns are clearly defined it means  it is simple and easy to read and navigate around.

"A Brief History of...": Exploring Website Grids

Since I have had a few lessons into creating a grid using Fibonacci's golden ratio I decided it would be a good idea to look at websites that have the same purpose and target audience as mine will. I focused on websites that educate about Cyprus,  I tried to put them into a grid so that I could see how they were working and perhaps get an idea about what grid would suit my website. I want my website to be infographic based as I feel it is the best way to get across a heavy amount of information in small readable chunks, because of this I will also do the same grid layout on some infographics and then try and find a happy medium which will display the information nicely but also work on the web and mobile device.

Website One:

The first website I looked into was called Just About Cyprus. I began to fit it into a grid, I didn't think the grid would be overly complicated as it is only one column of text.

This was the final grid, not that useful for an infographic web design.

Website Two:

This website fitted into a slightly more complicated grid 4x4 but with a slightly larger column on the left for the different options. 

The final grid is definitely more useful than the previous website.

Website Three:

This websites design is a lot neater and aesthetically pleasing. The grid is quite clear and the images and type fit neatly into it.

As the page was slightly longer I decided to see if the rest of it would fit into the same complex grid, and it did! I definitely think this is a much better grid to be working in as the website does just look so much better than the other two.

I've found this task really useful its really applied the knowledge and concepts about grids to practice.  I feel more confident to create a website in the grid as I can really see the advantage of it. I will definitely do this with a infographic as I feel it would be useful.

Responsive: Research into Herb Packaging

I decided it would be a good idea to research into other herb packaging not just growing your own herb packaging. I found there was a much greater range of design and the packaging was clean and seemed to be aimed at a younger audience; young professionals in the city. 

One thing that I noticed across the packaging was the use of cut outs which would show through to the product. This allows the customer to see what they are buying as well as giving it an organic feel. The texture and colour of the herbs comes through and really pulls together the packaging adding another, almost interactive layer. 

The use of brown paper and stock has been prevalent in the design of the packaging. This also gives the impression of natural, trustworthy and healthy.

The pattern and style ties them all into the same brand but the use of contrasting colours allows the products to stand out individually.

I am a huge fan of this Urban Herb packaging. It is neat and crisp and unique whilst at the same time being practical. The creation of the flower, a very natural shape, at the top of the packaging works well by suggesting you are getting into nature. The use of colours and simple printed image promotes the natural 'grow it yourself' elements. On a practical level, it stands out on the shelf and draws in the viewers eye. It is easy to stack and place due to the shape. It also attracts a wider range audience, equally would make a nice gift; I would want to buy it just for the packaging.

I really liked how the simple type is cut out so that it shows the brown through. The use of negative space is intriguing. 

This seems a lot more child/teenage orientated the use of brighter colours attract the eye. The organic healthy look isn't as strong but it is replaced with more of a fun, exciting idea to interest them. 

The branding of fresh herbs but showing them in clear packaging reinforces the idea that the customer knows what they are buying. I'm not sure about the type or design itself, it seems to be a very heavy font for such a natural product. However the idea of showing part of the product works well.

Love this design, neat clean and still feeling personal. The fonts all work well together and the string adds an extra interactive element.

Much more modern take on the idea of growing herbs. 

I love the use of colours in combination with the font and layout. It has turned a rather boring product into something I would want to buy just for the packaging.