Life is Strange Brand Site

Creating a database for UI Animations

Functionality and Flavour:

Why it's so hard to have both at launch

If you haven't worked in the games industry, you might not know that it's incredibly fast-paced. Websites for games are no exception to this, when a new game comes out we typically don't have much time to get a website designed, built, tested and launched in time for the game announcement. This unfortunately can mean that pretty extras such as animations and transitions get put on the backburner as functionality is more important.

The design team has previously created some animations for UI components that would have been great to be included when the website first launched and when a website for Life is Strange: True Colours was requested, we finally had enough lead time to make this come true.

The Problem: Lack of Documentation

I noticed that no animations were documented anywhere. Curious, I reached out to the design team to see what they had worked on so far and to my surprise, there were animation proposals made already. However, the developers didn't really know what this entailed and design wasn't sure if their proposals were realistic to build in time for launch.

I reviewed the animation files already made by design, giving some pointers about accessibility as a few components were using branding colors that were too dark against the background, as well as tweaking some timings of the animations to ensure they were following web UI best practices.

Once I completed the review and design had time to tweak their animations, I looked into where the animations could be stored so that both teams could access them.

As we're all working remotely, I decided the best tool for this meeting would be Mural as it allows everyone to easily access and edit all points.

Prioritization and Planning

Getting everyone to fill out the matrix

In order to get design and dev on the same page, I facilitated a meeting between both teams. I proposed different ways the database could work and look, mentioning the easiest would be a document on our Confluence space. We found a happy medium that both teams were happy with and understood with no issue.

The values needed in our Animation Database were:

1. Element: pretty self-explanitory, this would be the element to be animated
2. Trigger: what user action will trigger the animation?
3. Effect: details what effect will take place upon user interaction
4. Ease/general "Vibe": details length and ease of the animation or the general feeling the animation should reflect, eg "ease-in-out, calm"
5. Notes: Space for notes and relationships with other elements on the page

The developers encouraged me and the designer to prioritize based on what animations could be re-used in future projects and after creating an initial prioritization matrix together, me and design listed out all components that could be animated.

We created three categories for the animations and grouped our list accordingly:

1. Basic: Animations that were quick wins and easy to implement for the dev team once UI components were available. Such animations were hyperlinks, carousel controls or buttons
2. Elaborate: Animations that were more time-consuming and would require testing and tweaking such as scrolling animations or anything that went across the entire page
3. Bespoke: Bespoke animations are specific to this project and not re-used anywhere else, such as hover effects for specific character renders

The designer made animated mock-ups for some components, other animations were recycled from other pages that had already previously gone live and would be suitable to this website as well.

Once all sticky notes had been filled and design was happy with their animation mock-ups, I scheduled another session with the devs so they could give their input on what they could realistically build.

The actual database ended up with some additional columns so that visuals could be added.

This took course over three sessions in total (initial database proposal, filling in the matrix with design, reviewing the matrix with dev) and resulted in me creating a database with all the animation files from design, using the descriptions that would be understood by any dev who would pick up an animation storage.

Learnings:

My role in this was mostly as facilitator as design and development had their work made out for them. I enjoyed guiding the sessions towards the right direction and helping both teams find a happy medium. It was a few long sessions but the end result is that we launched the page with some nice UI animations and that the database can always be reused for other projects in the future.

← Back to Portfolio Overview