FanPic Application
Fan Engagement Through Giga Pixel Technology

 

FanPic Application

Project: Ongoing work on the FanPic platform and application.

My Role: During my time working at the tech startup Huggity I worked as Lead Designer.

My main areas of responsibility were:

  • FanPic UX and UI design
  • Front End Developer (HTML,CSS, JS)
  • Giga Pixel Post Production
  • Social Media Activation Design
  • Client Communication
Laptop Mockup

Project Summary

FanPic is a fan engagement application created to help brands increase their reach with fans and customers through social media engagement and the FanPic platform. A huge gigapixel photograph is taken at a large event such as a sports event or concert which is then published online within 24 hours and allows fans to find themselves and tag themselves in the shot. When the fan tags themselves it creates a special 'I was there' moment which the fan can then share on their social media showing their friends they were at the game and increasing the reach of the brand. This post on social media contains the clients branding and identity to help with brand recognition, loyalty and reach. Users of the FanPic can also take part in a treasure hunt bringing an element of gamification to the application where they can win prizes. For brands, the FanPic delivers brand exposure, client acquisition, community development, fan social profiling, lead generation and quality data capture.

During my time working at Huggity on the FanPic it went through a number of iterations and updates, each time with improvements in terms of the UX and UI. Each activation also brought unique challenges from the client with project-specific requirements to add additional functionality. As with any tech startup, things were fast-paced and involved working as a team across design, development and project management to come up with solutions and implement them in a quick turnaround to deliver the project for the client.

The Challenge

Creating an engaging experience for the user before the event, during the event and after to maximise brand exposure and fan engagement.

With a limited window of time before and after an event to engage with the fans, it is vital that at each touchpoint there is a feeling of excitement, ease of use and the experience is as simple as possible for the user to share their photo to social media and interact with the platform to increase the end result for the brand client.

Goals

  • Create an easy to use application that has a strong UI branded with the client's colours and identity and connects with the fans.
  • Create excitement before the event with posts on social media activations and a pre-launch countdown.
  • Maximize engagement on the application and the number of 'tags' from users and shares to social media.

Process

With each FanPic aactivation my first interaction with the client was to gather their brand guidelines, acquire typography and fonts they typically use, brand colors and logo files. Using these I would then create mockup screens showing the various stages of the user's journey in the FanPic application.

This included the welcome screen showing the login and onboarding screens with instructions telling the user how to use and navigate the FanPic to tag themselves. These initial screens have minimal functionality and focus on making it simple for the user to log in to the application through Facebook and instantly get an explanation of how it works through simple onboarding instructions.

The user interface of the FanPic itself incorporates the brands colour scheme, logos and the colours and logos of the teams involved. All screens and popups within the application also contain the brand's identity to keep a consistent look throughout the application.

The interface itself uses simple on-screen joystick navigation or the user can simply click on an area of the screen and zoom or double-tap to zoom in a level on the photo. A semi-transparent interface is used to keep the focus on the FanPic photo and also to not over clutter the screen.

Below you will see an example of screens from a BUPA FanPic showing the initial screen where the user can log in using Facebook, the onboarding popup showing instructions on how to use the FanPic with the underlying interface, the share to Facebook screen showing the branded overlay which will post to the user's Facebook wall and the Treasure Hunt screen.

The FanPic activation with a client was broken down into 3 main parts - the prelaunch, the photo and post-production and the FanPic launch. During each stage of the activation, we provided the brand with different elements which they could use to create awareness with their fans.

Prelaunch

Prior to any event the brand and/or sports team would post on social media channels informing fans that a FanPic was going to be taken at the event to create some hype in the build p and provide a URL for the FanPic. This URL would bring the user to the PreLaunch landing page prior to the event - typically this would have the clients branding, a UI with players from the team to reinforce the connection between fans and supporting your team, a prelaunch video explaining how the FanPic worked and a countdown timer to create some buzz and excitement up to the FanPic launch.

FanPic Prelaunch

An example of a typical Prelaunch landing page showing details of the FanPic being taken at the rugby game between Munster and Leinster with SEAT as the brand client.

Using the brands own style guide for colour and typography. Key information telling the user how the FanPic works - find yourself, tag, and share. The count down timer showing them when it will go live and creating anticipation with a video to show them how the FanPic works and to build up hype around the event.

Alternaative Pre Launch

Another Prelaunch example, this time customised with additional functionality at the request of the client. Betfair is a well known online gambling company in the UK and they offered FanPic users a promotional bet with special odds just for them as a way to incentivise traffic to their website and increase engagement and data capture. Bespoke functionality like this would often be requested by the client and we as a team would have to come up with an engaging solution which could be developed and integrated in a quick turnaround usually of only a few days from mockup to integration.

FanPic Shot

On the day of the event, the photo is usually taken around 15 minutes into the game when everyone is in their seats and the action is underway. The photographer shoots hundreds of photos which are then digitally stitched together to create an image so large it would fill multiple football stadiums if it was stretched out on the ground. Part of my role in the company was to stitch and create these photos to create the FanPic, which depending on the project could be one FanPic photo or multiple in the case of a music festival or weekend sporting event. In the case of multiple FanPics activations, I was responsible for managing the team working on the FanPics and coordinating the production of the images and creating the finished product and uploading it to the servers for launch at the agreed time with the client. This involved working with very large files using sophisticated stitching and Photoshopping techniques to create the finished image and then processing and uploading the image to AWS servers around the world. With events happening all over the world I also had to work with team members distributed around the world with our photographers possibly working on events in the US and Australia for example at the same time processing images and transferring them back to the main office to work on.

Post Launch

Once the FanPic is launched and goes live the client brand posts updates to social media directing fans to the FanPic. These include activation posts that I create for the client in advance based on their brand identity, similar posts are provided post prelaunch and on the day of the event. Following the launch server traffic is monitored and stats and reports are provided to the client with the number of people tagging and the estimated impressions on social. The average FaceBook user has 130 friends leading to a typical FanPic activation generating in the region of 1.5-2m impressions on FaceBook.

UX and UI changes

During my time working as lead designer, the FanPic application went through a number of iterations which saw changes to both the UX and UI of the product.

As a fan engagement platform gamification was an area that we added to early on which helped improve the UX and engagement with the platform. Initially, we had the Treasure Hunt which allowed users to search within the photo for a hidden item and then when they had found a set amount could provide their details to be entered in a draw for a prize.

We also introduced systems for badges, leaderboards and points which could be accumulated over the course of a sporting season. Working with one particular client, Liverpool FC we took a number of FanPics through to the season. Every time a user tagged themselves at the game, completed a treasure hunt or similar tasks they would receive points. Points would then unlock badges that could be shared to their social channels as well as leaderboards which would show their position on the table. As sports fans, these users are passionate about their team and loyalty to their club and these gamification elements.

Initially, the product started out as a web application that only worked on desktop due to technical limitations. Over time we designed and developed a mobile version of the application, simplifying the UI and the UX around the tagging functionality. The touch element of mobile devices allowed us to implement drag and zoom functionality in the app based on user gestures instead of having to use on-screen controls or scrolling to zoom like on the desktop version. The mobile version also made the FanPic instantly more accessible to people due to the amount of time users spend on mobile devices during the day and interacting on Facebook where they would see the brand updates which would direct them to the FanPic and lead to them sharing on their own timeline.

Vodafone

Originally the application had a 3d look to the interface with bevel/embossed controls which helped the interface stand out from the background however over time and with user feedback and a/b testing we moved towards a more flat design in line with design trends at the time. This also allowed us to update the UI to move towards using CSS rather than images and create a design system that was easier to integrate and update for each brand activation based on their colour scheme and identity.

Integrating heatmapping software also allowed us to monitor how a typical user navigates the FanPic and integrates with the UI. This allowed us to see some of the options were not very popular and could be removed without affecting the overall UX of the application. For example, we had a full-screen option that could be clicked and would scale the UI removing the on-screen navigation and allow the user to just use scrolling and double-tapping on the photo to zoom, but most users already did this on the normal display mode, therefore, negating the need for this option and helping to reduce the size of the lower interface.

We also integrated the ability to log in and share to other social networks outside of Facebook adding the ability to use Twitter or LinkedIn and share to those. Due to the varying demographic of users and sports fans we found not all users had Facebook accounts or were comfortable with sharing to Facebook. Adding these allowed users to share to those platforms where an older user would be more typical to share to their peers or network of connections especially on LinkedIn.

SEAT

Some of the brands I worked with on FanPic activations include

Brands

Results and Outcomes

Working on the FanPic application was a very hands-on approach to UX and UI design. As a tech startup working with large corporate brand clients you constantly need to adapt and work on tight sprints with quick turnarounds from mockup to design and implementation.

The user experience played a huge part in the success of the platform to deliver results to the client through tagging and social media impressions. Clear instructions and clean UI for the interface were vital and constantly keeping an eye on design trends and changes to keep the interface fresh and in line with other applications the user engaged in. Tools like heat mapping were also vital in refining the interface through iterations and seeing what functionality was potentially redundant and either not necessary or didn't need to be at the top level of the UI.

Overall my time working on the application while at Huggity was invaluable in my career development in all aspects of UX, UI and front end development. Working as part of a team on agile sprints while also being an individual contributor on the design side of things and improving the design system behind the product to make a rapid turnaround of activations more possible.

Scroll to Top