Prev Project
Next Project
Close Project
Be the trusted place where travelers go for the most useful information to make fast, effortless decisions.
Since joining Google, I’ve had the privilege to build products in the service of hundreds of millions. Most notably, I led the unification of the Google Travel products under a single brand and navigation structure.
This entailed inspiring and motivating a coalition of executive sponsors who were skeptical of a cohesive offering. I believe the lasting partnerships I formed and the credibility I gained were a function of diligence in my preparedness, on-the-fly adaptability, and the time I committed to over-communicate key toggle points in our strategy. To realize the new brand identity, we partnered with the external agency Wolf Ollins.
Achieving brand buy-in for a product at the scale of Google Travel required a combination of market research, external agency partnerships, and substantial internal awareness campaigns, such as 'Why Travel?'
Adding a flagship identity to Google's brand portfolio requires equal parts metrics driven research and human-centered principles. If the brand doesn't resonate with people, it follows that metrics won't converge the way you'd like. Likewise, if you optimize the brand for a specific market, you could easily alienate others. To art direct Google Travel, I had to dig deep into my skillset. I created a data-viz encompassing all (thousands) Google's branded marks to distill common visual language principles. The analysis added a quantitative emphasis on the largely subjective visual design giving senior stakeholders a common language to offer feedback around. Landing this brand has been one of my favorite experience at Google since it brought together equal parts strategy and human-centered asthetics.
The People + AI Guidebook was written to help user experience (UX) professionals and product managers follow a human-centered approach to AI.
While building products by day, I embarked on an ambitious grassroots journey by night. Together, a fellowship of five Googlers and I recognized a gap in the principles and processes by which AI-powered features were being conceived and developed. Over the course of a year, we synthesized data and insights from internal product teams, industry experts, and academic research. From our insights, we crafted the People + AI Guidebook, an open source resource advocating for a more human-centered approach to AI.
Working on the People + AI Guidebook has been a life changing endeavor for me. Fiercely advocating for even stronger human sensibility and values within machine intelligence has stretched and deepened my own design philosophy. Working alongside passionate teammates filled me with bottomless energy and I loved the process of distilling opaque academic theory into concrete and actionable recommendations.
Examining the possibility of systems, lateral thinking, and the role of storytelling in futurecasting for assistive products and features.
Human-centered design shifted designers from a fascination with things to people and brought design thinking, empathy and humanity into the mainstream of product and program development after mass industrialization. With globalization, an unflinching focus on consumers, and the emergence of exponential technologies like AI making the world increasingly complex, has this conception of design centered on humans run its course?
There's a growing mindset that centering on individual and consumerism in design has gone too far. How do we combat this, and what's next for design? This talk will dive into another idea, going back to the relational aesthetics movement and thinking deeply about group participation and the role of the user, and why it is essential with the growth of technologies.
Accelerating neuroscience research and discovery by open sourcing a collaborative, online platform.
At SeungLab scientists study Connectomics, a specialty in the domain of Neuroscience which seeks to understand brain structure and function by constructing comprehensive maps of the connections between neurons. Traditionally, Connectomics is a tedious and time consuming process performed by manually tracing through a volume of micrographs like a 3D coloring book. To glean meaningful information from biological neural networks, many thousands of neurons must be reconstructed. Researchers at SeungLab specialize in volumetric neuron reconstruction and employ sophisticated Machine Learning + Computer Vision techniques in collaboration with expert tracers to rapidly accelerate this process.
To catalogue the complexity of the human brain, researchers at Seunglab are working towards an automated pipeline for gathering and processing experimental data. However, neuroscience has a data problem and Seunglab is no exception. Researchers have an excess of data and a lack of investigative power. The scale of today’s scientific challenges demand cross–disciplinary collaboration. Collaboration presents an opportunity for teams to leverage each others specialties to move faster and tackle larger and more important problems. Collaboration necessitates sharing of knowledge, time, ideas, skills, and increasingly data. How can researchers at Seunglab benefit from collaboration?
Open Source
Neuroscience
Free to Use
Responsive
Web Application
Interactive Graphs
Figure Generator
Persistant URLs (permalinks)
We partnered with Seunglab to design, develop, and deploy a responsive, open source, web application targeted towards neuroscientists with the goal of assisting researchers in the classification of new neuron typologies.
Using Google’s Material Design library as basis for interaction patterns, we rapidly deployed a beta version and began extensive prototyping while seeking usability feedback from a host of researchers and designers. We continued prototyping for two months–refining touch points, tweaking the usability and functionality of charts, improving mesh loading performance, and adding features like auto-complete search to name a few.
After the push to production, we handed off our design + development guidelines to the team at Seunglab where researchers continue to grow the platform with feedback from the scientific community.
The Discover phase aims to know your client, their brand and their customers while gaining a full understanding of the project. This is essential to allow the design team to understand the task, develop a feel for the client’s business or interest, become familiar with the user and empathize with the brand.
At Seunglab scientists study Connectomics, a specialty in the domain of Neuroscience which seeks to understand brain structure and function by constructing comprehensive maps of the connections between neurons.
The production and study of connectomes, may range in scale from a detailed map of the full set of neurons and synapses within part or all of the nervous system of an organism to a macro scale description of the functional and structural connectivity.
Given the academic nature of the Museum, we viewed Market Reaserch as an oppertunity to learn from peer successes and failures—essentially compile a list of best practices for engaging with data and the scientific community at large.
Do's
Projects generally include a wealth of data along with supporting methods, empiracle results, and sometimes publications.
Most data + figures support permalink option for robust citations.
Good tools for filtering and exploring the data.
Projects may include SDK + API packages for building custom applications from data.
Dont's
Information design could benifit from a designers touch. Complex jargon can inhibit glanceability for all but seasoned experts.
Repository generally not responsive, useful only on desktop.
Information architecture mostly flat, could benifit from chunking, progressive disclosure. Lack of onboarding.
Navigation often ambiguous at best.
Before comensing with design and development, we conducted interviews, site visits, and other forms of ethnographic research to gain insight into the lives of our potential users.
Stakeholders
SeungLab
Researchers at SeungLab are highly skilled at gathering, managing data and thus have an excess of it but a lack of investigative power.
Individuals
Neuroscientist
Has hypotheses that may require additional data for substantiation. Needs general information about cell typologies.
Neuroanatomist
Has hypotheses that may require additional data for substantiation. Needs specific information about cell morphology and physiology.
Student: Undergrad
The brain is the most complex system in the known universe, learning by interacting with real cells + data leads to deeper processing and increased retention.
Student: Graduate
Graduate students in search of a first publication can explore the museum in search of supporting evidence.
Gamer: Eyewire
The museum functions as a repository of all the cells mapped by gamers on Eyewire. Here, players can come explore their work and marvel at the complex beauty of the cells.
Curious Surfer
Neuroscience and the brain are at once beautiful and mysterious. Why not spend a few hours browsing through the basis of thought?
Organization
Lab
Research labs all have unique specializations. The museum may be contain just the data necessary for their next paper.
University
Professors often balance an active research practice alongside their teaching careers. The museum offers another aid for explaining the brain at the cellular level.
Eyewire
As a leading citizen science project, Eyewire is tasked with sharing the beauty and complexity of the brain with non-experts.
We conclude the Discover stage by focusing the values, needs, and challenges of our subjects.
Publish or Perish
Researchers have an excess of data and a lack of investigative power.
Scale = Collaboration
The scale of todays scientific challenges demand cross–disciplinary collaboration.
Go Big or Go Home
Collaboration presents the opportunity for teams to leverage each others specialties to move faster and tackle larger and more important problems.
Sharing = Caring
Collaboration necessitates sharing, of knowledge, time, ideas, skills, and increasingly data.
The strategic decisions make in the Define phase will determine the success or failure of the project. Based on the business goals, a communication strategy for the chosen digital touch points must now be developed. Based on the brand goals, we will create the design principles. With the help of user insights, we will develop guidelines for the user experience. Based on all the goals and requirements, we will define metrics for measuring success.
During the Discover phase we go super wide to understand the problem space and gain perspective from the point of view of our users. The Define phase presents an oppertunity to focus our research and frame our challenge through a series of simple internal questions.
What is the problem you're trying to solve?
Researchers have an excess of data and a lack of investigative power.
What is the ultimate impact that you're trying to have?
Enable more people, both expert and non-experts, to engage with neuroscience.
What are some possible solutions to your problem?
Given the ease of scalability and potential for rapid development, creating a web-based application seems to be the most feasible option.
What are some of the constraints + context?
We have a small team for both design, research, and development, and shorter than expected schedule for launching a usable product.
Our research concluded that we should focus our efforts on designing a product for neuroscientists, as they are the demographic that aligns most closely with our available data and (after students) the most numerable.
The Museum will function as an open repository for connectomic neuron reconstructions of neruons from Seung Lab. Below is an overview of the design and development considerations.
Context
Application
Create a responsive web application for visualizing and exploring connectomic data powered by a leading framework.
Data Access
Mesh Delivery
An efficient pipeline for delivering and displaying 3D neuron meshes.
Data Delivery
A system for delivering supplementary connectomic data for neuron meshes.
Citation
A system for generating semantic and persistant publication–quality citations.
Visualization
Onboarding Diagrams
Create an introudction to the project, data and Museum interation model.
3D Viewer
A 3D environment capable of accurately displaying neuron meshes and supporting annotations.
Skeleton Density
An interactive graph displaying stratification density information for neuron meshes.
Directional Response
An interactive graph displaying directional response information for neuron meshes.
Temporal Response
An interactive graph displaying temporal density information for neuron meshes.
Supporting Meta–Data
Context relavant information supporting both 2D and 3D visuals.
Interaction
Browse Data
Progressively disclose infomration for users engagement.
Filter Data
Dynamically filter through connectomic dataset with respect to classification system.
Search Data
Auto-complete search throught connectomic data—by same categories available in filter.
Compare Data
Overlay connectomic information to see trends in both 2D and 3D contexts
Explore Data
Freely engage with connectomic data in both 2D and 3D contexts.
Manipulate Data
Quickly toggle, overlay, browse, filter, and search through connectomic information.
3D Navigation
Freely manipulate neuron meshes in 3D context using familiar interaction models.
Learn More (Context)
Where possible, provide additional context through user interaction or external links.
Share Views
Figure generator for quickly sharing publication–quality scientific figures.
Perhaps these stories could be prefaced by a quick paragraph stating the importance of User Stories and their particular relevance to this project. Following could be a figure to summarize the relative knowledge + complexity of user needs / features most likely to engage with.
To ensure consistency across application elements and devices we created a set of standards ranging from idenity to typography, to color and interation models. We organized our styleguide into 6 progressive sections: Identity, Elements, Components, Compositions, Layout, and Views.
We focused our user journey map on the experience of a first time neuroscientist user. While extensive, the map is not meant to include all possible touch points of the Museum, rather it serves to detail the flow of a single user from their perspective.
By this point in the process we had established Angular as our a front-end framework. This motivated an increasingly modular design language of nested + encapsualted components. Written content on the Museum consists of mostly static descriptions and labels. Without having to account for dynamically generated CMS content, the grid was able to remain in a relatively simple 8pt x 4pt system.
3D navigation is complex. Our research revealed that most scientists are interested in viewing the neurons from just two specific orientations: top and side. The accuracy of these views is dramatically improved by implementing virtual cameras with othographic projection as an alternative to standard perpsective projection. To facilitate swift comparisions we created a set of 3D control buttons for quick snapping between views and projections.
Having a solid understanding of content is critical when designing with technical materials. It turns out the end goal isn't to reduce the amount of complexity but rather to manage the level of it in a given view or interaction.
In the context of the Museum, data driven design means approaching the design of graphs and resulting information architecture through the lens of a scientist. We asked what data are most important and what is the best format for communication Our iteration process moved from digesting raw data to a cycle of sketching, implementing, user testing and refining through interative prototypes.
Elements that are close together are perceived to be more related than elements that are farther apart. We used the pricnple of proximity to design a card system to encapsulate information and interative elements within relavant components.
The problem of search in the Museum is knotty. Most classification categories are barely human-readible and cell names are stored as five or six digit strings. Searching can start from a place of uncertainty. A simple implementation of auto–complete text entry offers attractive advantages in both speed and usability.
The Museum was a perfect storm of a project. Extensive ethnographic research paved the way for a truly human-centered design process. Our team was able to match user needs with stakeholder expectations and deliver a fully functional product ahead of schedule. We tackled a complex problem with an iterative development cycle. Not every proposed feature made it to the current release but an extensive styleguide and robust development framework allow for extendability by a skeleton team of ressearchers at SeungLab.
Do's
Front-end frameworks are powerful ways to think about both the development and design cycles for web applications
Sharing design prototypes early on with both stakeholders and users helps to keep the project grounded.
Leveraging existing design systems like Google's Material Design Lite accelerate both design and development.
Thinking small to go big helped to keep feature creep to a minimum.
Dont's
You are not your user. Don't make the mistake of thinking you (as a designer) know best when it comes to prioritizing features.
You don't have to go it alone. Don't be afraid to ask for input from team members when diving in to the dev space, making a relable and readible code is what counts.
We partnered with Seunglab to design, develop, and deploy a responsive, open source, web application targeted towards neuroscientists with the goal of assisting researchers in the classification of new neuron typologies.
Using Google’s Material Design library as basis for interaction patterns, we rapidly deployed a beta version and began extensive prototyping while seeking usability feedback from a host of researchers and designers. We continued prototyping for two months–refining touch points, tweaking the usability and functionality of charts, improving mesh loading performance, and adding features like auto-complete search to name a few.
After the push to production, we handed off our design + development guidelines to the team at Seunglab where researchers continue to grow the platform with feedback from the scientific community.
Volunteering as design director to create a distinct and memorable brand for a Boston TEDx chapter.
Growing up, TED talks were an indispensable source of inspiration for me. Through TED talks I was afforded access to a world full of ideas and possibility. One talk in particular by Kevin Slavin titled “How algorithms shape our world” had a profound impact in shaping my own world. To this day I am in awe of his delivery, pacing, and the way he weaved together just the right metaphors to convey his message in a memorable way. I never could have imagined that years later, I’d be collaborating with him directly, at MIT Media Lab.
Volunteering to be the design director for TEDxBeaconStreet was the first time I was able to use my professional skills to give back to a community that profoundly shaped me. TEDxBeaconStreet is funded by a non-profit organization. So I deployed my background in computational design to develop data-driven branding techniques, and multimedia installations at a fraction of the cost.
How does a brain make a mind? Experience the wonder in virtual reality at Tribeca Film Festival.
Thanks to cutting edge artificial intelligence, nanoscale resolution imaging, seriously powerful computers, high resolution portable displays and unprecedented international collaboration, Eyewire and the Fluid Interfaces Group at MIT Media Lab brought a never-before-seen interactive immersive neuroscience visualization to Tribeca Film Festival on April 18, 2016. In Virtual Reality, visitors were able to teleport into a foreign yet familiar world to explore a new pathway of narrative - the electrophysical connections among neurons. They ventured into a freshly discovered circuit of cells responsible in part for the brain’s ability to perceive motion - the very ebb and flow of story itself.
Conceptualizing the BrainVR experience was a collaborative process among neuroscientists, HCI researchers, and exhibition organizers. Further, we were experimenting with emerging positional tracking for immersive VR experiences which introduced new dimensions to the project. The biggest challenge of all was communicating a complex scientific discovery in a fun and familiar way that our audience would immediately grasp. To this end, we created a telepresence in the form of a friendly robot to help walk participants through the virtual space.
Prototyping a possible future for the worlds smartest citizen science project.
Eyewire is a game to map the brain in collaboration with the Seung Lab at Princeton. Anyone can play and you need no scientific background—over 200,000 people from 145 countries already do. Together they are mapping the 3D structure of neurons; advancing the quest to understand ourselves. To achieve viral and sustained growth, Eyewire will need to invest in improved user experience design. UX design is the process of enhancing user satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product.
What would the future of Eyewire look like? How would it behave? Shrugging aside current browser limitations, I set to work designing and prototyping my vision for the future of Eyewire. This prototype uses elements from a new design language I've been developing, it's built using a combination of Sketch, FramerJs and threejs.
Atomic Design System
Framer Prototype
Notification System
8pt Grid System
Blur–Behind Style
Iterative Design Cycle
The primary motivation for this project was to prototype a new in-game notification system. We began this process with a series of brainstorming sessions where we listed and categorized all the possible game states in Eyewire. From there we chose to pursue announcement notifications for our initial MVP. Announcement notifications are notifications that appear when a new game state has been reached. They come in three flavors: Individual, Targeted, and Global.
Individual Examples (Personalized messages to individual players)
Success
You completed 10x growth with project Neo!
Top Player of Day
You were yesterday’s top player of the day with xxxxx points!
Top Ten Monthly
You were in the top 10 players for this month at #7!
Promotion
You were promoted to the role of Scout.
Targeted Examples (Personalized messages to targeted player groups)
Competition
The competition ends in 30 mins! Time to make your move.
Competition
The competition has ended. Check the leaderboard for final scores.
Competition (Candy World)
On 12/17 get catapulted into a tooth-achingly sweet world(link to blog).
Challenge (Mergamatic)
Find a merger in the current overview cell.
Global Examples (General messages intended for the entire player base)
Big News
Eyewire just published a paper on xyz (link).
Big News
We just completed sector 5 in The Dig (link).
Telegram
We need some players to help us finish cell xxxxxxx.
Tech Fail
Grim’s stuck in the servers again! Try panda cam while you wait (link).
Iterative design + development strategy demands the systematic organization of project assets. I have found the principles of Atomic Design conducive to this process. Inspired by physics of the natural world and possibly the divide and conquer algorithms of computer science space, Atomic Design reduces project asset clutter into six unique types: Identity, Elements, Components, Compositions, Layout, and Views.
Identity
Styles: Typefaces, Typography, Color, Brand Assets
Elements
The simplest reusable items: Buttons, Drop–Downs, Nav–Bars, Footers, Switches, Toggles, etc
Components
Reusable combinations of elements: Cards, Dialogs, Forms, Prompts, etc
Compositions
Reusable collections of Components: Sidebars, Pop-Ups, etc
Layout
Grid System: I make use of two grids, one for local layout (8pt x 4pt) and another for global organization (8-12 responsive columns).
Views
Collections of Compositions, Components, and Elements: Overview, In-Cube, Scouts' Log, etc
I started this project by interviewing Eyewire players and stakeholders. I then quickly worked alongside game admins and our game dev team to generate rough specifications for an MVP notification system. After a lot of initial sketching I moved to building out a solid file structure in preparation for an iterative design cycle between static assets in Sketch and the dynamic world of Framer. The Synapse prototype has been my first experience heavily integrating Framer into my design process. Though Framer has a significantly higher learning curve than something like Invision or Flinto, the potential is incredible. Having a strong foundation in programing, I find that Framer simplifies the development cycle for a number of common interaction design challenges like tuning microinteractions, designing with real data, and testing application behavior + feedback loops. Framer integrates super well with Sketch symbols speeding the refinement process for design language towards a sort of parametric system like many CAD software packages (Solid Works, 3ds Max, etc). I'm looking forward to working more with Framer.
Bringing the future of neuroscience exploration and education to virtual realms using the Oculus Rift.
In October of 2016, president Barrack Obama called upon a coalition of pioneering researchers, designers, technologists, and diplomats to gather at Carnegie Mellon University to demonstrate the very leading frontiers of technology. We were invited to this White House Frontiers conference to present our latest virtual reality experience: MSTY. The three pound organ sitting behind y our eyes is nothing short of extraordinary. Symphonic activity among billions of neurons gives rise to thoughts, feelings, and ultimately, the perspective and personality that turn a brain into a mind. Thanks to cutting edge AI, nanoscale resolution imaging, and the help of a quarter million gamers from around the world, crowdsources neuroscience sets the pace for a new wave of discovery. The creators of Eyewire reveal the first glimpse of Neo a cortical game coming 2017 that will invite gamers to solve the puzzles of perception.
MSTY VR is our most recent virtual reality experience. It features a knotty entanglement of neuron reconstructions from cortex—the outer most layer of brain tissue responsible for perception. MSTY, so named for the particular flavor of AI involved in the reconstruction process, was intended to be a mostly passive safari-type experience. The user would be accompanied by a friendly, derpy, but exceedingly capable AI companion—MSTY. Inspired by Google's early ImageNet dataset and success in training neural networks to recognize cats in Youtube videos, we conceived MSTY as a hovering cat–like robot with paw–like arms. The experience lasted approximately 5 minutes, during which MSTY intelligently and naturally navigates toward areas of interest acting as a sort of subliminal tour guide.
Visualizing dynamic depth of field. A depth–mapped image where darker shades of gray represent sharper focus.
Refreshing Eyewire’s landing page with the addition of an interactive narrative-driven explore section.
Eyewire is a game to map the brain in collaboration with the Seung Lab at Princeton. Anyone can play and you need no scientific background—over 200,000 people from 145 countries already do. Together they are mapping the 3D structure of neurons; advancing the quest to understand ourselves. To achieve viral and sustained growth, Eyewire will need to invest in improved user experience design. UX design is the process of enhancing user satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product.
I challenged my team to design a mobile friendly solution for connecting prospective Eyewire players to the science and the story behind the citizen science project. Better UX through interative narrative will result in increased conversion and retension rates. I proposed a refresh to Eyewire’s current landing page and the addition of an explore section featuring complete support for mobile, tablet, and desktop devices. The increased context will allow prospective players to engage with Eyewire before entering the tutorial leading to substaintially increased conversion rates.
Generative Design
Interactive Narrative
Responsive
Creative Code Prototyping
Custom Front-End Framework
Eyewire is a citizen science project founded in Sebastian Seung's neuroscience lab at MIT. The project aims to gamify the process of assisting advanced machine learning algorithms in the reconstruction of 3D neurons from microscope images. This endeavor is unprecedented, even the elevator pitch for this game is a mouthful. Could we connect players more deeply to the science and vision of the lab with an interative experience?
This project was my first attempt to align my passion for programming with my professional design practice. I worked primarily with Processing for prototyping and its Js cousin p5 for the final implementation. Early prototyping with Processing was swift and revealed lots of possible visual and behaviorial directions for the simulations. I learned a lot of hard lessons converting my native Processing code to work in the browser. Performance considerations across devices and inconsistencies across browswers lead to many hours of perfomance tuning and code reviews with our devlopers to help make the vision a reality.
The explore page was sort of an experiment in browser-based narrative. We asked ourselves, what is the fastest, most lightweight way to deliver a message? In response, we explored a variety of story–telling techniques including generative design, infinite looping gifs and embeded video.
Applying simple CSS transitions to responsive content can have delightful side effects like bringing heroes of neuroscience to life!
Your brain makes you amazing / it allows you to learn intricate skills/ dream fantastic dreams / even laugh at goofy cat videos. But how?
This question has puzzled scientists for centuries. Your brain contains 80 billion neurons / connected through 100 milliion synapses. Working together, these cells make you, you. However, most of their circuits are still uncharted. When Galileo first peered through a telescope, it began a revolution in the way we see the world around us. Today, neuroscience is revolutionizing how we see the world within us. We're calling on gamers to help connect the dots by creating a visual 3D map of the brain.
We are wonderers.
Eyewire is the first of its kind / its a 3D puzzle game / as you solve puzzles / you're mapping the brain.
Collaborate and compete for science!
My first strategy for growing life-like neurons was to use a developmental approach inspired by cellular division.
An L-system or Lindenmayer system is a parallel rewriting system and a type of formal grammar. An L-system consists of an alphabet of symbols that can be used to make strings, a collection of production rules that expand each symbol into some larger string of symbols, an initial axiom string from which to begin construction, and a mechanism for translating the generated strings into geometric structures (source Wikipedia).
During development, neurons extend their branches by following chemical gradients through diverse tissues. I attempted to simulate this behavior with a swarm of autonomous agents governed by a physical system in Processing. This emergent behavior can be described by a surprisingly simple set of rules.
Steer towards average position of neighbors (long range attraction)
Avoid crowding neighbors (short range repulsion)
Steer towards average heading of neighbors
Randomly change heading by a small amount each update step.
(Below) The human retina has a beautiful solution to sampling in its placement of photoreceptor cells. The cells cover the retina densely and evenly and yet the cells’ relative positions are irregular. This is called a Poisson-disc distribution because it maintains a minimum distance between cells, avoiding occlusion and thus wasted photoreceptors. (source: Mike Bostock, Visualizing Algorithms)
To facilitate neural transmission-like activity in the simulated neurons, I studied up on various graph traversal algorithms, Dijkstra, depth first search (DFS), and breadth first search (BFS). I settled on something in the realm of a BFS which is visualized below. Red dots are representative of signal transmission and green lines correspond to the current branch segment.
Intergrating the neuron simulation with the rest of the explore page pushed my development skills to a new level. I learned new programing patterns and ways of thinking. The animation controller is composed of a series of small interconnected programs and supporting algorithms which coordinate the network of cells and mediate state with the rest of the experience.
Enivornment
Explore Page
We designed a custom front-end framework, duely named 'Synapse' which synchronizes the different animation modules using a global 'T' time.
Support Program
Neuron Coordinator
Neuron Coordinator is the main controller for the neural network. It synchronizes neuron-time with global 'T' time to ensure the experience stays in sync.
Neurostate
Each animation sequence within the neural network has a unique neuostate which governs the networks behavior with respect to 'T' time.
Neurotransmitter
Each Neurostate has an associated Neurotransmitter which monitors the networks state.
Neural Network
NNN
NNN, (short for Nortons Neural Network) is a super–class wich directly controls each of the neuron class objects.
Neuron
Neurons are controlled by the NNN class but exhibit control over both Node and Bouton classes.
Node
Nodes are controlled directly the Neuron class and operate as autonomous agents in the context of each Neuron.
Bouton
The Bouton class is controlled by the Neuron class and is responsible for two specific actions. First, Boutons are displayed at the tips of branches to mark the neuron growth process complete. Second, Boutons may move along the neuron branch to simulate signal propogation.
Utility Algorithms
Poisson-Disc
A sampling algorithm which nicely mirrors the spatial distribution of photoreceptors in our retinas. This algorithm is used to create the initial distribution of the neurons.
Kruskal-MST
A Javascript implementation of a classic minimum spanning tree (MST) algorithm used to pass signals around from neuron to neuron in the network.
Parse-SVG
A simple SVG parser to convert vector graphics into usable data format for animation in p5js.
This is usually the part of a project where I invite you two engage with the experience in real life—the explore page is a little different. Though the experience is fully functional, it was never pushed to production. Performance issues and inconsistencies plagued the neuron animation system. If I were to critic myself, I would admit that I bit off a whole lot more than I could handle. I designed + developed the Explore Page for close to six months but there is a point of diminishing returns where a design becomes more of a personal endeavor than one of service. I'm thankful for the many lessons learned, in the future I will seek to iteratively improve up on good design—rather than aim for a pillar of perfection.
Eyewire is a citizen science project founded in Sebastian Sueng's neuroscience lab at MIT. The project aims to gamify the process of assisting advanced machine learning algorithms in the reconstruction of 3D neurons from microscope images. This endeavor is unprecedented, even the elevator pitch for this game is a mouthful. Could we connect players more deeply to the science and vision of the lab with an interative experience?
This project was my first attempt to align my passion for programming with my professional design practice. I worked primarily with Processing for prototyping and its Js cousin p5 for the final implementation. Early prototyping with Processing was swift and revealed lots of possible visual and behaviorial directions for the simulations. I learned a lot of hard lessons converting my native Processing code to work in the browser. Performance considerations across devices and inconsistencies across browswers lead to many hours of perfomance tuning and code reviews with our devlopers to help make the vision a reality.
The explore page was sort of an experiment in browser-based narrative. We asked ourselves, what is the fastest, most lightweight way to deliver a message? In response, we explored a variety of story–telling techniques including generative design, infinite looping gifs and embeded video.
Journey into the depths of the retina with the Dig, Eyewire's next big Adventure.
Eyewire is a game to map the brain that originated at Sebastian Seung's Lab at MIT. This citizen science human-based computation game challenges players to map 3D neurons in a retina. Eyewire was officially launched on December 10, 2012 and has since grown to over 200,000 players from 150 countries. Eyewire gameplay advances neuroscience by helping researchers discover how neurons connect to process visual information. Anyone, anywhere can help neuroscientists develop advanced artificial intelligence and computational technologies for mapping the connectome. In Eyewire, gamers solve 3D puzzles. As they solve the puzzles, they are actually reconstructing 3D models of neurons at nanoscale resolution from electron microscopy images. Eyewire requires no scientific background to play and works best on high speed internet.
I was tasked with directing and developing the identity system, supporting brand materials, and promotional assets for 'The DiG', Eyewire's next big Adventure. Based on the nature of the game and a potential throwback to pychedelic rock anthem, we framed the challenge as a 'Journey into the depths of the retina'. The formal language was inspired by digital aspects of the neuron reconstruction, while the asset behavior was inspired by the computational processes of active neurons and cellular automata. The wordmark is composed of sixteen individual squares relating to the sixteen sectors of the scientific endeavor.
We developed a dynamic, generative, identity system with behavior inspired by the neuron reconstruction process and cellular automata. The algorithm afforded a nearly infinite range of original content for social media outlets. The denisity of black squares was designed to be related to the progress of the Dig.
Design is not a discipline, but a way of looking at the world.
Real-world challenges require, perhaps more than ever, a deep, but interdisciplinary skill set combined with an ability to operate across multiple scales with creativity. Inspired by Neri Oxman's + Meejin Yoon's 'Design Across Scales' MIT Media Lab course, and naturally, Charles and Ray Eames’ canonical Powers of Ten, DAS explores the relationship between science and engineering through the lens of Design. It examines how transformations in science and technology have influenced design thinking, and vice versa. It explores interdisciplinary tools and methods to represent, model, design and fabricate objects, machines, and systems. DAS is organized by scale, topics ranging from the macro to micro are investigated across multiple problem contexts to demonstrate that design is not a discipline, but a way of looking at the world; one that promotes the synthesis of interdisciplinary knowledge across scales in order to create objects and systems for the greater good.
Create a concept and deliverable for a minimalist quarterly publication operating at the intersection of design, technology, and people. Design the layout system, develop the brand and identity system, and assemble all of the content. And make it affordable—make it monochromatic. Can you design something people will actually want—imagine a journal for creative frontiers, a journal for the anti-discpliplinary, a journal for design across scales and problem contexts.
How would algorithms mediate a conversation with the late composer, John Cage?
MuWu is a collection of the thoughts and the experience of John Cage. Inspired by the classic text, I Ching, MuWu is intended to ask questions. How is a book composed? What is language and how does it flow? After a single trip to China, John Cage was converted to a Taoist believer. He incorporated chance operations, found in the I Ching, into most of his artworks for the rest of his life. Letting go of intention and embracing the natural flow of tao led Cage to create some of the 20th century's most influential artworks. MuWu pays homaged to to late John Cage by continuing where he left off. The book uses a computational approach to to story telling to fill up exactly 64 body pages with unique content from the compilation, Conversing with Cage. The length was chosen in response to the 64 hexagrams of the I Ching. MuWu attempts to assemble completely new and unique thoughts from the any dialogues found in Conversing with Cage. This approach shifts creative control from the designer towards the algorithm.
MuWu was concieved as a student project during my junior year of university. At the time, I was still quite new to programing and just getting my feet wet with the possibilities of design mediated computation. It was a serious risk to take on a full book publication using an unfamiliar technology and ambitious concept. Through the patience of my professors, many, many late evenings debugging, researching, and most importantly a marked propensity for experimentation MuWu came into existance. The final deliverable consisted of a set of eight hand-printed and hard-cover, hand-bound books of exceptional quality. When you leaf through MuWu, you feel none of the struggle, only a clear and simple concept and formal delivery.
I found myself drawn towards the I Ching. It's system of trigrams and hexagrams felt like a sort of analog-computer. I designed a series of posters to better appreciate both the mechanisms and expanse of the divination system. Would it be possible to map these Taoist symbols into a robust and meaningful layout system?
Mu is the East Asian word descibing literally 'nothing', or 'un'. It is very curious that this is nearly the same meaning as the Greek letter 'μ' pronounced 'mu' which in modern academia is reference to a very small measurement. The title is appropriate as this text seeks to distance the design from the final outcome. Both the content and layout of the MuWu are algorithmically sampled. MuWu was sort of my introduction to the possibilities of generative design.
Layout Machine was developed to create book layout based on a predefined set of probabilities. It operates as a specialized, automated I Ching which John Cage used to create chance operations and indeterminate series for much of his work. Layout machine computes general, systematic layouts; it specifies the type of layout for a given page but not necessarily how it should be designed.
I created a series of posters to visualize the output of Layout Machine and it's supporting algorithms. It's interesting to examine the form and continuity across the algorithmically generated designs.
Muwu was my first project that leveraged the power and potential of generative design. Though highly conceptual, the project proved a gateway to many new ways of thinking and doing. The speed and flexibility of a new parametric graphic design became immediately clear, instead of pushing pixels and setting control points, I was pushing data, and controlling process flow. I used Processing, a language developed for creative coding to generate the content and much of the layout for Muwu.
A unisex collection informed by a careful investigation into genetic processes and systems.
Identical twins begin their lives in a very similar fashion, with nearly identical genomes inherited from their parents. The Our Epigenomes collection stems from a culmination of life experience. Although we are very close as identical twins and share much of the same genome, my sister and I couldn't be more unique. A lifetime of differing experiences has caused certain traits to develop, uniquely conditioning each of us to our respective environments. Epigenomes are trait differences not caused by DNA, epigenetic modification is occurs slowly, over a lifetime due to these differing experiences.
Our Epigenomes is the first in a series of ready-to-wear collections by Gloria Im. Gloria and I collaborated on the design and art direction for a series of photo-shoots resulting in a look-book. We combined a love for graphic formalism with the dimensionality of architecure to achieve a look and feel that embodied a monumental sensibility.
A greeting card protoype featuring a multi–dimensional identity system that stands on it's own.
In the spring of 2015, I, along with twelve fellow classmates, was invited to travel to Japan on behalf of the Kakehashi Creators Project. The form of the project was a two-week exchange of Japanese and American students—the aim of the project was to promote cultural exchange and foster international collaboration. Although the exchange lasted only two-weeks, we spent months preparing, learning about the history, cultral norms, and common language-isms. The two-weeks spent traveling Japan have been some of the most moving and transformative of my life.
We were asked to design simple greeting-cards. The cards should include our name, discipline, and some form of contact information—the rest was up to us. At the time, I was taking traditional graphic design classes at MassArt while exploring the possibilities of design mediated computation at MIT. Most business cards are flat, and strictly information delivery vehicles—at best a business card could be memorable, maybe even novel. What if a business card were multi-dimensional? What if it invited interaction? Could a business card help to overcome a language barrier? I gave myself a single weekend to design, prototype, and fabricate 250 cards. This is the result.
Compete or collaborate in a constructivist boardgame inspired by tetris and jenga.
Jenga Unchained was concieved during to Neri Oxman's 'Design Across Scales' course at MIT Media Lab. The prompt was simple, create a response that embodies 'The design of play.'' Instead of trying to invent a new game from scratch we explored classic game design concepts by totally reversing the rules. If the game was played in 2D, how would it feel in 3D? If the game was about destruction, how would it feel being constructed? After loads of playful conversations and paper prototyes, we settled on a concept for a game that could be played either competitively or collaboratively. We called this game Jenga Unchained.
I worked on an interdiscplinary team including two architects and an economist. I found it super interesting learning about the motivations of my fellow teammates. Each of us had a different notion of the concept of play, so initial brainstorms were all over the place. What immediately felt like a hinderance led us to a successful melding of minds. The architects pushed for 3D forms with haptics, the economist wanted a system that could be exploited for value, and I was intrigued by the possibility given by modularity. The final game felt like the combination of our unique ideas.
Before moving to our final design phase, we prototyped a multiplicity of tetris-inspired stackable 3D shapes.
I'm Alex Norton,
Product Designer
Glyph simulation rendered using p5js
Physics applied using toxiclibs
Hello, I'm a product designer building the future of travel planning at Google.
I'm a Product Designer on Google Travel where I craft assistive and accessible tools for travel planning. I'm a contributor to Google’s People + AI Guidebook and have mentored startups on the intersection of business, AI, and design.
My visualizations have been featured at TED, Tribeca Film Festival, and in Times Square NYC. And my work has appeared in Wired magazine, the New York Times, and in Nature and Cell scientific journals.
When not designing, you can find me in search of the perfect breeze, sailing FSS Apogee out of Boston Harbor
The People + AI Guidebook was written to help user experience (UX) professionals and product managers follow a human-centered approach to AI.
Examining the possibility of systems, lateral thinking, and the role of storytelling in futurecasting for assistive products and features.
Accelerating neuroscience research and discovery by open sourcing a collaborative, online platform.
Volunteering as design director to create a distinct and memorable brand for a Boston TEDx chapter.
How does a brain make a mind? Experience the wonder in virtual reality at Tribeca Film Festival.
Prototyping a possible future for the worlds smartest citizen science project.
Bringing the future of neuroscience exploration and education to virtual realms using the Oculus Rift.
Refreshing Eyewire’s landing page with the addition of an interactive narrative-driven explore section.
Journey into the depths of the retina with the Dig, Eyewire's next big Adventure.
Design is not a discipline, but a way of looking at the world.
How would algorithms mediate a conversation with the late composer, John Cage?
A unisex collection informed by a careful investigation into genetic processes and systems.
A greeting card protoype featuring a multi–dimensional identity system that stands on it's own.
Compete or collaborate in a constructivist boardgame inspired by tetris and jenga.
I love sharing adventures, discovering new design, and exploring emerging technology—especially AI.
alexnortn@gmail.com
774 766 1179
2021 Alex Norton