Game Design Challenge
'Busy Bee' is a 1 week exploration to redesign and re-theme Lumosity's game, "Route to Sprout", with updated storyline and interaction. Originally made for desktop, I documented the changes needed for the game to shift to mobile, tablet, and desktop.
Final result: The story I created
“It's spring time and flowers are blooming and life is a-buzzing. Definitely a busy time for a bee. As the user, you help guide the bee to the flower in the fewest number of moves. But watch out for the hungry birds, you must move them out of the way to clear the route to the flower.”
Key Feature: Drag and Drop
This new game involves 'dragging and dropping' the highlighted stimuli (birds, bee) to available nodes. The 'moves' HUD on top shows the amount of moves you have taken versus the fewest amount of moves possible.
Research & Ideation: Figuring out the best theme
While researching and planning for 'Busy Bee', I played through Lumosity's database of games and categorized them based on a variety of qualities such as type of cognitive exercise, theme, and visual hierarchy. The results proved that I needed human-driven design approach, that was not only intuitive, but also sophisticated in its simplicity.
Screenshot of original game
I also noted parts of original game, 'Route to Sprout', that would have trouble transferring to a mobile platform since it was made for desktop:
The game relied on the mouse cursor hovering over the route to make a move and the HUD was too complicated
Since mobile devices do not have a cursor, I had to figure out a different way to show the user feedback on where to go
Some ideas involved clicking the stimuli, and available nodes would light up to show the user where to go, then clicking the node to direct the stimuli there. Later, that was scrapped for a more intuitive 'drag and drop' approach.
I ideated on possible predator/prey pairings because the object of the game was for the main element (bee) to reach the goal (flower) by moving the obstacles out of the way (birds that can eat bee) in the fewest number of steps.
Prototypes: Keeping aesthetics consistent with Lumosity's brand
Lumosity is an international platform and for all audiences, like the colorblind. For this reason, the colors for each game have extremely clear structure, hierarchy, and limited color palette. The background has a texture to create depth, but any main game elements are solid vector shapes. The most important elements have a white highlight, for easy readability. The colors I chose are consistent with brand and game colors.
Screenshot of other Lumosity games
I did more research on 'Pet Detective', a similar planning game on Lumosity, and noted that the nodes on the roads were small and not an interactive part of that game. However, I wanted 'Busy Bee' to have nodes that are interactive and play a prominent role in finishing the game. Using this information, I made several prototypes playing with different proportions for the route and nodes to test how they would fit together. I decided to make the nodes more visible, and the route less visible, because nodes are more important in the redesigned game. Then, I made a grid for the route to create a balanced and geometric layout.
Character Creation: Shapes create easily readable outlines
To create interesting stimuli (bird/bee), I did more research on types of bees and the birds that eat them. The stimuli is based on the bumble bee and Bee-eater bird that is particularly good at catching them.
Micro-Interactions
Furthermore, I thought about some possible micro-interactions to help make a game that had both great features and details. In the first two examples, it shows that when a bird is dragged, any node you can drop the bird on, lights up. As the user drags and drops the bird to the node, the wings of the birds are flapping slightly to give a sense of flight.
Going forward, I would my test the features of the game with teammates and reevaluate the design and UI based on the feedback.