Better Frontend Dev

5 Practical Ways to Bring UX into Your Development Workflow (Without a UX Designer)

By Ireneusz Budzowski

Even if your team doesn’t have a dedicated UX designer, you can still integrate UX principles into your development workflow with these practical tips.

When you’re a developer without a dedicated UX designer, it can feel like UX is out of reach. But here’s the good news: you don’t need a full-fledged UX team to make your products more user-friendly. With the right tools and mindset, you can easily incorporate UX principles into your workflow and make a big impact on the final product.

Let’s dive into 5 practical steps you can take to improve UX, all without needing a dedicated designer!

1. Start with What’s Already Out There: Use Existing Patterns

Before diving into design work, take a look at what's already working. If your team doesn’t have a formal design system, that’s okay! You can still rely on existing patterns to help you keep things consistent and user-friendly.

Here’s how:

  • Leverage well-known design systems like Google’s Material Design or Apple’s Human Interface Guidelines. These systems provide pre-built patterns that are widely used and easy to implement.
  • Check your company’s previous work: Even if there’s no official design system, there’s probably a history of interfaces in your company. Build on those to keep things consistent.

Pro Tip: Consistency is your friend. Sticking to familiar patterns not only saves time but also creates a smoother experience for users!

2. Map Out User Flows with Figma

Once you have a good sense of the design patterns you want to follow, it's time to map out how users will interact with your product. This doesn’t require a fancy UX background—just a little empathy and a tool like Figma.

Steps:

  1. Use Figma to create simple wireframes. These don’t need to be perfect—they’re just to visualize the flow.
  2. Add annotations in Figma to explain each step of the process. It’s like leaving notes for your future self or anyone else involved in the project.
  3. Use screenshots from existing products or websites to highlight interactions you want to mimic. This is especially helpful for communicating ideas with stakeholders.

The key here is to make sure the flow makes sense from a user perspective. Think: Is it obvious what to do next? Are essential actions easy to find?

3. Collaborate and Gather Feedback in Confluence

Once your wireframes and user flows are mapped out, it’s time to bring the rest of the team in. Confluence is a great tool for this. It helps you document everything and collect feedback in one place.

Here’s how to use Confluence to collaborate:

  • Embed your Figma designs into a Confluence page so that everyone on your team can view them.
  • Add clear descriptions and explanations of the user flow and key interactions. Make it easy for stakeholders to follow along, even if they aren’t designers.
  • Use comments: Encourage your team and stakeholders to leave feedback directly in Confluence. This makes it easy to track changes and ideas in one place.

By using Figma and Confluence together, you’re setting up a clear process that makes it easy for everyone to stay aligned, even if they aren’t hands-on with the design tools.

4. Iterate Quickly with Early Feedback

One of the best things about using tools like Figma is how fast you can iterate. Don’t wait until you’ve built everything to get feedback—get input early and often from both your team and stakeholders.

Quick tips:

  • Share your Figma mockups early and get input before you start coding.
  • Use the feedback you gather in Confluence to quickly adjust the mockups. This way, you can ensure the design aligns with the business goals before any serious development work begins.
  • If possible, show the design to users or potential users. Even informal feedback from colleagues can help you catch usability issues early.

This feedback loop will save you from reworking code later, which is both time-consuming and frustrating. Quick mockup adjustments in Figma are much faster than a full development rework!

5. Use UX Decision Records to Build a Knowledge Base

As you go through this process, you’ll be making a lot of decisions about how things should work and look. Don’t let those valuable decisions get lost! Creating UX Decision Records (UXDRs) is a simple way to keep track of important design choices.

What to include in a UXDR:

  • The Problem: Describe the issue or need that led to the UX decision.
  • The Solution: Detail the new flow, pattern, or design that was chosen.
  • Feedback & Approvals: Capture feedback from stakeholders and document who approved the design.
  • Guidelines for Future Use: If this is a reusable pattern (like how to handle bulk actions), make sure to include instructions for applying it in future work.

Keeping these decision records organized in Confluence or another knowledge base will make future projects easier. You won’t have to reinvent the wheel every time a similar UX issue arises.

Wrapping It Up

Bringing UX into your web development process doesn’t need to be complicated or require a dedicated UX designer. By leveraging existing patterns, mapping out user flows in Figma, collaborating in Confluence, and using feedback loops, you can create user-friendly products while staying aligned with business needs.

The key takeaway? Iterate quickly and communicate clearly. By involving stakeholders early and documenting your decisions, you’ll avoid last-minute changes and rework, all while creating a smoother experience for users.


Feel free to take these tips and start making UX improvements today, no matter the size of your team or company. Happy designing!

#4Devs, by devs