Ethnography is inspiration

A couple of years ago I attended a really fun conference in Whistler, BC about the impact of technology on business and culture. One of the talks really resonated with me and is still pretty fresh in my mind even though I forget who delivered it. The speaker shared how people use ethnographic research to learn, validate, and test but what he figured out was that it could also be used to find inspiration too.

He kept repeating the phrase “ethnography is inspiration” throughout his talk, and that’s probably why I still remember it today, but then he went on to describe some examples of how he came up with new ideas while talking to customers and conducting user studies. I have since experienced this for myself a couple times, which is maybe another reason why I remember the talk, and wanted to share one of my most recent moments of inspiration.

People use ethnographic research to learn, validate, and test but it could also be used to find inspiration too.

I was in the process of doing what’s called a ”support rotation” for my job at Automattic. It’s something we do every year where we take a week to join our support organization to connect with our customers by email, live chat, video, and even in person. A couple days into my rotation, I joined a video call and had one of those very special moments. We were talking with one of our customers as she walked us through some of the challenges she was running into with our newly launched editor called Gutenberg.

Seeing her walk through our support documentation, and then working in the product, sparked something that got me thinking about different ways of approaching a problem our team has been wrestling with. I immediately jotted down some notes, sketched up some diagrams, and shared my thoughts. It also brought up some interesting questions that I don’t think anyone is thinking about on our end.

The inspiration didn’t end there though, through my rotation I also got to observe the way my Happiness colleagues work. Some of it was first hand by using the tools and resources they use. Some of it was through conversations I had with them before and after some of our calls. These encounters lead me to identify a handful of process and documentation improvements that would have never otherwise been brought up.

Looking back, I feel really lucky that I had the opportunity to participate in this support rotation. For one, it was a nice break from the everyday hustle and bustle but more importantly it felt really good connecting with our customers, learning more about our product, and being inspired though the practice of observing other people work.

Remember email? It’s still a thing

Earlier this year, I was one of the many designers at our company that participated in a an in-depth study about small business owners to determine how we might build our products to serve them better. We kicked things off with a segmentation study that helped us break down and prioritize the vast landscape of small businesses into more discernible groups. This was followed by an intense qualitative study where we spoke with a number of small business owners from across the United States. Our team wrapped things up by meeting in San Diego to comb through the data we collected and synthesized it into actionable insights for the company.

Looking back at the findings, I am grateful for the opportunity of taking part in a study like this because it reminded me, among other things, that we are not the people we design for. A lot of tech folks I know, myself included, have an aversion to email and as a result feel really annoyed when they get emails from companies. The business owners we spoke to on the other hand felt very differently — they love email!

On the go, or in the office, they check their mail a million times a day and use it stay connected with their clients. They also use it to learn new skills, stay up to date with industry news, and keep in the know about networking events and conferences. Hearing business owners talk about email that way really stuck with me really left an impression on me and changed the way I think about it. It is a tried and tested communication tool that still holds value for lots of people out there and should therefore be considered as an integral part of any complete experience.

Starting with curiosity to make the difference

Before getting into my design career almost 15 years ago, I was an art student for an even longer time. At school, I was trained to be curious and produce creative work. We were taught how to explore the unknown, try things that hadn’t been done before, and seek out different approaches. Those skills carried over well for me when I entered the design world and worked for various agencies producing websites, digital products, and print pieces for their clients. Our first step was always to gather information about our clients and their needs. Then it was up to me, and my colleagues, to explore different ways of delivering quality work that represented them well.

A couple years passed before I started working at product companies, then a couple more years passed until today where things are very different thanks to Steve Jobs. He showed us how thinking different could change the world and having a deep understanding of your customers can lead to innovative products. I’m seeing that impact right at the company I work Automattic as we undergo a transformative process into becoming a design led company.

A couple of months ago, I participated in a foundational research study in which our goal was to better understand one of our target customers: the small business owner. We conducted a ton of interviews with people from all walks of life and visited them in their homes and offices via video chat. Throughout the interviews we recorded our sessions, took notes, and added our takeaways as stickies onto a digital Mural board.

The amount of data we collected was intimidating at first but then we found different ways of synthesizing it into actionable insights. We’re just getting back into a regular groove of producing new work and thanks to being inquisitive and doing our research, I can already tell the difference in the type of work we’re coming up with. The future for looks very bright.

OK Google: What’s the big deal with voice interfaces?

I am now a proud owner of a Google Mini thanks to my wonderful wife. She bought it as a gift for me on Fathers day which came as a surprise because it wasn’t something I was expecting. I actually have to admit that I felt a little bad when I first opened the gift because I didn’t really think I needed it. That was short lived though because it didn’t take very long for the little gadget to warm up to me.

Getting setup


The excitement started the second I opened the box. Just like a number of my other recent Google purchases, I was very impressed with the packaging and how they fit everything into such a tiny box. I remember being taken by it’s simplicity the first time I held the hockey puck sized device in my hand. It weighed just enough to feel substantial which left me with a good impression of its quality.

Getting started was quick and simple. All I had to do was plug the device in and open the Google Home app on my phone. The setup process was fun and only took a matter of seconds because I already had the Google Assistant setup on my phone. That’s all it took for us to get ready to start making voice commands.

Ready, set, go!

At first, I didn’t really know what to do with my Google Mini other than playing music but then I started getting these really handy emails that showed me all the ways I could use it. I was happy to learn that I could connect my Chromecast and Nest devices which means I can now control my thermostat and Netflix with my voice. The emails also highlighted some fun little games I shared with my five and three year old kids which also got them using the device. They are now comfortable using it on their own and can now turn on their own music or shows without asking me to do it for them.

Before getting this gift, I remember feeling silly speaking commands into my phone but with the Google Mini it’s different (except for the “Ok Google” part, I still feel lame saying that). Maybe it’s because the device was created to be spoken to or maybe it’s the way the product looks but I think some of it also has to do with how it responds to you in a conversational tone. I never feel like I’m speaking to a machine and it understands almost every thing I have said to it so far. I also have to say I really love seeing its lights turn on when I call out to it.

Look ma’, no hands

Not long after I got my Google Mini, I was out with some friends and I wanted to play someone a song on my phone. The second I reached for my phone I noticed how incredibly efficient a voice interfaces can be. Picking up my phone, unlocking it, opening my music app, typing in a search, and then scrolling to find the right result all seemed like such a waste of time. With my Google Mini, all I have to do is tell it to play the song I know I want to hear and boom! it’s done.

The same goes for playing that show I know I want to watch on Netflix, finding out what the weather is like outside, changing the temperature on my thermostat, seeing what time my mother-in-law’s flight is coming in, and so much more. When I know I want to do something, I now know the easiest and quickest way to do it is with a voice command.

Unboxing Gutenberg for WordPress

There has been a lot of excitement building in the WordPress community about a plugin called Gutenberg. The plugin offers a new publishing experience that promises to transform the way people create content and build websites. With the first official release around the corner, a challenge was issued for all the designers at Automattic to try it out and share their thoughts. As part of the challenge, we were asked to replicate any post featured on the Editor’s Picks of the Discover Blog with Gutenberg. I picked Evergreen Ideas and Rethinking the Meaning of Content by Maria Popova because I liked its featured image.

First impressions

Eager to get started, I installed the plugin on one of my existing sites thanks to the WordPress mobile app. The Gutenberg editor wasn’t available in the app yet so I had to switch over to the browser on my phone to create my first post. Having worked with lots of different content management systems, I immediately noticed how simple Gutenberg looked. Most other editors bombard you  with palettes, buttons, or fields when you open them up. Gutenberg on the other hand greets you with a friendly prompt to “Write your story”.


Poking around

I typed two paragraphs and then wanted to add an image but it wasn’t immediately clear to me how to do that. Nothing changed in the interface after I started typing so I then tried to press the big plus button at the top left of the screen but that didn’t do anything either. My next guess was to tap one of the paragraphs and when I did, a new set of controls appeared. In addition to some text formatting options there were also buttons to move, edit, delete, or add new content.

After I pressed the add button, a modal filled the screen and presented me with a group of suggested blocks. Some of the choices included a heading, paragraph, image, quote, and gallery. I tapped the image and a new block was added to my editor with options to add an image from the media gallery or upload a new one  The process felt seamless and I was happy to see that I could upload my own image because it wasn’t very long ago that you couldn’t do that from a browser on a phone.

The image pulsed until it was fully loaded and it offered me a space to write a caption. I was curious to see if I could add some “alt” text and reached over for the settings button but accidentally pressed the delete button. I looked around to see if there was a way to undo what I just did but couldn’t find anything so I took it as a sign to get started on my challenge and created a new post.

Completing the challenge

I visited my post on the Discover blog and copied and pasted it right into Gutenberg. To my surprise everything made it over just like in the original post. I checked the preview and confirmed that all the images and text formatting remained intact — it was like magic. With the post looking good on my phone, I wanted to see what it looked on a bigger screen and switched over to my computer.

Looking at the two posts side by side, I noticed some minor formatting discrepancies that needed to be fixed up so I hopped into Gutenberg on my computer. I needed to center align the headers but couldn’t find any text alignment options in the formatting options for the Header Block. After a little poking around I eventually found what I needed in the side bar settings and centered my headings. With the titles centered, I had completed my challenge and began writing about it in a new post.


Writing this post

The block concept in Gutenberg took some getting used to when I began actually writing the content for this post. I have been typing on computers for most of my life but never really learned how to type “properly”. Over the years, I have developed all kinds of weird and quirky habits. In most editors, these habits aren’t an issue because all the text fits into a single container but with these blocks, I ran into some hiccups because they’re all separate from each other.

The first one I encountered was when I tried to use the “command + A” keyboard shortcut. Rather than selecting all the text in the post, it only selected the paragraph I was working on. The other issue popped up when I tried to select text from two paragraphs. Starting with with my keyboard, I wanted to select the last sentence from one paragraph along with the first sentence of the next but ended up selecting both paragraphs the instant I transversed out of the first paragraph. I then tried with my mouse which yielded the same results. With a little extra effort I did what I needed to do so it didn’t bother me too much.

And that’s a wrap

Considering Gutenberg is still under development, my experience using it for the first time got me very excited for the future of WordPress. The long term vision for Gutenberg is for it to become more than just an editor. The Gutenberg team is already exploring different ways of using it to fully power site customization in themes. From what I’ve seen, there’s a lot of potential for it to grow and I can’t wait to see where it goes.

X graphic rising to the next level

Leveling up at customer research

We just wrapped up a week of usability testing for a new design I’ve been working on and thanks to Lynne Polischuik, a new researcher at Automattic, it went off without a hitch. She worked with another colleague, Lilibet Greig, to recruit, screen, and schedule all the participants and even helped me out with my script — all I had to do was show up with my prototype. In a little over a week, we knocked out eight one hour sessions as well as an initial synthesis of the key take aways. Who knew conducting research could be so easy?

The interviews

Our quick recruit yielded some folks that were a bit more advanced than we initially wanted, but that still helped give us insights into our developer and client services audiences. We started our interviews with a set of contextual questions that shed light on the different types of customers we serve, the problems they face, and their preferences — gold for our product and marketing teams!

Then we walked through the prototype which if it were up to me, we would have only tested two screens. Thanks to Lynne we ended up testing the entire sign-up funnel which gave us a ton of insight into the work we’ve been doing over the last year. We walked our participants through the prototype asking them to describe what they were seeing and the actions they would take. I was surprised by how much value we could from such a basic prototype.

Summarizing our findings


After our last interview, we organized our research, documented our findings, and then met to discuss our take aways. The discussion went really smooth thanks to a handy Mural board provided by Lynne. She created it before we started our interviews and asked us to add our insights as they came up. With everybody’s findings all in one place it was easy for us to group people’s insights into similar themes and have a productive conversation about our next steps.

Lynne’s help on this project was invaluable. She showed me how quick and easy it is to do research. I learned more about our sign-up process in this past week than I did all year looking at our data and funnels. It was also validating to see that some of my hunches about the gaps in our sign-up were correct but at the same time I learned my priorities were a little mixed up. These sessions brought more clarity to the problems in our sign-up flow and inspired me to think of different ways of solving them.

Inviting customers to an interview

You’ll often hear that quantitative data tells you what’s going on but if you want to understand why it’s happening then you need to collect qualitative data. I have found this to be true and also believe that a balanced diet of qualitative and quantitative data is the key to a healthy design process.

We recently launched a new feature on and now I’m in the process of understanding how well it’s doing. It’s still early to get excited but we can already see patterns emerge from the quantitative data coming in. On the qualitative side, I started recruiting people for customer interviews this week and it’s going really well thanks to the approach I outlined in this older post. Just as I was about to send out the email to qualified participants, I thought I’d share it here:

Subject:  📣 Tell us about your experience with

Hello, my name is Filippo and I’m a researcher at I’m reaching out to you because you left us your email while trying our new site checklist feature. We’re constantly working on it to make it better and can only do that by talking with people like you.

Can you spare an hour of your time next week to talk about your experiences with so far? You can participate from the comfort of your own home or office and we’ll give you a $50 Amazon gift card to compensate you for your time.

If you’re interested in participating, please book a time that works for you on my Calendly account.

Find a time

Filippo Di Trapani

At the very least, this will make it easier for me to find in the future but I also hope that it’s useful for you should you need to write an email like this. Until next time!

Build, measure, learn for the win

One of the first projects I worked on at Automattic was a small A/B test for the first screen of the sign-up process. As the first screen in our funnel, it served a critical role, but it hadn’t been tested in quite some time. I tweaked the visual design and completely changed the copy for my first attempt at improving conversions on that screen. Setting it up and tracking the results felt really easy compared anything I had done before. I felt empowered and simultaneously discovered how projects work at Automattic.

That first test was a success and was implemented as the default for all our visitors. It remained that way for a little under a year as our priorities shifted to higher impact areas of our funnel. Little bits of feedback trickled in over time that kept me thinking about many possible improvements but it wasn’t until recently that I decided to take action.

The problem

One of the most common complaints I heard about our screen was that the terminology was confusing. We asked people what type of site they wanted and presented them with four options: a blog, a website, a portfolio, and an online store. These were some of the questions that kept coming up: what’s the difference between a website and a blog? can I change my mind later? two of these options sound good, what if I want both?

Our mistake was assuming people understood what to us seemed like simple concepts but for them were actually foreign. This made a lot of sense when I look back at all the polls I ran and conversations I had with our customers over the last year. I learned that our customers are not like us and that the majority of people signing up at had little to no experience building sites or using WordPress.

Graphic courtesy John Maeda and Rebrand Cities.

A new hope

Armed with this awareness about our customers, I reworked this screen to simulate a first meeting between a design agency and their client. The screen would ask them a series of questions to understand their needs, and then our tools would build a site that addressed their goals. My biggest concerns with this approach were 1) not scaring people with too many questions so early in the signup flow, and 2) knowing which questions to ask.

I quickly developed high level strategies to tackle both these problems. Designing with a mobile context in mind would ensure that I made it quick and easy for people to answer our questions and using a tool like Hotjar, I could quickly run a series of polls to validate and modify my questions.

Learning our customer’s vocabulary

One of my questions could be answered in a number of ways and therefore required an open text field to collect people’s responses. Of course, typing on a phone sucks, so I wanted to make the field as painless as possible. An autocomplete feature made the most sense as it offered people suggestions while they typed their answer. We could not only save people time from writing out the full word but we would also get cleaner data too. To pull this off, I needed a collection of commonly used terms to power the suggestions.

I created a new poll that included the question as it would appear in my design and quickly noticed the answers weren’t what I expected. Thanks to HotJar I was able to turn off the poll, rephrase the question, and launch the poll again within a matter of minutes — all without writing a single line of code. This time around I was happy with the data coming in and let the poll run until we had enough responses. After a couple days we had a lot of raw data to comb through so I used a spreadsheet and a PHP script to clean it up and help us make sense of it all.


Build, measure, learn

Another question asked people to pick their answer(s) from a handful of choices. I drafted a list of options based on data we had collected in the past and ran them in a poll along with an “other” field that allowed people to type their answer if couldn’t find what they were looking for in my list.

The first iteration of this poll was dominated by responses entered in the “other” field. Some of them were variations of what I had in my list but there were also lots of common responses that were not represented in my list at all. I used this data to update my list and then published another version of the poll. There were some decent improvements in the results but it was still not quite there yet so I rinsed and repeated. This time I got it right because the majority of the responses were selected from my list rather than entered into the “other” field. In addition to that, most of the people that did fill out the “other” field either flipped me the bird or just said hi.

Progress on multiple fronts

I wasted no time while these polls were running and started building the form right after the design was sketched out. The code was built in small chunks which made it easy to review and kept the momentum of the project going with visible progress. As the data came in, I added it to my work in progress until I had enough of a prototype to run some usability tests. The tests revealed some really minor tweaks that needed to happen but mostly confirmed that we were on the right path. Then, shortly after I completed my last poll, I had everything I needed to run my A/B test at scale and see how this new design stacked up against the old one.

The results

It didn’t take long for us to reach statistical significance but I still let the test run for at least seven days to account for any seasonality during the week. The results indicated that this design profoundly influenced our business metrics. Like it says in NEA’s Future of Design report:

Ultimately everything a design team does has consequences (both good and bad) for a business. The more you know about the business and its goals/intentions, the better a design team is positioned to deliver good experiences and results for the business.

— Tim Riley: Senior Director of Digital Experience at Warby Parker

This post also appeared on Automattic’s Design blog.

Driving more traffic to my blog

I have been running my blog for a little over a year now and after getting over the fear of writing content, the next biggest challenge I ran into was driving traffic to it. It seems I did something right with one of my posts that brings in one or two organic visitors a day but I’m not entirely sure what I did to achieve that. For the rest of my content, I noticed the amount of traffic coming in is equal to the amount of effort I put into promoting it. I wanted to see if there was a more sustainable way of growing traffic for my blog so I reached out to some experts in the field to see what they had to say.

Luca Sartoni

Luca is a Growth Engineer at Automattic, he’s my go-to reference for everything a/b test related and as of now also SEO/SEM. When I asked Luca what I should do to get more traffic to my site he responded with the advice he gives everyone that asks the same question:

It’s all about consistency, differentiation of channels, and concertation.

Consistency: A piece of content should be consistently promoted across all your channels. Images and headlines are important for grabbing attention so make sure to use something that works well everywhere keeping in mind that images still need to be formatted appropriately for each channel. Luca suggests that you can’t go wrong with a title under 120 characters.

Differentiation of channels: For maximum impact, a piece of content should be distributed on all channels. Every channel has a different cost and reach so your overall distribution will be impacted by the amount of money or time you spend on it.

Luca finds that paid channels always out perform organic ones. Although organic channels are free, they end up being more expensive when you look at the time and resources you put into getting it right. It’s is hard to measure your efforts and can take a long time to see the results come through. Alternatively, with paid channels you can buy traffic and optimize your output in real time.

Concertation: Channels are not only interdependent on each other but also complimentary. It’s important to keep in mind how they all play off each other. Social media channels like Facebook also operate as search engines. For this reason, your efforts for picking the best keywords are not only important for search engines but also on social media channels. Another good example is how traffic coming to your site through an organic search can drive traffic to your social channels which would increase your ability to engage with these people.

Luca stresses that focusing on a single channel won’t get you the results you need. You shouldn’t be thinking of search engine optimization OR search engine advertising, it should be search engine optimization AND search engine advertising.

Simon Heaton

Simon is a Growth Marketing Manager at Shopify, we worked together for a couple years on the same team and saw some incredible growth on the Shopify Partners Blog thanks to Simon’s efforts. He believes that search engine optimization is a key contributor to sustainable growth. It can be hard to compete on keywords depending on your subject matter so Simon suggests going with a long-tail approach where you optimize for a bunch of small, more relevant keywords where the aggregate volume has potential to be larger than those whales.

According to long-tail keywords are:

Long-tail keywords are longer and more specific keyword phrases that visitors are more likely to use when they’re closer to a point-of-purchase or when they’re using voice search. They’re a little bit counter-intuitive, at first, but they can be hugely valuable if you know how to use them.

Take this example: if you’re a company that sells classic furniture, the chances are that your pages are never going to appear near the top of an organic search for “furniture” because there’s too much competition (this is particularly true if you’re a smaller company or a startup). But if you specialize in, say, contemporary art-deco furniture, then keywords like “contemporary Art Deco-influenced semi-circle lounge” are going to reliably find those consumers looking for exactly that product.

Managing long-tail keywords is simply a matter of establishing better lines of communication between your business and the customers who are already out there, actively shopping for what you provide.

Obviously, you’re going to draw less traffic with a long-tail keyword than you would with a more common one, but the traffic you do draw will be better: more focused, more committed, and more desirous of your services.

Alex Hosselet

Alex is Digital & Marketing Strategist for United Way Ottawa, we worked together a number of years where Alex was a marketing manager on a product I designed for. I always admired Alex’s passion for connecting with people and measuring results.

Alex’s advice was to make sure you have a good combination of content strategy and search engine optimization. Content strategy is all about making the right content that attracts people. That involves taking the time to understand your audience and developing a plan with clear goals that can be measured. Search engine optimization is a combination of writing, research, and coding best practices.


My biggest take away is there’s no silver bullet to getting more traffic — it’s a lot of hard work. If you want people to visit your site, you need to pay with your time or money. Based on these conversations, here are some of the tactics I’ll employ to increase traffic to my blog:

  • Share content on as many channels as possible,
  • Try paid advertising,
  • Optimize posts for long-tail keywords and SEO best practices, and
  • Improve visibility of my social media channels on my website.

Building better app layouts

I’ve been writing CSS for over ten years and I’m glad to finally see there’s a way to create a fixed navigation that doesn’t feel like a hack. Among other issues, normally you would need to add ghost padding or margins to account for the fixed positioning. Thanks to the adoption of Flexbox that should be a thing of the past.

I’m working on a design for an App-ified PWA version of my blog and wanted to try something different with the navigation. My design has a navigation bar fixed to the bottom of small screens for easy and comfortable access while maintaining a conventional navigation at the top of the screen for large ones. I thought that would be perfect for Flexbox and there’s no better way to see how it feels than to mock it up.

With my trusted CSS Tricks guide at hand I made my way to Codepen and created a prototype to try it out. I used Flexbox to create two panes that take up all the space on the screen. One with a fixed height for the navigation and another big stretchy one for the content. It was easy for me to change the position of the navigation on different screen sizes thanks to Flexbox’s ability to change the direction columns flow.

The code

This is the code I used to make it work:


<div class="navigation">
  ... navigation goes here

<div class="content">
  ... content goes here


html {
  height: 100%

body {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;

@media (max-width: 850px) {
  body {
    flex-direction: column;

.content {
  flex-grow: 1;
  overflow-y: auto;

The prototype

Head on over to Codepen, check it out for yourself, and let me know what you think in the comments below.
View the prototype