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.

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.

Creating multiple mood boards to explore look and feel
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.

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.

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.

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.

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.

Product Designer

Unlisted

Product Designer