A project in a rut
The Weta Digital project arrived to me partially formed. A talented design agency had created the initial concepts for the public website but for a host of reasons the project had been handed over to finish to a development agency called Touchtech. Touchtech then brought me onboard to complete a UX review of the concepts and restructuring as well as finishing the UI design.
Problem
My task was to finish the website design and make any updates we could regarding usability. There were a number of concerns about the sharability and maintainability of the content on the site which also needed to be addressed.
Challenges and Constraints
1. Risk Averse Client
Weta Digital is a big name in the Film Industry and they have much to lose by incorrectly placing their brand.
2. Intial concepts
The initial concepts were a stunning UI however they only allowed for one level of pages creating problems of scale and usability.
3. Time boxed Dev
The development timeframe was short and developers were working with another company's code base.
Design and project work
Information Architecture Transformation
As the UX lead on this project I facilitated a workshop with Weta Digital to understand
the content requirements,
who the weta digital users were
what were their primary tasks.
With the findings from this workshop I put together a 'High Level Requirements' document. Using these requirements as a guide I was able to set out a new structure that would serve the needs of both Weta Digital and their users.
Initial site structure
My proposed site structure
Client management
In order to help ease the client's fears, I organised regular collaboration sessions. This allowed us to work through both the progress of the wireframes and the UI Design.
We discussed:
what was worked on since the last session and reviewed it
worked through some problems at hand
what needed to be done before the next session
These frequent sessions ensured client engagement on each decision that was made and also helped to reduce the perceived risk by making the design process completely transparent.
But can it be built
The original UI design had a very organic nature to it and was proving difficult for the developers to build as there was no clear visual pattern for them to use.
I proposed a paper prototype approach and facilitated a session with the developers to workshop different ways that the homepage tiles could display. This allowed the system to be developed easily and to meet the design aesthetic established already.
Sign off and go live
Both Weta Digital and Peter Jackson signed off the work and you can see the website at www.wetafx.co.nz
UX / UI workflow
a. SKETCH WIREFRAMES
I created a collection of wireframes to establish the base structure and layout and functionality.
The user profiles of customer, fan, and potential employee were used to guide the direction of the layout and functionality
UI Design
I applied the visual design using real content that I workshopped with the client. Real film and digital FX content was used throughout the prototype to ensure that the design intent worked in reality.
The largest challenge with this was to create a pattern that appeared visually random but could be programatically applied. I worked very closely with developers to ensure that the patterns were replicable throughout the site.
Mobile Approach
As the content was fundamentally photographic by nature, the mobile approach was critical to get right. Each page was treated with equal care on both mobile and desktop UX/UI design.
Gallery on a film page - mobile landscape view
Gallery on a film page - mobile portrait view
Gallery on a film page - Desktop view
Style guide
While the below seems like a simple style guide, for this project it was a critical communication tool that helped a risk averse client understand that all design elements on a page had a consistency with others on the site and each style conveyed a purpose.
Initial UI concepts by RESN