One of the things I love about my job, is that it sits at an intersection of product design and front-end development. This means I get to practise both, and my job is always interesting. Although I’m both a designer and front-end developer, my toolset is fairly small, and many of the apps are universally useful for design and development purposes. I listed them below, sorted by the phase of design process, but first I wanted to provide some context.
At the moment the work on design language is under way at Automattic. Part of it is finding a way to describe our design process, and so we’ve come up a with a model, where we’ve split it into four planets:
- Planet Discovery is all about identifying problems that need solutions. In case of themes it means asking questions like: Who is this theme for? What customer problem will it solve?
- Planet Hypothesis, where information gathered on planet Discovery is being put to the test. This includes doing sketches, wireframes and do mock-ups.
- Planet Deliver, where the theme is being built, fuelled by the resources gathered on planets Discovery and Hypothesis.
- Planet Listen, where we listen to what the customers are saying, and look at how they are using the product. Insights learned here are fed back to each stage of the design process.
Here is the list of tools I use while creating themes for WordPress.com, sorted by the phases of design process, or using our metaphor – planets.
Discovery
- Evernote/paper notebook. I use both Evernote and a paper notebook to make notes and write down ideas. There’s something about writing things on paper that sparks my creativity, so I always have a notebook open on my desk while working.
- Web Browser – this is my go-to research tool. Chrome is my browser of choice for work, and I’ve been using DuckDuckGo as my default search engine for a while. Aside from project-specific searches, there are a few websites that I visit frequently for inspiration, namely Pinterest, Dribbble, and Awwwards.
- Internal blogs – (called P2’s after the P2 theme that we predominantly use). I love that all our internal communications are easily searchable, so I can quickly check if any other team worked on or discussed topics relevant to my current project.
Hyphothesis
- A notebook. I never sketched much, but thanks to encouragement from my colleagues I try to do more of it. I keep a notebook and a pen on my desk to do quick sketches, wireframes, or write down ideas.
- Photoshop. Photoshop went out of style a while back, and a lot of folks moved on to other, newer tools, or started designing exclusively in the browser. I never had any serious grievances with Photoshop though, so it’s still my go-to software for web design work. However I don’t worry about making my designs perfect, and I’m mindful of not spending too much time in Photoshop. These days I’m using it mostly for low-fidelity mock ups.
- Web Browser. As soon as I have fleshed out the crux of my design idea, I move on to the browser. Polishing my designs in the browser is the fastest way to explore different colour schemes and typography variants, and see them applied across the whole site.
- Peer feedback. On our team we’re encouraged to share our designs as early as possible to gather feedback. We do this by posting on our internal team blog where anyone is welcome to comment and offer ideas.
Deliver
- Starter theme. Underscores (aka _s) is our go-to starter WordPress theme. Once my design is in a good place, I generate a new theme on _s website and start coding.
- XAMPP. XAMPP is a software package to create a local development environment. These days there are many newer alternatives, so XAMPP feels a bit old-school, but it fits my needs nicely without unnecessary overhead.
- Sublime Text 2. This is my primary code editor. I like how simple and distraction-free it is, while being extremely extendable at the same time.
- Dash. Dash is a handy app that gives me easy access to developer documentation, without searching the web every single time. You can load multiple documentation sets into Dash and conduct searches within selected set, or all of them at once. I quite like that Dash can be used offline too.
- iTerm2. iTerm 2 is a terminal emulator for macOS that offers a few upgrades compared to the built in terminal app. The ability to split the window into panes, paste history, and it’s customization options are my favourite.
- Mobile devices. Designing for mobile first is key, and so is testing on actual mobile devices. Since we’re a distributed company, we don’t have access to a device lab. Instead we relay on personal devices and supplement with browserstack.com – a web-based service with access to real mobile and desktop browsers.
Listen
- Internal testing. Each of our themes goes through a round of internal testing, where one or more of our teammates does the design and code review, and runs through various edge cases to flush out as many bugs as possible. This happens on our internal team blog.
- User Testing. So far usertesting.com was our tool of choice for user-testing themes, but we’re re-evaluating that approach. Before our most recent theme launch we set up a screen-sharing session with selected customers using Google Hangouts and conducted guided interviews, which gave us better insights.
- Customer feedback. Once the theme is launched we start getting customer feedback through various channels: forum threads, Zendesk tickets, live chats, and comments under the theme announcement post. It’s important to focus not only on finding and fixing bugs with the product, but looking deeper, analyzing, and drawing conclusions that can inform our future themes.
Follow muriel.blog to stay updated on our efforts building a design language at Automattic.
Automattic Design 