'Busy Bee' is a 1 week exploration to redesign and re-theme Lumosity's game, "Route to Sprout", with updated UI. Originally on desktop, this version is made for iOS, tablet, and desktop.
In the game, it's spring time--flowers are blooming and life is 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.
I also noted parts of 'Route to Sprout' that would have trouble transferring to a mobile platform since it was made for web. Some pain points were that the game relied on the mouse cursor hovering over the route to make a move and the HUD was too complicated. Since the iPhone does not have a cursor, I had to figure out a different way to show the user feedback on where to go. Some beginning 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.
Prototypes: Keeping aesthetics consistent with Lumosity's brand
Lumosity is international and for all audiences, like the colorblind. For this reason, the colors for each game have extremely clear structure, hierarchy, and limited. The background has a texture to create depth, but any main game elements are solid vector shapes. The most important have a white highlight, for easy readability. The colors I chose are consistent with brand and game colors.
I did more research on 'Pet Detective', a similar planning game, 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.
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.