Roles: Interaction Designer,
IOS/ANDROID GAMIFICATION INVISION FIGMA FLINTO SKETCH
The Game Designer’s Companion is a gamified app designed to encourage students to explore, learn, and
apply formal game design processes.
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
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:
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
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.
We broke our app down into 3 separate pages. Each page appeals to a certain type of user.
Easy way to access different design concepts
Helps you find relevant tools dependent on your current context
Visualize your in-app accomplishments
React to way you use app
Empowering self expression
Event based unlockables
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.
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.
Once we finalized the visual design we created a style guide.
We also created an app design document and an annotated diagram
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