Intrepid Pursuits
Seven weeks
Wireframing, Material design, iOS design, Collaboration with developers in Jira and Zeplin
FABLE is a collaborative story-writing game with a Mad Libs style twist. 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. The challenge was to design the digital version of this pen and paper game, working closely with another designer and collaborating with a team of product managers and developers to release the game on Android and iOS.
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, including:
1) top tabs
2) single screen accordion
3) FAB button
4) 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.
Left and Center-left: We thought of fables like story books, so we designed them to be represented by cover images.
Right and Center-right: 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.
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
Left: iOS  |  Right: Android
Create Fable
Left: iOS  |  Right: Android
Your Turn
Left: iOS  |  Right: Android
Completed Fable
Left: iOS  |  Right: Android
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