ABOUT

Photo of Mike Heavers

I'm Mike Heavers, a Senior Design Technologist on the Future Products team at Mozilla. I've been designing, strategizing, prototyping and coding for the web for years. I'm driven to tell compelling stories with data, make disparate technologies talk to one another, and make technology more accessible and useful to non-coders.

I'm learning strategies and frameworks for better understanding human behavior and how that relates to creating more relevant & necessary technological experiences, specifically as that relates to the preservation of the natural world..

In my spare time you might find me hacking, building, climbing, riding, running, repairing, and learning - hopefully with other amazing humans.

Interested in adventuring on something together? Email me.

tools

The core set of tools I'm currently working in

Instructions: Click on a category of skills for more info on its role in the development process. Once zoomed, clicking any tool will zoom back out.

development process

All images from client or personal projects. Click images to zoom

  • (1)
    Documentation

  • From the moment I start, I keep notes in Typora.

    Everything's here: Code, links, conversations, to-dos, etc., so that if for some reason I ever need to come back to an idea, I can.

    Markdown keeps the formatting choices to a minimum so you don't spend time designing your notes, but still provides enough styling that it's easy to scan and find what you need. This also provides the flexibility to transfer formatting to other platforms later (medium, dropbox, github).

  • »

  • notes in typora
  • Any code that seems useful to other people or projects goes in a Gist. I keep separate files per language, plus workflows, terminal commands, keyboard shortcuts, etc.

  • »

  • gisthub gists
  • If the notes are useful to the codebase itself, they go in a README at the root of the file. This often includes an overview of the project, how to get up and running, to-dos, and common gotchas.

  • »

  • project readme

    README in markdown + preview

  • If the documentation is large enough, I'll create a wiki. For example, the Biofutures Exhibit needs to run for ~10 years and the processes (system startup, data management, coding, content editing) will be managed by multiple people with various technical skillsets.

  • »

  • project wiki

    Wiki for the Biofutures Exhibit for the Tech Museum

  • I keep project-specific browser windows, so that all tabs are related solely to that project, and use OneTab (Firefox) or TabCloud (Chrome) to save the state of those tabs and label them by project, so I can click once to reopen them all together later and not have to pour through my internet history.

  • »

  • tabcloud bookmarks

    Tabcloud bookmark groups.

  • (2)
    Code Environment

  • I used to think shortcuts were just another thing to memorize. Now I realize, they are one of the things that make you feel proud of the proficiency you've attained in your craft.

    When you spend the bulk of your workday staring at semi-foreign languages, it helps to have some really good tools and processes down to make that translation easier.

  • »

  • vscode plugins

    A few of the vscode plugins, shortcuts,
    and processes I use.

  • React Snippets

    A code snippets file for React. Just type a few letters to insert a bunch of code!
     

  • React Component Template

    When components have a predictable structure, I create a template for easy duplication.

  • Console Window

    I keep a console window open in vscode, so that if I commit a code error, I don't have to retrace my steps.

  • Live Reload

    Similarly, I keep a browser window visible behind the code editor with live reload. If a change breaks the page layout, I know why.

  • In source code, it's important for things to be legible. In production code, it's important to be fast loading and secure. I almost always use a bundler like webpack to manage that transformation between source and production.

  • »

  • Source vs Production Code

    Source Code vs Production Code.

  • (3)
    App Structure

  • If you commit to a tech stack too early, it can dictate your business decisions rather than the needs of the user, so I prefer to start a project as minimally as possible.

    This allows you to be flexible and pivot quickly while discovery is happening and scope is changing.

  • »

  • Back End Stack

    A recent larger-scale project's tech stack (React).

  • For large scale software, testing becomes crucial. Like user testing, automated tests can point out errors in your logic and use cases you might have overlooked. Jest is a common testing framework in React. You specify actions that might occur in an app, and test to make sure you get the expected results.

    The framework can do things like randomize data, send data in different formats, fetch data asynchronously, or test the timing of sequences of actions.

  • »

  • Fixing a failed Jest test

    Fixing a failed Jest test, which expects the cart quantity to go down by a certain amount.

  • I often have a `utils` file or folder for an app, which executes functionality used throughout the app. These often consist of time and language functionality, complex math, randomization, and manipulation of arrays and objects.

  • »

  • Javascript functions for time, routing, and array manipulation

    Javascript functions for time, routing, and array manipulation

  • I am a teacher and code mentor as well, and a lot of new developers want to understand how to make the leap from knowing javascript to writing a commercial-grade web application in something like React.

    I plan on writing an article to address this, but for now, here's a quick look at high-level project structure.

  • »

  • React Project Structure

    Organization of a React app.

  • (4)
    Collaboration & Git

  • Git is essential to tracking the changes you make in code, allowing others to see what changes you introduce, and combining the work of many into one. Github also has some great tools and workflows for collaboration and project management.

  • »

  • Using Sourcetree for handling Git Changes

    I am a very visual person, so I use Sourcetree for most of my Git processes vs. the command line.

  • I find it invaluable to spend quality time reviewing the code of others. I learn a lot from other disciplines and coding styles, and have a better understanding of project progress. Plus, good feedback can help others become better developers and even tighten team bonds.

    A common workflow for me in Git:

    •pick a feature or bug in an app, and make a branch (copy of the app).

    • When my work is done, submit a pull request to merge that code into the main app, referencing any specific issues and explaining what has changed.

    • Have it reviewed by at least one team member and approved before merging it back into the dev branch.

  • »

  • Feedback and comments on a pull request, and using Github Projects to manage Agile Sprints

    Documentation, feedback and review on a pull request, and using Github Projects to manage Agile Sprints.

  • Most important of all are inspiring coworkers, a nice environment in which to work, and good practices on how to work well with others. I've been reading and learning a lot about communication, collaboration, motivation, and human psychology lately.

    I'm lucky in that my wife specializes in this, and I get access to all of her workshops, books, and her brain.

  • »

  • Workshops at 1111 Supply

    I make these flash cards for helpful practices I've learned.

ux process

All images from client or personal projects. Click images to zoom

  • (1)
    Inspiration

  • Before getting started I try to establish a mutual understanding with key stakeholders about what problem we're solving, who we're designing for, and what the working arrangement will be like. To help establish that, this Service Definition Worksheet, from the book "Lean UX", is helpful to me to establish those.

  • »

  • service definition workshop
  • A creative brief questionnaire allows the client to express in their own words where they feel we should focus our efforts.

  • »

  • creative brief quarter
  • I then like to establish a scope of work and a timeline. My experience is primarily in small, collaborative, cross-disciplinary teams using Agile methodologies, with sprints of 2 weeks that start with outlining goals and responsibilities and addressing concerns, and end with a retrospective on how to improve and adjust.

  • »

  • project timeline

    Project timeline.

  • Clarifying what we already know and what has already been attempted is important, in order to avoid reinventing the wheel. Looking at objective metrics, like data summaries, is helpful.

  • »

  • analyze relevant data
  • IDEO has a great Design Thinking Toolkit that helps in the Inspiration, Ideation, and Implementation phases of a project. A good start is to talk to people - the audience, experts, and people from analagous fields who might reveal unique insights.

  • »

  • talk to audience, experts, and get analagous inspiration
  • A summary of audience insights

    A summary of learnings from a non-profit food justice initiative I worked on.

  • (2)
    Ideation

  • One of my favorite parts of a project is the idea generation phase. Getting a bunch of people in a room to brainstorm everything from the obvious to the impossible, then throwing those up on a wall, grouping them, finding themes, and culling them down to something we're excited about and feels relevant.

  • »

  • Idea Generation - Wall of themed sticky notes

    Sticky notes are a great way to get that done.

  • Key themes from the ideation phase

    Key themes from the ideation phase emerge.

  • You can't solve all the problems of all of the people all at one time. I find it helpful to identify key user personas, and try to imagine what their experience might be. Or better yet, ask them to imagine it themselves.

  • »

  • Persona template
  • Sample user journey

    User journey, Lululemon. Design by Stink Digital

  • (3)
    Implementation

  • Once the problem is clear, we start to think about how that user journey applies to what we're building, via low-fidelity user-flows and wireframes.

  • »

  • User Flow

    Flowchart, Google Luminate. Design by Hush

  • On the design side, mood boards and reference imagery helps keep us excited and gives starts to give visual shape to all that data.

  • »

  • Idea Generation - Wall of themed sticky notes

    Mood board for an interactive data visualization installation

  • While thinking about design is helpful, I find a common tendency is to want to embed that in the UX, but at this stage its important to keep wireframes low-fi, in order to keep the focus on the concept, and not the design. This makes things easy to understand, change, and avoid deliberating over stylistic preferences.

  • »

  • User Flow

    Lululemon for Stink Digital

  • Where it makes sense to help illustrate the implementation, or make the abstract more clear, higher fidelity wireframes start to emerge.

  • User-specific product wireframe

    Jordan XXV Wireframe, design by Los York

  • With physical components, I almost always build schematics, then workable code "snapshots" that build out the simplest functionality first, creating a record of the evolution of functionality over time. This makes it easy to step back where the need for simplification arises or unexpected complications emerge.

  • »

  • Electronic component schematic

    Fritzing Schematic, Nike Fit for Instrument

  • Sometimes it's helpful to see in three dimensions. I really enjoy making simple 3D models and renderings, and use 3D tools like Sketchup, Unity, Cinema4D, and Fusion360 to construct these.

  • »

  • 3D Component Rendering

    3D Model of a speaker enclosure in Fusion 360

  • I love when projects allow for something tactile. Screens are amazingly effective, but once things gain physicality, you can really appeal to the five senses.

    At right, a low-fi sensor based prototype and app using arduino, react native, and laser-cut foam core, dubbed the Christmas for its stand and red white and green wiring.

  • »

  • Spring loaded trigger mechanism

    In prototyping, I find hot glue and plywood are good friends, and half the battle is hiding the mess.

  • Stress testing is key, but animals do not make suitable replacements for small children.

  • When designing for environments, I often create a simple systems diagram that quickly helps to indicate where components sit in the space and how they interact.

  • »

  • User testing plan

    Systems Diagram for Instrument, client NDA

  • Visual renderings of the physical space help think through scale and feasability.

  • »

  • Environment Rendering

    Floorplans, Steelcase for Instrument

  • Considering the overall environment helps me to think through logistics such as installation, networking, sound, and foot-traffic.

  • »

  • 3D Component Rendering

    Environment rendering, Reconstrukt for Gensler

  • By this point it can be easy to get tunnel vision, which is when it's helpful to get things in front of the potential audience. You almost always discover that they use things in ways you never expected, uncover issues you never thought of, and provide input that makes things incrementally better.

  • »

  • User testing plan

    A plan for user testing, identifying demographics, interests, etc. Design by Instrument

  • Afterwards, you can start to summarize key learnings.

  • »

  • Key learnings from user testing

    Annotated feedback. Nike for Instrument

  • Key learnings from user testing 2

    Summarized learnings. Nike for Instrument

  • As you incrementally incorporate changes based on these learnings into your product, it's important to keep an eye on how it affects your broader audience through both quantitative and qualitative data.

  • »

  • Analytics

    Google Analytics, Personal Site

  • The last step is the first - take what you've learned, figure out what your next goal is, and repeat the process.

  • Back to start

Skills

Relationship between proficiency, enjoyment, and experience in several core disciplines.

CRITERIA:

Instructions: Click on the key colors at the bottom of the chart to isolate each ranking criteria. Mouse over any dot on the chart to view the percentage value for the chosen skill under the selected criteria (e.g. 30% enjoyment of server & DB related tasks, 85% proficiency in concept and prototyping).

network

Selected employers, agencies and clients I've worked with in recent years.

Instructions: Hover over the text around the circle to see how each business in the network is connected. Click on underlined clients to visit the project link.