You have a clear picture in your head of a (new) digital product - THE next billion dollar idea? Congratulations! Now you just need to bring it into the world. Simple as that sounds - this is so much more difficult. Before you can start realising it, you need to share your picture with others (believe me: a successful product can never be developed alone in your secret chamber!), refine it and work it out. For that you need something presentable.
In this article we explain how you create a wireframe that will help you get buy-in from your team and speed up discussions with stakeholders.
5 steps to make your wireframe robust
Know your user: For a better understanding it is crucial to gather insights into target audience needs, preferences and behaviours. If you do not yet have any users you can ask, make them up. Imagine your target group and create detailed profiles of as many different fictitious representatives as possible. Use those personas to put every design decision to the test.
Define your goals: Determine the primary objectives of the product or feature and articulate clearly. Double-check whether they really fulfil the needs of your personas. Do not forget to identify the metrics that will be used to measure success during the testing with the wireframe, e.g.
Usability testing results: How well do users understand and navigate the wireframe? Are there any significant usability issues?
Task completion rate: How efficiently can users complete key tasks using the wireframe?
Error rate: How often do users make mistakes or errors while interacting with the wireframe?
User feedback: What feedback do users provide on the wireframe's navigation and overall usability?
Turn your picture into a map: Start with the hierarchy and map out the structure and navigation of the UI. Determine the main sections or categories of your application and, for each top-level page, identify the subpages or child pages that will be nested beneath it. Connect the pages with lines or arrows and decide how users will navigate between the pages. This might involve using a menu bar, breadcrumbs, or a combination of both.
Stake out the wireframes: Now it is time to visualise your ideas. Use pen and paper or a simple digital tool to create rough sketches. Focus on the placement of elements, navigation, and overall structure, NOT on design! Gather feedback from stakeholders and primarily from potential users. Make necessary adjustments.
Get interactive: Use wireframing tools like Figma, Balsamiq, Miro or Sketch to create more sophisticated versions and eventually a click dummy. Once you start first user tests there will definitely be further adjustments. You might even have to kill some of your darlings if usability issues are identified. Keep your head up!
Tips and tricks for sustainable wireframing
Keep it simple: Even a rudimentary design or too much information can be distracting. So avoid cluttering wireframes with unnecessary details. To speed things up, use pre-built components from wireframing libraries.
Focus on functionality: Prioritise core features and interactions. Involve relevant team members to draft the (initial) user flow. Provide different variants to test what keeps the flow going better.
Be consistent: Make sure that you maintain a consistent visual style and adhere to design principles. The more elements you use in several places, the easier it will be for you or the designer to make changes.
Face reality: It is so much easier to gather feedback in your own bubble than to run the risk of receiving an unprotected response. At some point reality will catch up with you anyway. So the sooner you share your product with potential users and really listen to them, the closer you get to success.
Wireframing acts as a bridge between ideas and reality. It enables the genesis of a shared vision for the digital product and ensures a user-centred design. Once you have got over yourself to share your idea with others and invite them to think along with you, you will be rewarded by getting an even better version.
Comments