JACKY XU

2D Artist | Game Designer


FISHbowl



Design Documentation App



Role: UI/UX designer, artist

Time: 2 weeks (2018)

Team size: 3

Tools: Adobe XD, Photoshop, Illustrator



Fishbowl is an app for writing design documentations on the go, while incentivizing users to update it throughout development. With a component-based design focus, it also features a fish collection “mini-game” for user’s fishbowl and “fishiness” ranking. Experience Fishbowl using the interactive mockup below, or click here to open it in a new window.



Lorem ipsum dolor sit a sdf f sd sf sdf a f s sdf f sdmet, consectetur adipiscing elit. Sed malegfsg asdf





Roles and Contributions



  • Conceptualized fishbowl gamification by utilizing the human desire for collecting things to incentivize consistent check-ins
  • Collaborated with team members to further develop and plan the app flow
  • Visual designed app screens in Photoshop


The Problem



Documentation for projects and games often gets abandoned and is difficult to keep organized while being convenient for teams to reference.



Design Process



Researched similar apps, Yu-kai Chou Gamification framework, and personas.

↓

Brainstormed common problems, and designs that will mitigate them.

↓

Ideated core design pillars of fish collection and component-based design.

↓

Prototyped app using flowcharts, and paper prototype methods.

↓

Iterated on multiple prototype version to improve UX.



Design Solutions



Component Based UI - Tool icons are re-organizable allows user to choose their preferred tools and hide the unnecessary ones



Component Based Documentation - Titles, checklists, etc., are drag-and-droppable components for easy editing on mobile devices



Document outline uses the same component system as the document components that displays a preview of the component’s content.



Fishbowl Gamification - Completing objectives grants users with points, which fills up upon objective (check-in, reaching milestones) completion. Ranking up rewards user with more fish in their fishbowl.



Check-Ins - Set check-ins/due dates for documents. Tapping the check-in takes users to the corresponding document. Completing check-ins reward users with fishbowl points.



Customizable Templates - Choose between pre-made templates or customize new ones with drag-and-droppable components.



Home - Shows most recent documents followed by folders



Groups - Create groups consists of friends for projects.



Friends - List of collaborators for different projects.