[STRESS TESTING SERIES] Break it before you make it. 3 ways to test your UI design before coding it

This article is part of the Stress Testing series of our UFOs UI/UX Framework. The framework is a tool we created based on our 10+ years of experience in building complex software and thousands of hours of design meetings and feedback. Developers, designers and entrepreneurs can use this framework to gain a better grasp of the UI/UX process and build awesome apps as a result. To learn more about the UOFs UI/UX Framework and each framework component, please go here.

This article is part of the “s” from UFOs, the framework component that talks about how to ask for and get useful feedback on your designs from stakeholders, including your end users.
 

People usually think of testing as something which happens after the app is coded. But testing your UI design before implementing it can save a lot of development time. And we're not talking just about getting the look & feel right.

In fact, it can cost you 10 times more to fix something later in development than early in the design phase. Below are the three key elements you'll want to get feedback on once you have your first design drafts. And the three key people to ask.

 

Stakeholders. Testing design alignment with business objectives

Stakeholder feedback interviews are often overlooked as a testing method, but they're a great way to get feedback from people who really know the business. Stakeholders are your design and development partners and reaching consensus is essential for the success of the project.
 

Getting feedback from your stakeholders can help answer questions such as:

• How could the current design potentially impact business results?
• Are there any requirements left unaddressed by the current design?
• Are there any limitations or restrictions we were unaware of when designing the screens?
• If it's an MVP, have we reached an agreement on the first iteration - number of features and their extent  

In order to get healthy feedback from your stakeholders, make sure to:

• Set the context for your designs - where are you at with the project, what features are you presenting and user types.

• Clearly state the type of feedback you are looking for. This prevents stakeholders from giving you feedback which is not appropriate to the current stage the project is in, i.e. focusing on the fine touches when you are still defining core features.

• Ask stakeholders questions as you are presenting and walk them through your thought-process. This will encourage them to think about the design as well.
   

End users. Testing design usability

Think of prototyping as usability testing before end users can actually test your app. The goal is for users to interact with the design (literally) before a single line of code is written.
 

Most design tools such as Sketch, Figma or Adobe XD allow you to turn static pages into interactive prototypes by specifying triggers (on click, on hover etc.) and relations between screens. This way, users can select things from dropdowns, navigate through menus, click buttons and load new screens. Because it mimics the real thing, you can get early feedback and identify any key issues in navigation and functionality before committing to the final solution.

 

However, running tests on interactive prototypes requires a slightly different approach than testing coded software. These are some of the things to keep in mind when testing interactive prototypes:

• prototypes, no matter how high the fidelity, are never going to be as comprehensive as the coded app. That's why the presence of a moderator is crucial to answer users' questions about what you want them to do or how.

• don't forget to account for relevant limitations. A “lorem ipsum” placeholder text or a rough colour scheme may make some elements less intuitive or interfere with some users' navigation abilities. Take that into consideration when evaluating the overall success of your designs.
  
   

Developers. Testing design ease of implementation

You don't have to wait for the handoff in order to show your design to developers. Developer feedback meetings can help identify those parts that are trickier to code, if there are any good alternatives and if your screens follow the required design patterns (e.g. when using a certain UI library life Vuetify).
 

In fact, gathering feedback from developers on your design before it gets implemented can:

• uncover more straightforward solutions to technically challenging designs
• give you a good sense of the timeline and development effort needed to code the designs
• close any existing gaps between teams and make the handoff easier when the time comes
• leverage any unexpected issues that could be more time-consuming than anticipated  

Testing your designs and getting feedback early is crucial in making sure you`re building the right thing at the right time. And it can save a lot of development time and costs. Getting feedback early in the design process from key people such as stakeholders, end users and developers can drive the project forward with fewer hurdles down the line.