You can view my final presentation here;
https://www.icloud.com/keynote/00003OjntTjx6Ny3q0vcozsVQ#Coachella_-_Presentation
Category Archives: Y2 Interactive Communication Practices Part 2
The Coachella Redesign, using material design
Evaluation
This project went really well. I feel like I was able to learn a lot from the learning curves I put in place. The only downside I can see is that I wasn’t as successful I had imagined I would be with the Polymer Ploject, failing to implement it in anyway into my final project.
The overall new design and layout is great and has good feedback, although there are certain techincal and design aspects I could improve on, these include;
- Reviews in the lineup confuse some visitors
- Autoplaying music on both the homepage and artist pages are dislikes, and would require controls
- Chrome has a bug that only shows the left column figcaptions, which contain the artist names shown here;
- In Tickets, I switch from a grid view to a card view. There is no consistancy here, also the images also feel way to large and the indication of Standard & VIP is not distinct enough.
- Info about the venue, dates, tickets, etc. are hidden and the hierachy focuses too much on the artists and experience of being at the festival rather than selling tickets.
- Logo is based on the Californian Sunset, the design could reference the time of day the user is visiting the site and influence the colour pallete accordingly.
- Lineups are collectables, the traditional lineup format should be available to the user to download or purchase.
- The reviews are coded in, which means the reviews stay the same. Instead they should draw from a database and change everytime the page is refreshed.
- Allow user to click anywhere within the page on the enter page to access the site.
- There is no animation using the Polymer Project
- The artist pages music autoplays, in the designs I had iTunes style controls
- On the artist pages, I show the albums, I would like to be able to hover over each and have the option to automatically play via spotify or iTunes.
It is important to note that while there are some issues (based on opinion) with the font size throughout the site, it is important to note that Google Material Design has influenced the design massively, and by sticking to their rules, created debatable issues, like the font on the landing page.
Overall I am very pleased with the outcome, and if I were to do it again I would change very little apart these points.
Old VS New
I think it is a vital part to note how far the design has come compared to the original! (Old on the lft, new on the right)
The hompage went from a then strange structure containing too much infformation and not structure to the site to a more boxxy format. I containtains a lot more heirachy and takes more importance on colour coding;
The lineup page went from being a list of names to an image of an artist complete reviews;
The artist pages were massively improved. They contained only an image and social links, the new layout gives the artist a dedicated page. It contains an image of the artist, an overall theme, imformation, albums and social links;
The website links
The complete website can be visited here;
http://caringforyorkshire.co.uk/
and the Polymer Project attempt can be visited here;
What went wrong?
When trying to code my actual website with the polymer project. It did not go as planned as the code was harder to understand that I had comprehended, and I was unable to achieve the desired results below is my code and proof of what I achieved.
See the live version at http://caringforyorkshire.co.uk/
The actual files I coded here;
You can compare this to the mockup I original made;
As you can see almost every screen shown here is distorted, and as it could be adjusted it goes to show that adding aniimations into a webpage using the polymer project isn’t as easy as you’d expect.
Coachella & Apple
There are a lot of things that connect Coachella Festival with Apple. Every year Coachella films the entire festival and it is available to stream on the Apple TV. In September 2014, Apple announced their Apple Watch and went on to release it to the public on April 24th 2015, five days after the Coachella festival had finished. This allowed them to use the entire month to build up the launch of the Apple watch. They gave an Apple watch to two performing artists Drake (31.5 million Twitter followers) & Beyonce;
(14.2 million Twitter followers) and an Apple watch to two VIP attendees Pharrell (8.7 Million) & Katy Perry (87.1 Million);
This alone gave them a total audience of at least a total of 141.5 Million people.
Last year Coachella introduced Apples’ iBeacons to help the attendees get around the festival. In 2016 Coachella have added the ability to pay using Apple Pay. This means visitors will now be able to use iPhones and Apple watches to pay for food and drinks at the festival.
Therefore It only made sense to use Apples’ style of marketing in an ad showing how the coachella attendee can use the mobile guide. To start with I used Apples’ own video advertising Liam their recycling machine;
Then I made the following video in the same style;
Tools I used
The most important learning curve gained through this project is the applications I learned the use of during the process. This is the list of programs I learnt;
Illustrator
Brackets.io
Emmet
Beautify
After Effects
Polymer Project
Zurb Framework
Slack
GitHub
Filezilla
GoDaddy
cPanel
Google Material
Building the site
I used the foundation framework to build the site to be fully responsive. Below are all the different code that I used.
I found that the code worked well and I developed my skills with the time I spent working on the project
Mockup of the site
Since I am exploring Polymer Project for the first time, I decided it would be important to mockup my designs with the animation i wanted to implement so I can prove the clear differences between plan and end product. The mockup is something I made in Adobe After Effects. You can see it here;
Designs & User Journeys
These are the designs and user journeys that take place with them. This top one is the desktop version showing the order of the screens.
This second one shows the designs of the website but also the order in which the user would visit them.
akbrodie.wordpress.com 