DIY UX: Tips and Tools

There are numerous tools and resources that can help you incorporate superior UX design elements into your product – tools that require no expertise and are mostly free or affordable.

Wireframing

A wireframe is a blueprint of your design and aids in structuring your interface and information architecture.

An example of a wireframe of a landing page’s hero section

Recommended wireframing tools:

  • A pen and paper. Yep, getting those initial ideas out quickly to communicate them is the most important thing, even if they’re rough to begin with.
  • Balsamiq. An easy online tool for wireframing a design quickly.
  • Mockflow. Another wireframing tool, like an intermediate step between Balsamiq and Figma.

A lot of people skip the wireframing step, but it can be an invaluable method of rapidly generating different ideas. Just the process of forcing yourself to consider alternatives can prompt you to think of solutions you’d never considered before.

Prototyping in high-fidelity

Once you’re satisfied with a general design structure, you can move on to prototyping your design in high-fidelity.

Recommended hi-fi design and prototyping tools:

  • Figma. The industry standard for interface design which has great prototyping options. Additionally, a prototype in Figma can be imported into a number of usability testing tools. More on that later.
  • Protopie. An advanced tool for prototyping interactive interfaces for all different contexts. This tool is a bit more in-depth, but supports a lot more variety, for example if you’re designing a product for an automotive UI, or you want to prototype with game controller support as an input.
  • Proto.io. A lighter-touch option which provides a large selection of pre-built elements for delivering quick, interactive prototypes, largely for desktop and mobile interfaces.

Testing your prototype

Once you have a working prototype, you should test it with some of your potential users. Usability testing can provide invaluable insights into how they’d interact with your product. Recommended user testing tools:

  • UserTesting. A platform that can support you through audience targeting, carrying out usability sessions and analysing the results.
  • UsabilityHub and Maze. These platforms let you import your designs, prototypes and questionnaires and complete user testing on them remotely. They’re easy to use, and the results are presented in a way that’s simple to understand. They also both support importing of Figma prototypes, so if you built your initial prototype in Figma all you have to do is drop a link in one of these platforms for it to be ready to test.
  • Any video call service (Google Meets, Zoom etc.). If you want to do in-person usability tests, you could send a prototype link to a user and watch them interact with it on a call. This can be useful for seeing their initial reactions and understanding their thought processes.

The key to effective UX design lies in understanding user needs, creating samples to achieve this, testing, and iterating based on user feedback.

As an indie creator, this process not only makes your product more refined but also creates a relationship between you and your users.

They’ll feel more involved in the creation of your product - and therefore might be more likely to try it out once it’s ready.

Actionable Steps

  • Pick out the two most relevant tools recommended and watch a tutorial on how they’re used.
  • Plan your first asynchronous user research session with UsabilityHub or Maze.
  • Share invites to your user research with your network.