Design a game that helps preteen girls and non-binary individuals who, as they reach puberty, often drop out of STEM fields.
As they grow older, young women, who tend to move away from STEM, need to be able to imagine themselves pursuing STEM through role models and to build a support network of likeminded individuals, so that they can grow into lifelong learners.
We began our journey by conducting individual research on board gaming, art styles, and user engagement and compiled our findings using Figma's FigJam tool. Here we decided on the direction we wanted to go with our project as well as analysed our individual strengths so that we could divide up the work load for the project moving forward.
This project required us to come up with essentially two brands, one for the boardgame, the other for the parent company producing it. Thus, Lab Rat Games was born. I was assigned the task of coming up logos for the parent company. Below you can see the first iteration as well as later versions that we eventually pivoted to.
The main issue with our first logo was that at smaller sizes it became hard to make out the text as well as the finer details of the logomark.
Tasked with curating our design system, I used our decided color pallet for both Lab Rat Games and Alora. I used a system of primitive and token variables to define color ranges and acceptable colors for everything digital in our project. In addition, I used a similar primitive and token system of number variables to specify our spacing, corner radius, and margins parameters.
For many of the design details, buttons, flourishes, icons, and the like, Daisy, acting as our art director and illustrator gave me illustrations that I then took into Illustrator to digitize, export as SVGs, and bring into Figma to use as components or decoration.
Given more time I would like to build out the components for this design system more fully to account for every situation and combination of buttons, text fields, screens, etc. that a product designer could use to build app, website, or email screens for a developer.
We developed two personas to remind us of whom our final product is designed for. Ms. Rodriguez (the Teacher) and Alex (the Student) came to embody the types of adults and kids we were building this project for.
The character creator I developed and prototyped was the most challenging part of this project. This was the first project I worked on since Figma introduced variables into their product and in which I had worked with string variables. Part way through the project, I came to the epiphany that I could use Figma's string variables as a form of memory in my prototype. With this eureka moment, I developed a way for decisions made on one screen to trickle down, changing the outcomes on later screens, all of which would be collected and populated on the final screen. This meant that I also had to learn how to write conditional statements while constructing my Figma prototype. Without these variables and conditionals, the prototyping process would have involved exponentially more screens and interactions to get all the unique results allowed in my current prototype. Even then the resulting prototype had just shy of 150 unique screens in order to get everything to work properly.
Out of the almost 150 screens that made up the character creator, roughly 140 of them were dedicated to the character stat allocator. This was important to me because I wanted to make a serious representation of how a stat selector would function in a real life scenario. With three different stats for players to allocate their points to, I wanted each screen to be able to navigate to any number of adjacent screens, letting users back track and change their mind while building their characters to their liking. It took many iterations, but I finally was able to wire up my prototype with the aid of a naming convention that allowed me to keep track of which decisions would lead to which pages. I connected so many pages together that when in prototyping mode Figma was unable to show all the connecting nodes at the same time.
We had a lot of fun with this project. This was my first time keeping track of and maintaining a design system and working with Figma variables. Being fairly comfortable with Figma going into this project, I initially thought that I would primarily be using color and number variables, but after doing a deep dive into string variables, a whole new level of prototyping opened up for me.
If I had had more time to work on this project, I would have liked to flesh out the design system more. I began constructing a series of components to be used as part of an atomic design system, but would have liked to have the time to build out these pieces more.