Role in the team

Skunkworks is a Hudl internal event, a hackathon of sorts, that takes a couple of days, where people from the same or different teams can pair up and create and implement ideas for the Hudl platform, Hudl apps or even work in personal projects. I was invited to join a team (in an impromptu manner as it should be!) of developers. As the only designer on my team I was responsible for keeping everything consistent, making sure the end-user experience was great and effective and to produce the visual elements and assets as well as finally produce the obligatory short movie that would intro the feature to the event judges.

Challenge

Based on feedback from clients and other people from Hudl Support, a collegue from that area decided to create a solution for quickly sharing specific feature related tutorials. Coaches, one the the segments of Hudl, constantly call Support for help around how to use or learn a specific feature. Most of the time the best solution for both sides is to share tutorial videos that Hudl already has and keeps producing and improving. The problem is that most of that sharing is done via email, which is slow - due to the fact that support needs to find the coach contact, compose and send him an email. It happens outside of the Hudl platform as well, which is not a good experience at all. As such the basic premise was to allow support to populate the feed content on the specific user's main page (where the feed lives) with a touch of a button.

Content related imagery

I then started exploring different solutions for the post placeholders to represent each area/sport since having the content on the post itself was technically not feasible. But I still wanted to reflect the content behind the link somehow. I noticed most of the tutorials where organised by sport so I investigated a bit if it would be possible. One of the developers realised he could use the HTML name protocol of the tutorials (the title of the HTML page). So we could display different content based on different tutorials areas.

After we tested it and confirmed we could do it from a development perspective and that most people in the company had a positive feedback to give after trying the build, I started exploring using different subtle, but still visible, backgrounds to each placeholder, thus giving the user a hint of the area from which the tutorial related to. I started, as fast as possible, a sports related image hunt, talking with people from marketing, content, Hudlies who were photographers, etc. In the end I managed to get 15 images, edited and prepared in Photoshop, for each of the main areas.

Testing the solution

Like mentioned before, we had the solution on a build and asked around the company for feedback. Since it was overwhelmingly positive we moved forward with the implementation so it could eventually go into production and I produced all the images and assets for each area/sport.

Concept Video

Skunkworks is a competition and has such it has some documentation the team needed to produce to provide to the judges. One of this was a very short video that presents/introduces the concept.

I quickly made a list of the main concepts, sketched a storyboard and moved forward into editing and putting a piece together using After Effects. Although time was really, really short I made sure everyone agreed on each step before moving into the next.

Storyboard mockup test

Using each frame from the storyboard as placeholders I timed each scene with the music, so we could have a better idea of how the final animation could look like.

Moving to the final stage

I prepared all the assets, used the placeholders to create each precomp/scene and moved from there, importing the assets and editing them. First applying the basic/generic movements, making sure they fit the music and it's rhythm. From there I procedeed to refine and tweak the elements and the animation until I was happy with the end result.