The power of a hi-fi intranet prototype

Have you been in a project building a new intranet or external homepage?

Often the duration of the project is 20 months, and there is nothing to show to stakeholders and the CEO board the first year. Instead you are forced to speak about theoretical models, vision, structure, a homepage still in Lewis Carroll’s Wonderland, information governance (the CEO board is totally lost), wireframes (why is it so gray?) and so on.

These things are not bad things to discuss, but not so compelling as being able to, hands on, actually see and feel the future. But seeing, using the device of your choice, is possible only after the design person has produced the GUI and the IT consultant has built the intranet in the CMS.

Or is it?

What if the owner, the steering committee, stakeholders and others could see something after only a short project time?

What if they could see something from project day one?

Enter the modern hi-fi intranet prototype.

Instead of the slow waterfall model:

1. building a unique intranet GUI design system from scratch (4 months and endless discussions about how buttons should look when in hover state),
2. have hypothetical discussions about what templates you’ll need (4 months and uncomprehending stakeholders),
3. produce non-RWD printouts from Sketch, Photoshop or another old-school program and argue about just how the page would look in a different device (2 months), and
4. wait for the consultant to build it, then wanting to adjust some things and prolonging the project (4 months more),

why not design it with the right CSS code and 100% RWD from the beginning? Then everyone could actually see and feel the future right away. The project would probably have a lot more discussions about the actual intranet delivery rather than what pantone colour the masthead should have.

Sounds like sci-fi or utopia? Actually, it’s possible today!

You can, as the intranet manager/intranet project leader, get a small prototype RWD intranet up and running before the first meeting about the new intranet.

This is how you do it:

1. Be an experienced intranet manager, or find someone who is.
2. Learn the Bootstrap framework, or find someone who knows it. (There are also other frameworks you can use, e.g.: Foundation, Semantic, Pure)
3. Buy a tool like Bootstrap Studio. (Or another tool supporting Bootstrap or the framework of your choice.)
4. Download the XCoffee intranet prototype file. (For Bootstrap Studio. The prototype is CC licenced from me. Enjoy!)
5. Change logo, pictures, masthead colour, and page content (a bit or totally).
6. Publish on the built-in hosting platform. (Depending on the tool.)
7. Send out the link to the prototype.

Congrats! Now you have a hi-fi intranet prototype from day one. You’ll avoid a lot of meta discussions and misunderstandings. You’ll get more buy-in from all participants. You’ll finish the design phase faster. You can test the real intranet with the end-users, not wireframes (why is it so gray?).

Everyone wins!

********

N.B.1: I’ve built the XCoffee intranet prototype in less than 40 hours, and most of this time was spent learning Bootstrap basics and looking for classes codes (everything is generated by adding CSS classes to the HTML tags). Had I been more knowledgable in Bootstrap from the beginning I could have built a page in less time. (See this example: bootstrapstudio.io/tutorials/)

N.B.2: This approach makes the project focus on functional GUI design and not Brand design (and that is a good thing!).

N.B.3: When your project gets to the actual build-the-stuff phase you probably need to recreate the code from the beginning in the CMS. But hey, imagine if you could take the generated CSS file from Bootstrap Studio, put the file on the production asset server, and automatically the CMS use it? Mind blown! Daily design sprints possible.