Evaluation

This project has been one of the most enjoyable of my time on this course so far, as I find myself very driven by live projects that have the potential to go somewhere in the real world. Working in a group was also a new experience for me on this course which proved to make it more interesting. I enjoyed having someone to work alongside and get and input on things I was unsure of. Research and project development proved to be very fruitful as part of a group, as things I would never have considered were brought to the table by Gina, which ended up improving our final piece. Time management standards were also pushed in a positive way as we both needed to coordinate to work effectively outside of Uni hours. Overall I'm really happy with the whole experience and the piece of work we created, even though there were some slight improvements that could have been made if we had more time (mostly voice-over related).

Exporting

As no guidelines for the specific submission of our video were given by Airbnb or D&AD, we chose export our work as a 1080p mp4 using the H.264 codec as it's the standard and most widely compatible format. The following options were set for compressing video as a compromise between file size and quality, with audio being a standard bitrate of 192kbps.

User Feedback

Once our animation was completed we showed to a few of our peers and tutors. Overall the response was good and felt that they were able to clearly understand the concept and intent of the video we had produced. the vast majority though it flowed well and fitted in with what their idea of Airbnb was.

Recording Voice-over

Now that the majority of our animation, filming and editing were complete we set about recording a voice-over for out video. After looking for several people and plans falling through it fell to me to be the voice behind our project. Although far from an ideal voice-over sound, it did end up helping with getting the right wording and inflections during the recording. For our set-up we had small sections of the finished animation playing while we talked over it to determine what would fit in. Gina had also gone through the Airbnb site and found some facts and shorts lines that they used that ended up being useful in informing our script.

For the actual recording I used a combination of my Tascam DR-40 voice recorder and a Audio Technica AT875r Shotgun mic. This set-up gave a narrow recording field to isolate my voice and 24bit, 92kHz uncompressed WAV files which are very versatile when edited.

Once we captured a good take of each portion of the voice-over we imported the clips and arranged them on our timeline. Minor levels adjustments were also made at this point to correct for me moving closer and further from the mic in between takes.

Now that the basics were in place we turned to fine adjustments of the tone of the voice-over. After some experimentation we settled on the following settings using the Parametric EQ function in After Effects:

A boost from 3Hz-3khz sweeping slowly up was first applied to make for the inherent low-cut of the mic we were using, and a sharper cut to the extreme end of the treble spectrum (16kHz upward) was used to reduce and sibilance (harsh 'S' sounds and sharp consonants) that crept is becuase of our lack of pop-filter. Overall I'm really pleased with how the voice-over went apart from the fact the we ended up having to use my own voice because of time restrictions.

Material Design Uses

As previously mentioned in another blog post I want to try and incorporate parts of Google's Material Design guidelines into the animated portions of the app. One I was keen to include was the use of sliding drawers off the screen to store additional information. Their reasoning behind this was to make sure the user is never 'disorientated' and always has in idea of where information is coming from/going to. This principle was used to bring in uploading screens, play search results and display more information about the video.

The other Material Design principle that caught my eye was the use of circular swipes to transition to the next screen. This was used for any instance where something was being edited through a separate screen, such as the recording of a video avatar.

Video Recording UI

During the process of designing the interface for the app I did some research into how other apps handle the process of recording and editing video at the same time. The first one I looked at was Snapchat:

This app has a single button to record by holding it down and a progress bar to show you how much time you have left remaining. To me this seems like a very simple solution to the task as it takes care of editing during the shooting process. Vine is a video recording app that deals with this in much the same way, but also allows you edit and change the order of clips before you upload. This will give much finer control over the video, something especially important considering the small, 6 second time limit of Vine.

An app that also uses a similar approach with a longer video limit is the newly released video feature of Twitter. This app displays a similar screen to that of Vine but shows individual clips from the beginning without having to press an edit button. For my research into the Twitter video function I read through a development blog written by a member of the team behind it: http://paulstamatiou.com/twitter-video/

For our app we decided to go with a similar setup to Snapchat, as it is more geared to telling simple stories whereas Twitter video or Vine seemed to be more for complicated pieces of editing. I think this trade-off will mean a worthwhile increase in usability at the minor expense of complex editing functions. We also opted to include both a graphic and numeric indication of how much time is remaining to improve accessibility for any user of the app.

Web Integration

Using a mixture of X-Ray goggles and After effects we set about integrating our app's video into the existing Airbnb site. Most of it was fairly easy and consisted of just replacing photos with videos we shot:

As none of these were being tracked it was a fairly simple task to when all the correct aspect ratios and crops were taken into account.

Crit Feedback

After presenting a short clip of what we have so far at crit, we received some useful feedback from Sue and our class:

Have another person uploading stories / Other people pop up on map to show community or multiple people engaging

I think that this will be a useful inclusion in our video as it helps reinforce the idea of community that is specified in the brief.

Montage multiple stories?

This is a feature that we plan on in including but wasn't displayed in the video, this feature will be more prominent in the web portion of the service when searching for or cities are selected for the homepage.

How can stories integrate with what's already visible on the website?

These will be displayed on peoples profiles, on accommodation pages and through the map when searched for. 

Think about how the map can handle the option to view both stories and pictures. 

This is something that will take some careful planning as the airbnb site is already designed to have a minimum of wasted space.

Some reservations about the blue in the colour scheme, but if it's the brand colours then keep it

The blue in question is a brand colour so we will have to keep it.

Consider integrating user profiles / internal communication via app

This option is already part of the site and is only used by airbnb to find out about specific details on actually staying in venues. From what airbnb have done so far it seems like they don't want to try and create a social network within their site but only provide direct communication when it is essential to the running of the site. I think only having the ability to comment on and like stories is the best way to go, as it mirrors not only what the airbnb experience is, but also larger platforms like Instagram.

Maybe have a like function or 'was this helpful?'

This feature will definitely be included in the final app.

X-Ray Goggles

In order to alter the appearance of the site for some of our footage and animations I utilised a tool made by Mozilla called X-ray Goggles. This takes the for of a bookmarklet that when clicked, allows you to edit the HTML and CSS of a web page locally, as well as share your changes with others. This is going be especially useful to us as it is far faster than editing things on after effects and can be used to get 100% correct content in camera. Although it is limited in the sense that it is hard to change the underlying structure of the site it should do most of what we need it to.

Final Round of Filming

To get the final shots we needed we headed into Brighton town centre to film 2 different scenes. These will show the app in use in a web environment and showcase its ability to record looped animated profile pictures. For the web portion we decided to film in a quiet area of a Starbucks, as it provides an international connotation of a trendy urban environment the is becoming synonymous with Airbnb. We had our extra (Jess) sit down and open a laptop with the Airbnb site which will cut to an animation as with the rest of the feature displays. As Gina were both not in the scene, we filmed from 2 angles simultaneously in order to avoid any positioning errors when cutting between shots.

The next scene we filmed was the part showing the use of the profile picture recording feature. As a location we chose the Pavilion Gardens as its a famous local landmark without being too obvious. Gina was cast as the person using the app while Jess was roped in to be a B cam, in case I missed anything. Because it would be another outdoor scene we took the same precautions as before to avoid screen reflections to ensure an accurate track.

In the end it was a successful and productive day of shooting and everything was wrapped up much sooner than expected with each take being done a few times to get a backup. I think this was mostly down to the fact that it was the 3rd time we were filming with practically the same intent each time.

More Filming

In order to make sure we don't fall behind and make the best use of our time we have been filming both in and outside of Uni times. The next shot that needed completing was somebody using an iPad, and as I had already appeared and Gina would be in another part we opted to get some more people involved. The footage was shot indoors to try and add some variety and used one softbox placed across the room as a keylight and 270W bulbs bounced over the door and onto the ceiling. All previous considerations around avoiding reflections and shooting in a flat profile were taken. After several takes to get the finger positioning and composition right 2 shoots that will be used were obtained. These will then be tracked and keyed out in the same methods as before.

Tracking with MochaAE

Now that we have filmed the footage with the phone displaying a green screen it will be possible to track a pre-comped animation of our app into the shot footage. The first step in doing this was to trim down the footage using mpegStreamclip so that only the minimum frames required are left, this is because tracking can be time consuming and wasted tracked frames will slow things down. Once the clip has been trimmed down it can then be imported into the After Effects project and placed in a composition, the option 'Track in mochaAE' is then selected to open the clip in mocha.

Once the clip is opened in mocha an X-Spline layer is created of the phone and a planar layer is added. This is then tracked forward frame by frame automatically with some manual corrections, this then generates corner pin data to be used by After Effects.

The corner pin data in then copied into After Effects and applied to the app pre-comp, making it match the movement of the phone in the shot footage. Once it has been lined up the Keylight effect is then applied to get rid of a specific green channel, letting the app animation display through the shot footage:

Overall I'm really happy with how the track came out. Although the reflections on the screen made it far harder to track I think it vastly improves the realism of the final shot.

Animation style

As most of this project will be animated on screens and other motion graphics I decided to do some research into animation and transitions. For the on screen app animations I turned to Google's Material Design guidelines. These very extensive guidelines provide design rules for apps to better integrate with the overall Android aesthetic, but also general usability and UX rules. Below is a short trailer showing off some app animation priciples:

Although a lot of things like calendar and media player interfaces don't really apply to what our project does there are definitely quite a few elements I think we should include. One thing I really liked was the use of circular wipes to transition between different panes of the apps, which I'd really like to incorporate into the design. The use of sliding elements from the sides to store additional information was something that Gina suggested during the wireframing process that also fits with the Material Design framework. 

For the video transitions the swiping elements that Gina found during her research will be perfect as they add enough interest without making it too distracting.

First Round of Filming

Now that we have our storyboard sorted out we went out to film the first portion of our video. As we were already in Lewes we decided to film the portions that take place in the train station, and after some persuading we managed to get into the station with permission to film. In order to get nice and steady footage but maintain the 'handheld' and light feel of the stuff I researched I brought along my shoulder rig and added some weight with an extra battery pack. The footage was also shot in the 'Cinestyle' picture profile which gives nice and flat footage, providing the required latitude for the grading we were think of using.

Overall it went really well, with Gina filming a me as the actor. The only minor improvement I'd make if we had the chance to film again would be to bring along my circular polarising filter to control reflections on the screen and bring the exposure of the sky down in comparison to the rest of the scene. These work by splitting the natural and reflected light as it bounces around the scene, giving you much greater control of the exposure.

http://www.7daydeal.com/media//hoya_cpl_filter_effect.jpg

In the frames below you can see the potential advantage this would have provided by reducing reflections and lowering the exposure of the overcast sky:

Music Research

When thinking about the music initially I wanted to use a very cheerful and upbeat soundtrack with strummed ukulele and xylophone style stuff. After listening to a few tracks I felt it was a little stereotypical of what you'd expect from the kind video we are producing and that we could potentially go in a very slightly different direction. While trawling through keywords on Spotify I came across a band called Lights & Motion:

While a lot of their stuff is quite dark and moody I found quite a few tracks that strayed closer to the cheerful feel we are aiming for. In particular I like a song called 'fireflies' which is one of their faster songs. By not going for the obvious choice, while staying within what fits I think will help ad interest to our video. When I get back to uni Gina I plan to compare research and come to a conlcusion about what song to choose.

Film Style Research

To get a good idea of what the look of the shoot footage will look like I did some research into editing styles and colour grading. The first example that stood out to me was this one from Santander:

 

I like the very flat profile and low contrast while maintaining a slight warmth to the image. I think that if we emulated this in on our shot footage and editing it would fit very well with the aesthetic of the Airbnb brand. The editing pace was also quite close to what I want to achieve. 

Another one I found that fitted the feel I think would suit our project is this Estrella advert:

The editing pace and general feel from the content to soundtrack are a good example of the vision I have for what the project will turn out like.

Storyboarding

In order to get a better idea of exactly what we needed to film and cut down on any unnecessary time spent, Gina and I got together at mine to go over the storyboarding for our app visualisation. We cut out separate scraps of paper so we could mix and match the footage as its planned, something which proved to be quite helpful.

After going through and deciding on what features need to be shown we divided up the 3 main portions into recording using the app, viewing/planning in the app and searching. We also wanted to include the moving avatar functionality that we came up with.

All in all it was a very useful exercise because it not only helped clarify what needed to be done, but also informed specific shots and equipment choices for each shot.

Combining Findings

After the holidays Gina and I got together to compare research findings for the development of our app. I found this to be an extremely helpful exercise as it helped me gain a wider view of what was out there without any of my own bias or habits. Most of my research concentrated on previous Airbnb campaigns and their brand look and feel. Gina had also researched actual video effects and concepts for presenting our ideas which should be extremely helpful.

Wireframing

In order to get a better idea of the contents of our app and to maintain consistency when we start to work on filming and adding the app in, Gina and I sat down to wire-frame out our app. This process really helped solidify the specific features of our app that we want to highlight in the video. To do this we printed out some iPhone templates, cut them out and sketched out what we wanted to include.

Design Research

Before actually designing any physical assets, I decided to have a read through the branding guidelines for Airbnb and pick out the most relevant points for this project. Fortunately as part of the brief pack they included extensive branding guidelines that should cover anything that may come up in the design process.

Philosophy:

Airbnb have published their overall brand philosophy as in introduction in the guidelines. As with most companies of this kind they are very positive and empowering, something worth keeping in our minds while answering their brief.

Logo:

The guidelines for using their logo are also very flexible but very rich in the content that they provide. The logo can be altered in a huge number of ways as long as the overall proportions are kept constant and the logo is recognisable.

Sub-Branding:

A part of the guidelines that will prove to be very helpful in this project is the section on sub-branding. Although its very short we will have to stick very rigidly to its specifications as it directly relates to the project we are doing.

Font:

As with the rest of the visual elements, the font is very flexible, allowing for a wide range of creative styles that can be applied to the underlying typeface of Circular.

Colour:

Airbnb maintain a single 'Hero Colour' called Rausch that can be used in various tints. They also supply several accent colours that can be used to highlight their main colour.