Eyewire Mystic Expansion
Creating multiple touch-points for the biggest release event for the academic game since its founding.
Role
Web Designer & Developer, Writer
Team
Amy Robinson, Creative Director
+8.9%
increase in monthly player base
The Problem
The citizen science game Eyewire was preparing to add a new set of neurons for players to map. The goal of this non-profit company born of the Seung Lab at Princeton is to map as many 3D renderings of brain cells for research purposes, and as such works to improve the speed at which this data is generated. To account for this new premium data, the game expanded and created a new promotion tier for in-game moderators: Mystics. These players would need an adjusted, more powerful interface with added functions — my first deliverable. The second deliverable was a marketing website for the expanded data. My goals were to bring in new players by creating a new and fun experience across these deliverables.
A 3D rendering of a synapse, courtesy of Eyewire
Player Profiles: Scouts, Scythes & Mystic Moderators
Before the expansion, the moderators of the full Eyewire data set were called Scythes. They were experts in outlining the cells, and were able to push the target models in which players would be scored based on percent of accuracy — this was coined Reap. Mystics would have exclusive domain over the newest data set, only available to higher scoring players (a Zebrafish brain). Because of this additional responsibility and more data to cover, I decided the controls for these users should be simplified and more on brand, incentivizing players to go for promotions with a more enjoyable and user friendly experience.
Here's an outline of the player to moderator hierarchy:
Players
Users going through the cells, attempting to score the highest for accuracy with the up to date cell cube.
Scouts
Higher scoring players get promoted to be able to try mapping new cell cubes.
Scythes
Moderators of the data acquired by Scouts, able to inspect and revise Reaps.
Mystics
Elevated Scythes working exclusively on the Zebrafish dataset.
Deliverable A: New Scythe/Mystic Interface
Scythes have different features and controls and were on the forefront of neuron mapping. Though the position was prestigious within the community, its interface was outdated and didn't represent the player's status. I contributed to this control design, consistently iterating to bring a more vibrant and fun experience to the game, and a more science-fiction look to the interface.
Architecture
There were two final UIs to design for. I outlined the respective actions needed as well as the ideal interaction for each.
Overview
Users are able to:
Choose a metric for a heat map — pull up menu
Look up a cube # — type in field
Go to selected cube — icon button
Reaping Interface
Scouts are able to:
Toggle on display of parent and/or child cell cube — toggle icon button using color change
Reap — big text button
Delete seed or trace — icon button
Scythes are additionally able to:
Inspect or revise a player's cube trace — toggle switch*
Process
Demonstrated here are the vast number of ideations on the interface, experimenting with layouts and colors, hover & click states. I am very proud of the Inspect to Review interaction for a couple reasons. Firstly, I hypothesized this would work when switching between two modes instead of using a typical toggle a la Material or Apple. I came to this idea from a simple inspiration: a light switch. Though the team and I had some doubts as to its usability, there were not only no complaints but no comment on the interaction at all — bringing new life to the phrase “good design is invisible.”
A glimpse at the hundreds of iterations on the layout and interactions
...to bring a more vibrant and fun experience to the game and bringing a more science fiction look to the interface.
Final Interface Design
I went through all these ideations of mine and chose the most on-brand selections. After some staging tests with live player Scythes we established the most functional and usable interfaces, tracking revision times and cubes revised per session (indicating speed & enjoyment). By the finals we implemented an additional “Next” button for Scythes to quickly cycle through cells.
Release video demonstrating the new UI
Deliverable B: Narrative Website
Working with illustrators and the Creative Director I used my design and narrative skills to improve the storytelling both verbally and visually. The website needed to be palatable and fun — the user demographics ranged from late elementary schools all the way to university level. Studying children's picture book structure and translating the back and forth of image and text into a web interface also revealed a little flexibility in motion and the pacing of the story. My contributions to the narrative and structure of the site earned me a writing credit.
Architecture
This site had 3 distinct page categories, each with its own unique design.
Mystic Narrative
Primary page, detailing the new narrative (/home).
Heroes
Additional information on the characters that drive marketing efforts.
Science
A more fun approach to displaying the science behind the game and its mission, split across multiple pages to break up content and ideas.
Mystic Narrative
I designed this page with more drama to differentiate its function as a narrative site. I utilized the dark of the game's interface as a distinction for the sections in which the characters were in the Eyewire world. Collaborating with illustrators and the Creative Director I used my design and narrative skills to improve the storytelling both verbally and visually. Studying children's picture book structure and translating the back and forth of image and text into a web interface also gave me the realization there is a little flexibility in motion but also the pacing of the story.
How do we tell a friendly and inviting story for future neuroscientist gamers?
A video overview of the Heroes of Eyewire
Heroes
During this process I also decided to create a page dedicated to the characters that drive the narrative, as there's no concrete version of this in the game. It was important to give each character a sort of pedestal to highlight traits and motives for players and future writers.
Science Pages
Being a science-oriented game, it was also important to highlight the science behind it and what its goals were for new players or scholarly purposes. I researched and interviewed the team at SeungLab to better understand the direction this site should have: a more academic yet friendly aesthetic. This site, in tandem with the Mystic narrative, improved SEO for the game relevant to neuroscience.
Layouts of every page in the Science category
Development
I developed this entire site in Webflow, to continue my web design practice and to allow the engineering team time to focus on the new Scythe interface. I shifted navigation conventions with a subtle hamburger menu and a more directive footer to give focus to the content, and to further the brand style Eyewire had primed for its future.
Impact
Within the first year since the shipment, the player base increased from an avg. of 856 players per month to 933 — an 8.9% jump. Because of this, the player base was able to complete the Zebrafish data expansion within 2 years, a record time for new data sets.
Next Steps
The Mystic expansion continues to bring new players into Eyewire's mission to map the brain. Explore the narrative site and the science behind it at the link here.
Similar Projects
