As a long time contributor in B2C and B2B advertising I can tell you that there is a lot of stock in how something looks, how something sounds when it rolls off the tongue and the feeling you get after that experience leaves center stage. 

Successful Creative Departments know this in the advertising world and are quite good at extending reality into a state in which a brand becomes something more than just a logo, colors and a tagline.  

Watch this Grey Goose Vodka video and you’ll see what I mean, don’t worry it’s pretty short… quick go grab some popcorn
https://www.ispot.tv/ad/ATeO/grey-goose-vodka-la-pursuit

Even if you don’t like Vodka… which I don’t… damn… wouldn’t it be cool to be there…

Creative Platforms are planned, scrutinized and scrapped and then reimagined from the ground up many times over.  If done correctly a creative platform can imbue a consumer with a magical sense that they themselves personify a brand.

This Holy Grail in advertising psychology… is the insubstantial brand equity that agencies strive to produce.

User Interface Design and the ability to shape a User’s Experience operates a lot like the pursuit of a perfect Customer Experience and how it builds Brand Equity. 

Popular UI Patterns are not a random occurrence in the wild, they like a well-planned creative platform need the same level of effort and planning.  UI and UX like we’ve talked about in previous blog posts when harnessed together have the ability to also extend a user’s perception of reality.

In this blog post we are going to talk about Wireframes, Design Mock-ups and how the combination of the two along with some crafty apps will help you gain group consensus that in the end will help drive User Adoption and Customer Satisfaction.

There are a lot of different ideas in the industry over what wireframes actually are and on what level a sketch turns from rough lines to straight lines.  In some cases wireframes take on an almost completely finalized layout with colors, imagery, and copy.  In some cases a rendered sketch on a napkin is all that is captured.

This process of fleshing out what will be rendered has existed for decades and takes on many forms.

Sometimes we see colorful PostIt Notes littering walls of office space depicting drawings with string taped from section to section all of which looks like a scene from the movie “A Beautiful Mind”.

Sometimes we see marker boards with User Interfaces incorporating writing interwoven in loosely drawn squares representing functional content areas. 

Early concepts for the BBC TV Channel sites

Each method is a little different both in technology, materials and people power yet the results are mostly the same.

The ultimate goal is to allow teams to visualize what is being worked on, so that some vital piece of the puzzle is not left out, or that the constructed whole can support future puzzle pieces in later agile scrums.

The very act of drawing an object, however badly, swiftly takes the drawer from a woolly sense of what the object looks like to a precise awareness of its component parts and particularities.
- Alain de Botton

Sketches and Wireframes are essentially synonymous terms with a difference in fidelity.   A Low Fidelity Sketch you could imagine is rougher and has a fluid and gestural way about it making it easy to move ideas around or delete them.

So drawing upon the idea of the creative platform imagine how easy with a low fidelity sketch it is to scrap, polish and reimagine an interface during a collaborative meeting.

High Fidelity Wireframes take on a more polished look and have less iterations or changes.  The idea here is that once there is general group consensus in a direction, this might be a good place to fine tune the interface.

At Concurrency we do a lot of what was just mentioned through a series of UI & UX Workshops.

The workshops involve a series of collaborative exercises that are grouped into phases where we discuss a lot of what has been covered in previous blog posts. Key UI & UX facets are flushed out pertaining to:

• User Personas

• User Journeys

• System User Survey or SUS

• Functional Requirements based on Business Analytics

• Low Fidelity User Interface Sketches

• High Fidelity User Interface Wireframes

• Branding, Colors, Imagery and Content

• Design Mock-ups

Some of the core tools we use at Concurrency to help facilitate these deliverables are listed below

The UI sketches below were generated using both OneNote and Skype for Business.  OneNote was used as the drawing surface, along with screen sharing through Skype for Business so that our remote stakeholders could see and visualize or comment on the UI sketches while they were being created.

As I mentioned before one of the core UI and UX apps we use at Concurrency is Axure.  One of the reason Axure is such a great tool is because it sockets to a host of other communities and features that extend Axure’s out-of-the-box abilities. 

Axure has a vibrant support community that regularly publishes content to forums.  On top of UI UX forums there are a ton of Symbol and Component Libraries published by Axure marketplaces in which you can download free or buy libraries that extend Axure’s Core Library.

Axure supports interactivity in wireframes which can then be built upon to visualize almost any situation that arises with your clients.

Axure has many features that make it a top notch UI UX program, but the one feature that makes Axure stand out and lead the pack is its Axure Share Collaboration Portal that allows users to share projects.

Here is an example of a series of interactive Mid to High Fidelity Wireframes that I put together as an example for Axure’s Collaborative space:

http://bzi5jf.axshare.com/#g=1&p=home

Notice the Discussion Option, try it out...  Write something and post it.  Now imagine the idea that you are collaborating with a team of people, both on-site and off-site and you’re trying to wrangle group consensus with UI Patterns, content regions and copy tonality.

With the Axure discussion threads you have the ability to capture all of the various team questions and comments.  Automation is also built into the portal so an email alert is triggered when the discussion thread changes making the entire workflow of the Axure Share Collaboration Portal amazing to say the least. 

OK…OK… Axure is Awesome… But when do wireframes get pretty, how or when do Mock-ups fit into the picture?

The great strategic advantage of using these tools in combination with consistent UI UX workshops is that group consensus is easier to achieve because the apps help to visualize communal documentation making it easier for team buy-in.

UI buy-in with enough group consensus on how an interface functions and what users are looking for raises the probability that a Creative Team can harness the emotional side of imagery, colors, typography and animation un encumbered by what would normally be unknown frictions of interaction.

We now come full circle and get a chance to talk about the great dog-and-pony-show.  The Grey Goose Vodka video had nothing to do with how Vodka is made… Or how to find facilities… Or what the company’s mission statement was.  The reason that the video instills a sense of wonder is because Grey Goose is poking at the emotional language of storytelling through a creative platform that extends their brand outside the walls of business into fantasy and romance. 

Creating a heightened Customer Experience is a lot like the mechanics of creating a User Experience.

Now obviously Grey Goose Vodka's target market and audiences are different than that of IT or other markets but with that said, think of Apple, or the creative work Microsoft and Google have been doing lately by courting the next-generation of youth and millennials, and you’ll start to see the blurring of lines.

This is not to say that the Designer has free-reign to plunge into the deep-end of creativity without Cognitive Processing becoming an issue like we’ve talked about in previous blog posts but that the facets of UI and UX work more harmoniously with group consensus at this stage in the process and allow for more freedom.

Here is the same Axure Share Collaboration link but showing the UX Design and visual language of a Mock-up:

http://bzi5jf.axshare.com/#p=ux_mock_design&g=4

At this point we’ve covered Low Fidelity Sketching, High Fidelity Interactive Wireframes and how to leverage OneNote and Axure to rock UI.  We’ve talked about using Skype for Business and Axure/Axure Share for collaboration and building group consensus.  We’ve even briefly talked about how to add our UX Design mock ups into Axure Share to be viewed and discussed and documented.

In my next blog we'll be talking about the psychology of color, imagery and language in Design and how they help to shape Customer Experience and User Experience.