FABLE

01

FABLE is a collaborative story-writing game with a Mad Libs style twist

In FABLE, each person contributes a sentence, but they can only see the sentence before theirs when they write it. The result is a nonsensical story and a fun experience. I was introduced to FABLE by playing it with pen and paper. The challenge was to design the digital version of this, working closely with another designer and collaborating with a team of product managers and developers to release the game on Android and iOS.

skip to deliverables

CLIENT

Intrepid Pursuits

DURATION

Seven weeks

SKILLS DEMONSTRATED

Wireframing, Material design, iOS design, Collaboration with developers in Jira and Zeplin

02

My design colleague and I worked together on every stage of our process

My colleague and I sketched our ideas for the navigation. We chose a direction and split the work evenly, working side by side to ensure we were on the same page.

We experimented with the navigation style: (1) top tabs, (2) single screen accordion, (3) FAB button, as well as bottom tab navigation (not pictured here).

We wanted to preserve as much screen space as possible to really showcase the content, so we decided to go for the top tab navigation in our wireframes.

We thought of fables like story books, so we designed them to be represented by cover images.

We used messaging apps as inspiration for the layout of UI elements.

Our moodboards followed suit to explore the theme of story books.

The client liked the bright playful colors for their nostalgia for children's story books . Of the images here she preferred the abstract shapes over the realist illustrations because they push the spirit of interpretation and improvisation.

The client liked the ample use of whitespace and the big bold type in Mood Style 2, since fables consist of the written word at the end of the day.

We synthesized our client‘s reactions to our moodboards, identifying the direction for the look and feel of our app. We went to work combining bright playful colors, abstract shapes, big bold typography, and ample use of whitespace.

03

I worked closely with developers and took the lead on designing the Android screens

My design colleague and I worked closely to translate the look and feel of the moodboards to high fidelity iOS mockups. I took the iOS mockups and translated them to Android mockups.

Homescreen: Active Fables

iOS

Android

Create Fable

iOS

Android

Your Turn

iOS

Android

Completed Fable

iOS

Android

Prototype

04

Final thoughts

Throughout the design process I talked regularly with my developer colleagues. We had daily scrum meetings and sprint planning meetings, and I regularly walked over to my colleagues‘ desks to check-in with them. This meant we didn‘t design outside the scope of the project, and that they understood the design intent of every feature, ultimately leading to the success of this project.

If I could do this project again differently, I would advocate for a division of labor between myself and the other designer along our respective strengths. I would conduct rapid paper-prototyping and user testing while my colleague would focus on visual design. This approach would‘ve benefited the project by making time for user research, and allowing us to contribute to the project with our respective strengths.

back to top

© 2017 by Felix Poon | All rights reserved

Felix Poon Instagram Felix Poon LinkedIn
felix poon design logo