Photo of Michael Xander

I’m Michael Xander, a maker at heart.

I’ve been building digital products since the age of fourteen. More recently I’ve worked as a product designer, front-end developer, and product manager; I have co-founded startups, and last year I became a published author.

I specialize in product design and design systems. I care about user experience, consistency in design patterns, layouts (flow of content, hierarchy, balance, responsiveness, and grid), performance optimizations, scalable/component-oriented code, semantic markup, typography, accessibility, search engine optimization, and everything in between.

Through my multidisciplinary experience I’ve learned to collaborate efficiently with engineering, design, and product teams, and to work as a bridge between them. I love working with inspiring people that challenge my thinking and allow us to learn from one another.

For more on me, take a look at my FAQ below, or contact me at this address.

  • Are you a designer or a developer?

    I’m a product-thinking maker at heart, with a T-shaped profile. Design goes far beyond making something beautiful. As Dustin Senos once said “Painting a broken car, no matter how great the paint job is, doesn’t make the car useful.” Awareness for the engineering side of products is immensely valuable as it allows you to produce work that is technically feasible and thought-through from multiple perspectives.

    I specialize in product design and design systems, and my multidisciplinary experience helps me do what I love—building the right products and making them work better. Sometimes this means a deep dive into the front-end architecture to build a new foundation for design and engineering. Other times it means working through design problems from beginning to end. If available, I enjoy working with dedicated research and visual design teams, as it allows me to focus on my strengths.

  • What is your design process?

    I adjust my design process according to the project scope. Sometimes this means working through design problems from beginning to end:

    • Identifying the project scope: What are we trying to achieve? What are the design and business goals? Who are we designing it for (personas)? Why do they/we need it? What are the constraints? What is the priority?
    • Research: Gather insights. Understand how people use the product (what works, what doesn’t)? What are competitors doing?
    • Create concepts: Explore versions, ideas, and flows for all supported screen sizes. Identify the individual pieces that work, gather quick peer feedback, and iterate. Integrate edge cases, dirty data, and states.
    • Prototype design: Increase fidelity to gain feedback from stakeholders. Validate concept with real data to cover edge cases, dirty data, and states. Iterate based on the feedback and new discoveries.
    • Polish design: Design the fine-grained details of components, interactions, and transitions.
    • Document design and handoff deliverables: Ideally using the company’s design system or expand it with new components.
    • Collect and analyse feedback: Gather real user feedback to measure the success of the solution. If the problem isn’t solved, iterate further.

    Other times this means I want to generate fast, tangible results. For example, I often make trivial front-end changes directly in code to get real user feedback as quickly as possible.

  • What are your tools of choice?

    I usually sketch with Pigma Micron’s in a Maruman Mnemosyne notebook. For high-fidelity designs I use Sketch. I manage projects with Asana. My favorite editor is Sublime Text.

    For front-end development I prefer PostCSS (with PostCSS Advanced Variables, PostCSS Nested, PostCSS Preset Env, CSS MQPacker, cssnano, and UnCSS), BrowserSync, Stylelint, ESLint, Gulp, and webpack. I follow the BEM methodology to write CSS that is easy to maintain and scalable. While I like the idea of CSS-in-JS for an enterprise codebase, I believe it isn’t necessary for small-to-medium projects if you follow a naming convention like BEM. I favor plain JavaScript whenever possible. My take on build tooling is gulp-jekyll, which I use for most of my web projects these days.

  • What’s your take on front-end frameworks?

    Frameworks come with baked-in knowledge. They can accelerate the development process, as you don’t have to reinvent everything from scratch. The best frameworks use best practices, and you don’t have to maintain their core. This makes them great for prototypes and early-stage products that haven’t reached product/market fit yet.

    Later on for CSS a custom solution becomes easier to maintain and extend than a framework. For my own projects I prefer a custom solution based on the code-guide I follow. That said, I have experience with the usual subjects (Bootstrap, Foundation, Material Design Lite, Primer, etc.).

    For JavaScript it’s a bit different. Since ES6 development got a lot better, and while I favor plain JavaScript whenever possible, at a certain scale a library like React in combination with Redux makes state management and development all in all easier.

  • What are some backend examples you’ve coded?

    Content management system, analytics site, and a social network, to name a few.

  • Where do you live?

    I’m currently based just outside Stuttgart, Germany. I was born and raised in Germany. My working language is English, and German is my mother tongue.

  • What do you enjoy doing away from the screen?

    I love hiking and exploring cities. I recently did some long hikes in California and Arizona, and I’ve walked most of NYC (not just Manhattan), San Francisco, New Orleans, Austin, Tucson, Marrakech, Lisbon, Madrid, Valencia, Barcelona, and Montreal. I also enjoy reading books, taking photos, riding my bike, and playing basketball.

  • What are some of your favorite books?

    Sprint, The Making of a Manager, and everything we’ve collected in the My Morning Routine Library.

  • Spaces or tabs?

    Spaces (more precisely, soft-tabs with two spaces)! Spaces are the only way to guarantee code renders the same in any person’s environment.

  • Where can I follow you online?

    I’m most active on Twitter and you can also subscribe to my RSS feed.