At a glance
Overview
Myself and another designer partnered with a group of junior programmers to develop a mobile game.
Duration
10 Weeks
Tools
Figma
Figjam
Photoshop
Procreate
Teams
Design Process
Concept Building
The developers came to us with an idea, but we didn't love the concept. What to do?
Collaborate and find a solution everyone loves!
World Building
My co-designer and I came together to world-build and decide the visual direction. We sketched, used moodboards, and brought inspiration together to get on the same page.
A place to start
The programmers found a game template to build from and presented it to us showing photos and videos of how the base game mechanics worked.
This base was a "click-next" style game with no strategy or interest.
Sketching
I created multiple options for the battle page that I sketched and then showed to potential users for feedback
Low Fidelity
Low fidelity mockups were made to send to the developers for proof of concept and implementation feasibility.
I was constrained by the coding abilities of programmers learning to code a game for the first time so it was important to assess feasibility but create the most interesting game possible
Final implementation!
Medium Fidelity
Medium fidelity mockups were made to see whether the characters fit well in the scene and to set colors
Start by selecting your characters from a carousel
Ready Player?
View your team and your opponents.
Begin!
Battle! Hit the attack button to begin
Select a ghost and a corresponding slime to attack from the drop-down
Read updates and battle it out to the end while you collect items in your chest
Win the round and assign item drops for power-ups
Finally lose gamer?
Play again!
Backend
Create
and index
View stats and choose to update or delete
Sure you want to do that?
Update your settings and play again
Programmers:
Vincent Marklynn
Fiona O’Leary
Helen Huang
