Fable Fortune Deck Building UI

Deck Building UII worked as a lead graphic artist on the Fable Fortune project at Lionhead Studios.  I was tasked with directing the UI layout and visuals while also communicating the Fable art style to an external development team.

Physical Prototype
Stage 1: Physical Prototype

The deck building menu was an interesting task to tackle as I wanted the ability to sort cards and decks to feel as natural as if doing it by hand on a table top.  First step to trying to solve this problem was to get some physical cards and start arranging them on my desk, taking note of how I would sort the cards and arrange them.

Whitebox Test
Stage 2: Proof of Concept and Animation Tests

I created a test scene in Autodesk Maya and created some test animations for how the cards could magically move.  This was really useful when communicating to the rest of the team my ideas.

UX Layout
Stage 3: UX Wireframe Layout

Next step was to draw up some wireframes to start planning what features we will need and where is best to place them.

Polished Whitebox
Stage 4: Concept Tests

I did some concept tests with basic UI elements in place.  There was a lot of iteration at this stage to try and find the best combination of elements and layouts.

Deck Building UI
Stage 5: The result in April 2016

Once a layout was agreed on within the team, I communicated my ideas to the external developer and created a polished 3D scene with fluid card animations.

Sadly Lionhead Studios came to a close before I could finish my work on the project, but the menu looked as pictured on the left in April 2016.

The project continues to live on as some of my colleagues were able to continue development working as a new independent studio. You can follow the progress of the game on its website : www.fable-fortune.com

Publisher: Microsoft

Format: Xbox One and PC

Studio: Lionhead Studios

Year: 2016