Why Every Developer Should Understand User-centered Design

As a developer, there are few things more rewarding than bringing a new product to life — especially when users respond to it enthusiastically. You spend a great deal of time crafting its functionality, ensuring it responds quickly to user requests, and making sure your code doesn’t throw any errors. When it’s done, receiving positive feedback is a reminder that it was all worth it.

But what happens when users don’t like or understand your product? It can feel defeating. The good news is that there are methods you can implement to be sure your products are consistently amazing.

Design vs. Artistry

Before delving in, it’s important to note that you do not need to be a “designer” in order to design a great product. While it’s true that design is often associated with artistry, keep in mind that artistry is subjective. Product design, on the other hand, is all about problem solving. Sure, artistry can live within a product’s brand or style, but design should be a shared skill between a designer and developer.

Users Are Everything

Design must revolve around a continual conversation with users. Too often I hear from people who are already knee-deep into product design but have yet to determine their target audience. They’ve never spoken with assumed users or asked them to interact with their designs.

I know it can be uncomfortable to share something incomplete, but the sooner you start showing your product to real people, the sooner you can gauge their wants and needs. After all, you’re building an [insert awesome product concept] for them, right? It should help them solve a problem, complete a task, or be entertained. Getting a fresh set of eyes on a product you’ve seen all day, every day (and know inside and out), can help you determine whether or not it will live up to its full potential.

Here are some basic steps you should take when you begin exploring user-centered design.

Step 1: Comparative Assessment

Try kicking things off with a little comparative assessment. Make a short list of products similar to what you’re creating, but keep it limited to no more than five. Now find some people who use these products. You can generally find them through social networking sites, user profiles on the product, or word of mouth. You will typically want to limit the number of users to five to eight per product. Offering fair compensation for their time and keeping questions focused can help ensure people will be willing to participate. Ask basic questions, such as: What do you like and dislike about the product? What features do you find frustrating? What features would you like to add?

Through these conversations, you can learn more about potential users’ needs while also exploring areas that your competition may be overlooking. This can also influence what you focus on while evaluating these products yourself. The main areas of focus are generally content, features, continuity, flow, strengths, weaknesses, and opportunities.

It’s a good practice to keep this information as raw data in a Google spreadsheet. In one tab, create a column for each question asked, plus a row for each person’s name and a row for the corresponding product. In the second tab, create a column for each area you want to focus on based on the user research, plus a row for each product you need to assess. Once the data has been generated, you can create a summary of the findings and potential features you may want to explore.

Not only will this provide a solid understanding of opportunity in the marketplace, but it can also serve as a first step in identifying and understanding your potential user base.

Step 2: Paper Prototypes

Next, take what you’ve learned about your potential user base and work with similar users in paper prototyping sessions. These prototypes should be low-fidelity, and the sessions should feel experimental. By avoiding pixel-perfect designs, you can help the testers feel more comfortable and willing to contribute — this will also provide less pressure to validate a high-res mockup.

The purpose of this exercise is to understand not only what the user may want, but also what they don’t want. Having a streamlined product without unnecessary features is important to your product’s success. It’s important to remember that this product is for them, not you, and you’ll want it to feel as natural and easy to use as possible. This is one of the most difficult things to achieve in a product and could be the difference between a successful product and a lesson learned.

Step 3: Wireframe Prototypes

At this point, you’ve learned about your potential users’ wants and needs, and you can create wireframe prototypes based on their feedback. There are many great prototyping tools that serve specific needs, but for a non-designer I would suggest using Sketch and InVision, both of which are easy to learn and use. (If you want to learn the basics of Sketch, I suggest checking out LevelUpTuts, a free tutorial series on YouTube; and for InVision, this video will get you up to speed in no time.)

When testing these wireframes with users, ask simple questions like: What is this? What stands out to you? What do you like about it? Is it trustworthy? You’ll also want to ask testers to complete simple tasks. For example: “Create an account.” Then, “Find a flight to Bozeman, Montana.”

Remember that when creating wireframes, you’ll want to focus on microcopy, content, and iconography. Explore different ways to flow through a feature to see what works best. The goal is to learn whether the user actually comprehends the requested task.

By the end of this round of testing, you should have a clear understanding of your users’ goals, and you should be confident that they know how to interact with your product’s features.

Step 4: Staging

To prepare for the final round of testing, you’ll want to begin building out your features in an interactive staging environment. Although this may seem like an unnecessary step, it will allow you to test important product aspects like interaction design, overall delight, and the effect of the brand on the product.

This is also a great way to start building out atoms, molecules, and organisms to define your Atomic Design structure as well as start building up your style guide docs (SDD). As you design, build, and test more features, your code base will mature and you’ll be building fewer features from scratch.

This final step can also help you choose whether to pivot on your product concept or stay the course — because you’re not building in a vacuum. You are validating your decisions with real people every step of the way, and you can feel confident as you build. (This process can also save you a ton of time and money.)

Dig Deeper

We’ve just scratched the surface of user-centered design here. There’s much more to learn about user interface design and user experience design, but hopefully this provides a great starting point for both. I recently created a course for Code School, titled The Elements of Web Design. This course was written for developers who want to build a deeper understanding of human-centered design and user experience. As you follow along with the course, you’ll learn about creating personas to identify potential users, establishing scalable information architecture, and more.

Finally, I’d like to thank Ali Datko for her help with editing this article. She’s a great writer and a great friend.