OUGD504 - A Brief History Of... Website - Evaluation

General Comments

This project came on the back of my summer project, which was always going to make it difficult for me, because my summer project wasn’t something I did very seriously. I prioritised having fun with it rather than giving any real thought to what it might lead to, and consequently the content I’d produced wasn’t really the same nature of the sort of content that I needed to produce retrospectively. By this I’m particularly referring to the quality of the photographs and the lack of text based research to accompany them.

Successes

Looking back at the project I’m confident and pleased with the fact that I went down the right route with this project in terms of creating a resource, rather than doing something historical or informative. This was due to the nature of the content I’d got from my summer project, and it meant that I didn’t have to devote masses of time to generating more content, which gave me more time to concentrate on work on the site itself.

I’m also very pleased with the final layout and branding of the site. I did quite a lot of development into the layout and grid, and I think it shows, as it does immediately look like a resource that people can add to, which is what the idea was in the first place.

Changes

Unfortunately I wasn’t able to code the website due to being unable to have any more sessions learning to code beyond the introductory session. After attempting to start coding the site myself with a half-basic understanding of HTML, this is something that I feel would’ve presented more problems to me, and would’ve contributed to the project bring much more time-consuming, especially in terms of getting the banner to float over the website.

Like I mentioned earlier, in hindsight I should’ve taken the summer project more seriously in my documentation of it, which would’ve resulted in a more complete website in terms of text, as well as having much nicer and more appropriate. I feel this is something that I appreciate now after the Numiko talk, and their declaration that “content is king”. But other than this there’s nothing else I’d have considered doing differently apart from giving more thought to the colours I was going to use, as I’m still not sure if I’m happy with the caramel colour I used.

Going Forward

This is the first time I’ve ever had a go at creating a website, and I think the experience of having a go at it, as well as the Numiko talk, has given me a much better understanding of the process, as well as now being a bit more knowledgeable on things like SEO. I’m now much more confident that I could be a more web-based designer in the future, and the idea that “content is king” is definitely something that appeals to me.

OUGD504 - A Brief History Of... Website - Scrolling Mechanism and Website Variations

Given that I wasn't able to code the website, and until this point have only been able to verbally explain the way the website will work when the user scrolls through it, I made a small animation to show how it would work.

The mechanism would work the same across all the blogs, below shows how the recipe blog would look with the scrolling mechanism implemented.

When the website is on a 1048x768 screen, this is how it will look.

This is how it will look on a 1366x768 screen.

If the window size was reduced, the content of the page would shrink to the width of the page, and work as two sub-pages which you could toggle between at the bottom of the page by clicking in the circles. The column in which the text is remains thinner than the column the images are in, as this keeps the golden ratio concept running.

   

   

The mobile variation is similar to the reduced screen width variation, except the images for suggested posts are removed, as including less images and links will use less data. For reasons of data reduction, the mobile site will only function as a blog, you will not be able to submit through the mobile site. The background colour is the same across both, as this keeps the mobile site visually consistent. I deemed this to be more important than conceptually consist given how the mobile site is meant to be practical.

   

   

OUGD503 - YCN - J2O - My First Attempt

This is my first attempt at the re-designing of the J2O bottle. I think it's a lot more modern compared to the original one. In general the more minimal design lets your eye focus more on the colour of the drink, which is one thing that might attract you to buy it, but at the same time, the large amount of white on the bottle will stand out against the darker colours of beer bottles and the luminous colours of alchopops such as WKD that J2O would be competing for visual attention with in the mini fridge behind a bar. 

Despite the general lack of colour on the labels, it still retains the fun characteristic that Britvic were after through the shapes and offsets in the logo, it's just been railed in a bit to make it less childish. It's more like organised fun now as opposed to spontaneous fun, which I think would reflect a characteristic in the stereotypical drinker of J2O according to their wording in the brief.

I'm not as happy with the neck design as I am with the other bit. Seeing it in context highlights some of the problems with designing something for 3D on a computer, as you can't see how it's going to look wrapped around the bottle neck. I think the first thing that needs addressing is that the lines that create a border give of a feeling of restriction, which is the opposite to what it should be doing. As well as this, the type is too large and the yellow doesn't show up as well as text, so thing is something I'm going to have to re-assess in terms of hierarchy. Because the text is too large, you can barely see the splashed from a direct front on view, something which would make the brand seem more fun.







I'm very happy with the type hierarch of the small text. I managed to make it so it was all readable, the hierarchy is clear and it looks pretty discrete. I judged it pretty well so that where the overlapping section sits on top of the the black area, the gap between the texts looks like it could just be a new paragraph. The photograph doesn't show that because I only used white tack to temporarily stick the label to the bottle.











On a more general note, retrospectively I realise that the labels don't really clearly communicate the idea of two things being blended, which is something I need to take another look at when I'm making changes to the design. 

OUGD503 - YCN - J2O - Current Packaging

I went into Morrisons today to see how J2O was displayed in-store. This will help me assess how best to approach the re-brand in terms of what space is important and how best to make use of that space.

This was what I found. The first thing I want to mention is that Morrisons saw fit to put it on offer at the same time as Shloer, which is one of the drinks I identified that I want the re-brand to give off the same messages. Seeing it next to Shloer on the shelf makes me realise what Britvic meant in the brief about J2O being seen as cheap and chavvy. The Shloer bottles look a lot more refined than the J2O packaging. I think showing a bottle of J2O on the packaging gives the display a very geometric and structured look when displayed like this, and this goes against the fun natured brand that Britvic want. I also think that the gradient on the packaging is unnecessary, as it's not particularly meaningful, and when you combing this with the way that displaying them on the shelves gives them a slight shadow anyway.






On top of this, I find it pretty uneccessary to show what the drink looks like given that the sides are open so the customer can see the colour of the drink anyway, which is inevitably not as bright or attractive as it is on the packaging, as shown below.
















The packaging can be displayed either way round, which means that the bit on the top has no real purpose other than to make it look nice. But this bit again goes with the somewhat childish use of colour, it reminds me somewhat of the twister ice cream (here), which is a very child targeted product.

One idea I do like is the use of thin lines of colour being used as decoration, as it's simple and quite subtle. I don't think they need to lead into a great big bulky central point like on the top of the packaging though, I think they're fine as they are, and need slight adjustments rather than being completely re-thought.

I notice that the picture of the bottle on the back is a lot fatter than the one on the front, and for seemingly no reason. This sort of inconsistency should be fairly easy to avoid. I also think the block of text is too blocky, and doesn't' compliment the curves of the bottle or the curves of the artwork very well. The whole thing doesn't seem to show very much consideration for spacing, and the packaging in general is very busy.

OUGD504 - A Brief History Of... Website - More Photo Preparation

Using the 16 photo's I edited the other day, I decided to prepare the images for their use when they'll be used as links to other similar posts, as well as the 6 images that I used across the top of the homepage. This involved cropping and rotating the original images to the appropriate sizes.

This is the result.

 

 

 

 

 

OUGD504 - A Brief History Of... Website - Photo Preparation

Having known what size my photo's need to be from my mock ups, I took the original photo's from my summer project and edited them to be lighter with a bit more contrast, as well as cropping them down to have the proportions that they will need to be when on the site. 

As I identified in the UXD Session, the websites main use will be to give people ideas for desserts at dinner parties and stuff like that, so I narrowed down the content to 16 images rather than all 32, as this allowed me to exclude the ones that weren't really appropriate for dessert, were't particularly inventive, or weren't particularly nice. 

These are my photo's.

Argentina - Caramel Ice Cream

Belgium - Chocolate Sauce

Bosnia - Nutella and Coconut

Chile - Chilli and Tomato

Columbia - Coconut, Sugar and Cinnamon

Costa Rica - Golden Syrup and Orange Zest

Ecuador - Blackberries and Cream

Ghana - Pineapple

Honduras - Blueberries, Raspberries and Sugar

Iran - Pear, Honey and Cinnamon

Ivory Coast - Melon and Lime Juice

Mexico - Mango and Avacado

Nigeria - Grapefruit

Portugal - Grapes, Pepper and Cinnamon

Uruguay - Peach and Crushed Meringue

USA - Bacon with Maple Syrup