Roles: Interaction Designer,
Programmer
Project Timeline:
7 Weeks
Team Size:
4 People
IOS/ANDROID GAMIFICATION INVISION FIGMA FLINTO SKETCH
Overview
The Game Designer’s Companion is a gamified app designed to encourage students to explore, learn, and
apply formal game design processes.
Contributions
-
Analyzed gamified apps documenting their strengths and weaknesses.
-
Formulated multiple experimental paper prototypes using gamification principles and research data that was collected.
-
Designed and developed mechanics and features to support the app's design pillars.
-
Created digital prototypes using Figma, Invision and Flinto.
-
Conducted playtest sessions and quickly iterated on identified design problems.
-
Composed and storyboarded a promotional video that encompasses the app's features for pitching purposes.
-
Visual design development
The Problem
How can we help Game Designers grow?
-
Trouble identifying personal strengths and weaknesses
-
Formal game design resources are dry and students carry an academic stigma
-
Trouble retaining information learned
-
Low attendance of social/networking events
Project Process Overview:
Research
Before we could start ideating, we really had to understand what we were dealing with.
-
Looking at similar apps.
-
Interviews with the target audience
-
Reading formal game design documents
-
Personas
Ideation
Since we had a very broad goal we decided to take our time with the Ideation and pre-design stage. Exploring various different ideas and approaches to the problems at hand.
While brainstorming we made sure to make use of creative problem solving processes such as diverging and converging to come up with unique ideas freely without the worry of being shut down. This helped us think outside the box and avoid being scared of our ideas.
Another technique we made sure to utilize to increase the number of unique ideas was to avoid group think which can hinder peoples ability to think uniquely.
Categorizing ideas helped us keep track of the purpose of each feature/idea. This also helped us quickly adapt and sniff out any weaknesses of our design as we could visually see what areas we are missing or not focussing on as much.
Core Concepts
We broke our app down into 3 separate pages. Each page appeals to a certain type of user.
1. Tools
Easy way to access different design concepts
Organized Information
Helps you find relevant tools dependent on your current context
2. Tower
Gamified progress
Non-intrusive
Visualize your in-app accomplishments
React to way you use app
3. Profile
Empowering self expression
Customizability
Event based unlockables
Taking Advantage of Gamification
-
Using Yu-kai Chou's Octalysis framework
-
Increasing User Retention
-
Creating a smooth on-boarding process
-
Usability first gamification second
Rapid Iterative Testing and Evaluation
During this stage, it was all about quickly reacting to user feedback. Making necessary changes and quickly getting a new prototype ready to test.
We tested with low fidelity prototypes first. No icons, no images, no color it was all about usability testing.
Visual Design
We had to watch out for a few prenotions connecting previous emotions with visuals.
-
Corporate Aesthetic: creates a feeling of formal education (too serious).
-
Fun Aesthetic: users could perceive app as not serious and therefore no content worthwhile.
Our main visual goals were:
-
Balanced: a balance of fun and seriousness
-
Approachable: round corners, primary colors
-
Non-academic: strong use of color, use of illustrations
-
Clean & readable: clear hierarchies
Some examples of the visual design exploration we did.
Outcome
The project has been approved to receive additional funding from Colleges Ontario.
We presented our app and the process at EGLX 2018 and Night of the Living Devs
.jpg)