Article

The Wonders of Wireframing (UX Design's Master Tool)

The information architects and UI designers at 2Plus2 explain why wireframing your employee intranet is a step you can’t afford to skip.

By Cathy Dew

Any UX designer worth their salt is a whiz at wireframes.

Simply speaking, wireframes are two-dimensional blueprint-like illustrations of a design framework and its interface elements. Wireframes are, arguably, the most important preliminary stage of intranet design because they form the basis for what goes where and why.

Your wireframe is the basic skeleton of your intranet’s layout. Wireframes are mock ups that don’t use real user interface elements; so they are, in a sense, faux interactive. Instead of actual UI elements,  they incorporate placeholders like boxes and Greek lettering and lorem ipsum language. But the idea is to get you thinking about usability and how it informs design without forcing a commitment to any specific pathway.

Creating intranet wireframes is like making a piano keyboard out of cardboard. You put the black keys and white keys where you want them, but you are going to have to use your imagination if you want to hear the music.

Wireframes are the gestalt of UI design. They allow you to visualize how content will be spaced, how the site will function, and how users will interact with each function.  Wireframes form the foundation for the whole intranet site’s information architecture.

Needless to say, this is something that your intranet design team just has to excel at.

Benefits of Wireframing

While some companies itching to get their intranets up and running might want to skip this important step, the benefits of wireframing cannot be overemphasized. Wireframing is:

  • Cost effective. You can explore ideas and try out different designs and concepts without over-investing in a particular direction before you are ready.
  • User-centric. Wireframes allow the designer to address user goals in a way that keeps pushing the design momentum forward.
  • Malleable and pliable. Designers can take their ideas beyond the sketching stage without over-committing to a particular direction. They can be quick and dirty bare bones, or as detailed as time and resources allow.
  • Time saving. Spending the time up front with wireframing means you don’t waste time later on heading in a design direction that ultimately does not support a great user experience.
  • Level setting. Wireframes provide the mechanism for give and take between stakeholders, designers and users to voice desires and concerns and keep the conversation moving in a cooperative direction.

Keeping the UX in Wireframing

Good employee intranet wireframing takes both the company goals and the user experience into account. Wireframing is the UX designer’s master tool. In the right hands, wireframing can all but guarantee a successful employee intranet user experience.

The company will have some defined goals for the intranet and will expect those to be reflected even at this early stage of design. But it is equally important that the anticipated expectations of the user personas you have developed for the project are respected and also reflected in your design.

Wireframing is the perfect time to identify any areas where management and employee user goals diverge. This is the time to start a conversation around how any gaps management and employee users have on purpose and function can be closed.

The beauty of wireframing is it’s a dynamic process that requires shifting and thinking and rethinking structure and form until you get it right.

Here are some pointers to help your design team keep the momentum going:

  • If an idea doesn’t work out, move on. That’s the beauty of wireframes. There is not a lot of time invested in perfecting the details so you can move on guilt free.
  • Wireframing is the one time you can take risks, try out new ideas, and even bend the rules a bit. Go for it. Test out all those crazy ideas. Then test out all the variations of those crazy ideas. That is the only way you are going to truly be able to see the benefits and drawbacks. You never know what might stick. This is the time to throw in that kitchen sink. It’s easy enough to take it out if it doesn’t work out. Nothing ventured, nothing gained.
  • Keep the wireframes simple and easy to follow. This is not the place to overdesign. Speed and simplicity are your friends. Wireframes need to be easy to follow. After all, the whole point is to leverage a cost effective tool to create intranet flow. If your users and stakeholders can’t understand them, you have defeated the purpose of creating wireframes. And since wireframes are an oversimplified UI design mockup, if you confuse your users with wireframes, you will certainly lose them with an overdesigned site.
  • Don’t be afraid to annotate. This makes wireframes easier to understand and won’t leave your audience guessing. Static images don’t always convey the functionality you intend.
    Failed to load widget object.

2Plus2: Your Wireframing Experts

The information architects, UX, and UI designers at 2Plus2 know wireframing. Whether you need a new set of eyes to review your wireframes or are creating a project like an employee intranet from scratch, our experts can offer everything from project planning, design, and implementation to lending coaching and guidance to your in-house team.

Call 2Plus2's intranet design team at 510-652-7700 or contact us online. Initial consultations are free.

Cathy Dew
Cathy Dew – CEO + Information Architect
Cathy focuses the company on our mission – Real results. Every time. Information architect and strategist, Cathy is passionate about making software work well – the function, the feel, the result.
010001010110100101110100011010000110010101110010001000000111100101101111011101010010000001110010011101010110111000100000011101000110100001100101001000000110010001100001011110010010110000100000011011110111001000100000011101000110100001100101001000000110010001100001011110010010000001110010011101010110111001110011001000000111100101101111011101010010111000100000000011010000101000001101000010100100101001101001011011010010000001010010011011110110100001101110
Decode