The Art of Validating Quickly

Alex White 🐻 — Sun, 19 Jan 2020 19:36:05 +0000

The first step is to build something for your users to interact with. To do that, you could take the time to code an initial version of the product, or you could skip the code and build a prototype with other tools.

Code or Not?

If you come from a development background, your first thought might be to fire up VS Code and start hacking away. But wait, there might be a faster way to get feedback!

High-Fidelity Prototypes

When conducting evaluative research to determine if your product meets users needs, you don’t necessarily need a functional product. In fact, teams will often use what is essentially an interactive PowerPoint to test designs and UX concepts. This can be done with a lot of different tools, such as Figma, Sketch, Principle and Adobe XD.

These tools allow you to create hotspots in your design that transition to another page when clicked. This gives the user the general idea of how your product will operate, and can uncover usability issues. Typically these prototypes don’t allow complex interactions (such as data entry or state management), but if needed a tool like Axure can provide more complex prototyping.

Now of course this method does rely on you designing your screens in the prototyping software of choice. Although it’s best to present a user with high fidelity designs, low fidelity designs can still uncover usability issues in the flow of your interface.

No-Code Prototypes

If you want to provide your users with a closer representation of the final product, you can consider using “no-code” tools to quickly develop your product. These tools allow you to create feature rich, interactive web applications by abstracting away the logic in a user-friendly UI.

You can use tools like Zapier and Airtable to create automations and store data. Bubble can be leveraged to create a complex web application, whereas Carrd and Webflow are great for responsive landing pages. There’s been a large community that has developed around these tools in the past year, so you’re sure to find numerous resources for getting started.

Mixing No-Code and Code

If you’re product requires more flexibility than no-code tools offer, a hybrid code and no-code solution can still save you a lot of time By integrating no-code tools in your codebase, you can save yourself from having to build everything from the ground up.

For example, instead of creating an entire database server, you could leverage the Airtable API to drive your database from a spreadsheet (APIs also exist for Google Sheets). Need to collect payment from your users? Consider a Typeform survey with Stripe integration. You could even use Zapier to trigger an API endpoint after a Typeform transaction succeeds.

The Faster You Get Something Out, The Faster You Can Fail (and try again!)

It’s okay to fail, and you probably will at first. You can do all the market-fit research, personas and journey maps in the world, but your users will still uncover usability issues that you overlooked. That’s why it’s better to fail early. If you go dark for a year and develop your product only to discover a fundamental issue, you’ll be out a lot of time and money, But if you instead create a prototype in a week that uncovers the same issue, it’s much easier (and less demoralizing) to itterate.

Validating Your Prototype

Once you have a prototype, you need a way to gather user feedback. In UX we call this evaluative research, and one of the most common methods is the usability test.

Testing Usability

A usability test is used to determine the "usability" (as the name implies) of a product through a series of moderator-led tasks. A moderator presents a user with a set of tasks that are intended to represent typical workflows in the product. As the user completes each task, the moderator engages the user to uncover the feelings, frustrations and desires they are experincing.

In a usability test, it’s important that the user closely represents the target user for the product. If you’re making changes to an existing product, try recruiting some of your customers to participate. Not only will you get a better sense of your prototype’s usability, you’ll make your customers feel like their voice is being heard!

What Comes Next?

Once you’ve gathered enough data from your usability studies, you will probably begin to notice some trends. Maybe there’s a usability issue in your prototype, or perhaps you forgot to account for a specific use case. Either way, it’s important to create a report identifying these issues while also suggesting how to remedy them.

Once you’re ready, begin iterating on your prototype based on the suggested remedies you recorded and repeat the process again!

The Importance of Full-Stack UX

Alex White 🐻 — Sat, 19 Oct 2019 19:30:15 +0000

Interested in Full-Stack UX and planning to attend CodeMash in January? Join me for my Pre-Compiler!

What is Full-Stack UX?

As a frontend developer, its hard to avoid the necessity of knowing how backend systems work. Heck, you'll probably even be required to gasp write backend code on occasion. This is because frontend and backend developers often work hand in hand, and collaboration is fundamental to getting work done. So then why do we have such a strong separation between frontend development and the other parts of UX, such as design and research? Researchers, developers and designers often work together, but we rarely expect a developer to know anything about design or research. This is where full-stack UX comes in.

A full-stack UX developer isn't someone that can completely replace a designer or researcher, just as a backend developer can't completely replace a frontend developer. Sure, they could both do the work, but a backend developer might throw all your styles into a single site.css file and call it a day. The purpose of full-stack UX is being able to follow along with the work a designer/researcher does, while helping to sell the importance of UX. A full-stack UX developer is also able to occasionally help out with prototyping or usability studies if a designer or researcher is not available.

So Why Is It Important?

Have you ever worked on a feature and had the feeling that it wasn't something that the end users would actually want? Or maybe it was a feature you saw value in, but you felt the approach missed the mark. A full-stack UX developer is someone that has the tools and mindset to raise these concerns and propose a method to validate a feature or implementation approach.

For example, it's easy for product owners to get caught up in the wants of customers, especially for newer products. This results in an endless backlog where every item is "priority". Using the power of UX, you could raise the question "what do our customers really want, and where can we focus our efforts to make the biggest impact?".

Once you've raised the question of priority, your next step would be to recommend bringing on a researcher to answer the question. If a dedicated researcher is unavailable, you could fully flex your full-stack UX abilities by conducting research yourself. A good starting point would be talking to customers, observing how they use the product and identifying where the product falls short. You could then develop a prototype to solve the issues you observed, and validate your solution through usability studies.

Instead of investing a large amount of development resources on a feature that customers might want, you've invested a small amount of time upfront so you can better steer the direction of the product. This results in less rework and time wasted developing vaporware. As an added bonus, it also show your customers that you value their feedback!

As a full-stack UX developer, you'll also be able to better integrate with your UX colleagues. Imagine if a frontend developer didn't understand the basics of databases, it might be difficult to collaborate with a backend developer in creating APIs and data models. The same holds true for a frontend developer and a designer or researcher. By breaking down the lingo barrier, it's easier to communicate the results of a usability study, or the decisions that went into an onboarding flow.

How Do I Become a Full-Stack UX Developer?

If you're lucky enough to be on a team with designers and researchers, collaborate with them! Sit in on usability studies or ask to "pair design" new features. Surround yourself with UX by browsing Dribbble and following UX accounts on Twitter. Invest some time in learning the tools of the trade like Figma, Sketch and Balsamiq. Try prototyping your own versions of your favorite websites!

Design and research are not something you'll master overnight, but that's not the goal. Be passionate, absorb as much as you can, and keep UX in mind the next time your client asks for a huge feature that the "customers needed yesterday!".

DEV Community: Alex White 🐻