Overview
GameSalad: Web Creator
Create a new web version of the platform that takes the best aspects from the existing Mac and Windows interfaces, while solving interface and usability problems brought up by current users.
My Role
UI/UX Designer
Timeframe
2 Months
Primary Tools
Figma, Adobe Creative Suite
Company Background
GameSalad is a visual coding platform that is used in over a 100 schools every year by thousands of students to successfully learn computer science.
GameSalad Creator has also been used by 1000’s of developers to create and publish their games/apps to Google Play, the Apple App Store, and the web.
First Steps: Research & Planning
Research
I found that working in customer service at GameSalad helped immensely since I interacted with users who were having troubles on a daily basis, and found patterns around where they were having problems most.
Target Users
- Long time users of GameSalad
- Teachers actively using GameSalad in their classrooms
Research Methods
- User interviews
- Surveys
- Info collected from support messages
Findings
Power Users
01
Lack of organizational tools for Actors. With the larger projects power users had, it became painful to find the specific actors they wanted to work on.
02
The attribute browser and expression editor needed items manually selected. This led to a lot of extra clicks and frustration being needed to accomplish selecting variables in a project.
03
Game attributes couldn’t be added or edited when viewing an actor. This is a common action, which led to a lot of frustration around having to navigate to other parts of the interface to accomplish it.
04
Missing some basic layout tools in the Scene Editor. Some tools that were fairly standard for other programs that we were missing included: zoom and object multi-select.
Teachers
01
Students lost work due to not manually saving their projects after every change. This was a frequent customer support complaint and regular headache for classrooms.
02
Students save invalid expressions causing their games to break when they tried to preview. This led to a lot of extra time being spent on debugging that could be stopped by having some basic error reporting.
Screens & Visual Identity
Visual Identity
We went with Roboto as the typeface due to it being a fairly neutral workhorse that’s very legible at smaller sizes.
For colors, we went with variations of the purple from Bowlboy (the GameSalad logo) as purple is generally seen as a techy color. The error red is slightly more pink to lend a more friendly feel for students.
Main Screens
Scene Editor
This is where users create actors and lay them out visually on their scenes. Shipped with auto-saving, zoom, and multi-actor select.
Actor Editor
This is where users configure and add behaviors to their actors. Shipped with ability to view game attributes and improved expression editor.
Responsibilities & What I Learned
Responsibilities
Working with cross-functional teams, my main areas of responsibility were:
- User research & project planning (determining must-have functionality)
- Quality assurance (rigorous testing of releases)
- Design (layout changes, color, typography)
What I Learned
Seeing as this was one of the first projects I worked on, I learned a ton about core concepts of design around spacing, consistency, typography, and color.
At the start I thought design would be very art-focused, but after diving in, I learned that design is very technical and requires a lot of iteration and attention to detail.
Results & Awards
Support requests from confused users dropped significantly.
Support requests around lost work stopped completely.
