In 2016, a Star Wars movie Rogue One was premiered with box office over $1 billion. This highly anticipated film has fans all over the world. FX Digital publishes a WebGL experience to celebrate the release of the film and engage its fans with an interactive commentary experience.

Users view tweets about Rogue One through our experience as we aggregate commentary with #rogueone using Twitter API.

I did the strategic planning, research, design and development of the experience.

Goals

I identified the goals through interviews, discussions and reviewing the market positioning with the founders of FX Digital.

Our goal is to engage our major clients, the visual effect industry. We see the potential of launching an experience at the time of the film premiered, which drives maximum traffic and interests.

Also, we would like to communicate the value of FX Digital, which is being innovative and at the forefront of technology.

Process and strategy

FX Digital was a young digital agency and looking to stand out among the competitors. The founders have the vision to be the leaders in advocating emerging technologies to solve problems for their customers. WebGL utilises web technologies to create interactive and immersive experiences for users. It has great potential to bring values to our clients.

Creative solution

The flexibility of interactive WebGL experience gives us creative freedom in making immersive and highly polished visual effects on the web environment, which the agency is specialised in. So I started the creative process for the solution.

With brainstorming sessions and research, the experience came up with is an interactive universe with stars representing collective insights from social media about Rogue One.

For the look and feel of the experience, I created mood boards to share the ideas with the team. The concept comes from outer space and the universe which linked to the origin of the Star Wars movies.

Image for post
Image for post
Creating multiple mood boards to explore look and feel
Image for post
Image for post
Initial colour exploration. I mocked up different presentations for models

Our pick of colour shifted from purplish to a more vivid blue, considering the original colour tone of the movie’s publication, and bring the connection with the movie.

The flow for the experience aimed to attract visitors with a stand out visual and simple interaction.

Image for post
Image for post

With experimenting with different prototypes and review the user experience, I designed the optimal size, colour and density of the stars to ensure the usability and fluid interaction.

Image for post
Image for post
Experimenting numbers, colours and density of particles

With the modelling of the 3D object, I used Cinema 4D to create the basic geometry and export them as obj file to be imported to the web environment.

Image for post
Image for post
Image for post
Image for post
Final card design

After launching the desktop version, through the analytics, there are some users visiting the site with mobile. I made the experience optimised for mobile by reducing the number of stars visible on the front end to allow smooth interaction on the site and made the experience responsive.

Image for post
Image for post

This project builds the grounding stone for future projects of R&D in FX Digital. It is used to promote the agency and generate leads with related technologies.

Written by

Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store