Wireframing 101 for Market Researchers

The shift to online platforms means that researchers are looking for ways to best engage participants digitally. While traditional platforms are still widely used in research, they lack many utilities, such as functionality and interactiveness, that newer digital platforms (apps, websites and gamified surveys) have. 

Over the next four articles, we will talk in-depth about the fundamentals of how you can build a digital platform for research purposes. The articles will cover four areas:

1. Wireframing
2. Interface design basics
3. Copy basics
4. Interactions

What is a wireframe?

Wireframing is how you design a platform’s structure. It’s used to lay out a blueprint for content and functionality while taking into account user needs and user journeys.

How is a wireframe used for researchers?

Wireframes are the first step in the process for researchers designing digital platforms. Wireframes provide a naked layout of a digital platform with no user interface design whatsoever. 

As a result, wireframes are critical for the following reasons:

Planning overall infrastructure for a digital platform

You should ensure that you build a digital platform that covers all research objectives. Similarly to building questionnaires and discussion guides, this should be done with detailed planning. Early-stage planning and structuring create a ‘better research experience’. Therefore, the same logic applies when building a digital research platform.

Address potential problems early 0n

This is to avoid the duration needed on platforms being too long and prevent boredom, participant fatigue and drop out. How often have you created a discussion guide or questionnaire that is clunky or too long? Wireframing helps avoid this issue in a digital context.

Routing multiple avenues efficiently

This creates a better research experience leading to better participant engagement. For example,  a gamified survey’s routing has many paths a user can take. Therefore, planning is needed to predict where the user will go to. By using wireframes, we can develop multiple screens, plan different paths users will take, change the flow quickly and form the platform’s architecture. 

Using wireframes allow you to build an interface structure that helps solve routing questions such as:

• How would the user stop the game?
• How does the user check his points?
• How does the user know how much more to play?

• • How does he come back to the main screen?
  • How does he restart the game?

To meet these needs, wireframes must:

• Show and support the flow of the user’s journey
• Clearly outline the layout and infrastructure
• Easily fit all intended features into the wireframe
• Clearly provide a description of the user interface

Tips for building a wireframe

1. Set Clear Expectations

Wireframing must be goal-related – i.e. what does success look like? Be clear on what your platform’s goal is before you start building a wireframe.

2. Keep it Simple

When we have multiple needs to fulfill or elements to include, wireframing can get confusing. Take the time to establish a hierarchy in your elements. Identify the most important functions within each layout and from there, only focus on one layout option at a time for your wireframe. 

3. Use the Right Tools

You can use to create wireframes using many tools. It’s best to start off using pen and paper so you have a rough understanding of your platform’s flow. Once you’re happy with your pen and paper plan, then transfer your initial wireframe into specialist software such as InvisionApp, UXpin, and Axure. 

4. Don’t Use Color

The goal of wireframing is to build a simple layout that conveys flow and steps in your process. Therefore, the focus should be on the experience you are creating, not visual design. You should focus on aesthetics like color, shapes, and patterns later in your design process. It’s best to think of wireframes as a flow chart of your user’s experience, rather than a visual design solution.

5. Consistency is Key

Wireframes should facilitate an understanding of how an experience starts and where people are going during an experience. It’s crucial to keep things consistent in order to avoid confusion. Keep buttons, menus, instructions and object placement consistent so it makes sense at a glance. Focusing on how to improve the user journey rather than looking for your assets will result in a better wireframe.

6. Use Real Content

Wireframe’s advantage is that you can quickly use actual content to see if it works without worrying about design aesthetics. Content usually comes in different quantities that change the flow of a design. This is the best opportunity to see if everything fits, and rebuild your wireframe it if it doesn’t.

7. Communicate Functionalities and Interactions Statically

Functionalities and interactions for digital platforms come at the prototyping stage. This is more time-intensive than wireframing. The purpose of wireframing is speed and the agility to stop building a concept and build another easily. Interactions can be simply listed rather than animating or making one. 

Next month…

We will be focussing on the interface design basics.

Header Image: Kelly Sikkema, Unsplash