Once the requirements for a project are down, it is very tempting to simply dive into coding it all up without designing any of the features beforehand.

After all, it is only the user interface.

In this article we will explore how designing a product from scratch, before a single line of code is written, can make a huge difference.

Summary

• Cheaper to make changes in design than code
• Build something users are looking for
• Shorter development times
• Improved usability

Making Changes in Code vs. Making Changes in Design

Imagine you receive the requirements for a feature that needs to be implemented.

The different work items on the board outline what needs to be done.

So, you start coding away and build out the backend portion and then start to code out a frontend you think will be ideal for this feature.

Once all of this is done, you present your final work to the product team, who then want improvements to be made on the frontend-side.

No problem, we simply need to refactor some parts of it.

After some more testing, the product team find a few more UI-issues that need fixing.

These issues may result in a more complex refactor, meaning you are spending more time working on the UI-elements.

After the work is complete, the product team again need a few tweaks to the UI, some changes result in the UI looking the way it did originally.

What a pain.

After all of that has been done, and the product team finally happy with the result, the users are asked to test the product.

Here we find quite a few and severe usability issues, meaning we need to go back and refactor the frontend some more.

You again make changes, push changes, and test it on some more users, who again find a few more changes that need to be made.

And the cycle repeats itself.

As you can see, there are a lot of developer hours spent on refactoring code.

Making changes in code is way more resource intensive than making an adjustment during the design-phase.

In a design-tool we can simply move elements around and have a new prototype up-and-running within minutes.

Creating design beforehand allows us to quickly prototype an idea, get it to the users, receive feedback, refine the prototype, and test it on some more users.

On the business side of things we can see that this would increase the satisfaction of users and make them more likely to keep using our product.

Build something Users Need

As we saw with the example above, the actual users get to see the product at a very late stage in the development process. At this stage, a lot of assumptions and design decisions have already been made.

These may not necessarily reflect the needs of the users.

We need to involve users at every step of the way and get that invaluable feedback on our design. This way we can ensure that we are building for our users and that the final product or feature is something they will actually use.

People tend to get confused when the team starts to talk about design and think that it only has to do with the how the user-interface is going to look.

The way we design of our products has a lot to do with how it will work for the user and if the user can work with our product.

The user-interface is the gateway through which the user learns to interact with our product. It allows people to harness the power of technology.

By building something the user actually needs, that solves an actual problem they have, you are investing in a loyal fanbase that helps guards against competition.

Shorter Development Times

Designing the product before it gets translated into code means that the important decisions regarding how the product should work and feel are already made.

This means that the development team can focus solely on logic and not be slowed down by design decisions.

Additionally, the design has been tested by real users, ensuring that any usability issues have been ironed out before a single line of code has been written.

This again reduces the overall amount of refactoring the development needs to get done before a product is launched.

It means that resources are being spent more efficiently and features can be pushed more quickly, decreasing the time-to-market.

Improved Usability

I have mentioned usability a few times now, but what exactly do I mean by that?

It generally describes the how easily a user can achieve their goal when using your product.

Core values of usability are:

• Effectiveness: It helps the user achieve their goal
• Efficiency: Users can achieve their goals quickly
• Engagement: The user experience of your product is pleasant
• Error Tolerance: How easily are errors made within the system and how easily can a user recover from them?
• Ease of Learning: How quickly can a new user learn to use your product?

By using a clickable prototype, the product team can ensure that users are able to use the product and achieve their goals efficiently.

This will result in fewer negative experiences while using your product and ensure that the product meets the user's needs.

Happy users will gladly recommend your product to others, turning them into advocates for your brand and product.

Happy users are a great marketing tool.

Conclusion

This may not always be feasible and not ever team has a UX-Designer that can get these tasks done.

But just a bit of designing and feedback, can go a long way in ensuring your designs are meeting the user's needs.

The theme running through all of these is the user. You are building the product for them. You want to give them the best possible experience when using your product. They are the one of the best marketing resources you can employ.

Don't annoy or frustrate them, and they will thank you will trust and loyalty.

Let me know what your experience has been and how design has benefited or harmed the outcome.

Would love to hear from you.