Rapid wireframes – Product turnaround in two days

Acting as a sales tool and what I term, the 'Presentation wireframes', this was an exercise in balancing both marketing and defining user flows against speed - better known as 'Rapid Wireframing'

First, be clear on your goals.

Getting users, business and IT stakeholders to gain a sense of ownership of the final product was important. The conceptual nature of the product also needs internal buy-in to push product development.

---

Rapid wireframing works on so many levels. But be clear from the onset your objectives – here product communication, internal engagement and best-practice drove behaviour. In true rapid-style, reasons why are bulleted below;

• Facilitates better discussion through the use of visuals instead of just words
• Raises the groups design IQ and ensures that everyone shares a common understanding
• Reduces risk and avoids missed requirements, leading to a better design faster
• Revising quickly based on feedback

Quick start guidelines

(Consistency is key)

Quick start product pages are key to setting standards from day one. Although there is a conscious decision to force users to focus on how they will use the application instead of what it will look like, providing a baseline colour palette and typographical hierarchy sets consistency from the get-go.

Onboarding

(… and UX Paring)

Guiding new users with simple instructions is an important part of launching a new product. This UX, along with the rest of the user flows was completed using the technique of ‘Pair-UXing‘. Similar to the concept of pair programming, this process differs as there should be two creatives sitting next to each refining requirements and rapidly wireframing at one workstation.

Sidebar functionality

(Be clear on what ‘fidelity’ you employ)

Fidelity refers to how closely a wireframe resembles the final solution. Go hi-fi too soon and users will focus on visual design (Hi-Fidelity wireframes). Dummy text was replaced with real content (or as close to that was possible at this early stage) to get a feel for how it affects the overall sidebar design.

Begin the selection process

(Make a selection)

Presentation wireframes lend themselves to rapid wire-framing. They are best suited to determining whether user needs are met and whether the user experience is optimal.

At checkout, push the social element

(Emphasise social sharing)

This was important when it came to increasing the customers base, and refining the product to suits its’ user base; Millennials

Sign up

(Entice and Engage)

Sign up is sign up, it’s two possibly three input forms. It’s never going to be the sexiest thing in the world. So keep it simply, don’t ask more than is necessary and follow error handling standards.

Make payment options easy

(Follow existing design patterns)

Depending on your payment method, try and use familiar design patterns and familiar methods, i.e. credit card or a PayPal-style.

Facebook multi friend selector (MFS)

(Follow existing design patterns)

All social networks employ some sort of login and select mechanism. Due to it’s sheer size Facebook’s MFS is becoming default. So don’t be a clever dogs and try to reinvent the wheel, use theirs.

Editing groups name

(Quick and dirty pop ups)

Quick pop-ups inevitably take you out of the experience, but if they are just that, quick and dirty then roll with it.

Notifications

(Polite and unobtrusive)

One of the most important things about your most prized personal device is to keep it just that… Private. With Notifications, you absolutely must either ask permission or provide a lightweight experience.

My Account

(Linear scrolling on mobile is king)

The ‘nuts and bolts’ if any application that provides personalisation. Linear navigation us leading the pack, but if you can think of another level of ingenuity… then go for it.

Settings

(Think scalability)

Default on all applications, so in my opinion; Don’t rock the boat. Similar to to the death of web design’s story, people expect ‘Settings’ to look like this, don’t disappoint them.

My key take-outs

• Work collaboratively with users, business and IT stakeholders while rapid wireframing. Apart from giving valuable feedback, they also gain a sense of ownership of the final product.
• Avoid “prototype creep” by setting expectations for the process, including ones affecting the purpose, fidelity, scope and duration. Remind everyone, including yourself, that rapid prototyping is a means to an end, not an end in itself.
• Reuse, reuse, reuse. For computer-based prototyping, this means saving reusable templates, stencils, patterns and widgets for future projects.
  Consistently remind the team that this is just a prototype, a mock-up, not the actual solution. This reminds users that this is a work in progress, it encourages feedback, and in the case of high-fidelity prototypes, it prevents users from mistaking it for a working solution.
• Don’t begin prototype review sessions without clear guidelines for feedback. Be very specific about the type of feedback you are looking for. (Are the steps logically arranged? Is the navigation clear and intuitive?) If not, be prepared for, “I don’t like the blue in the header,” or “Can’t we use this font instead?” or “Can you make this bigger, bolder, in red and flashing?”
• Don’t be a perfectionist. In most cases, rapid prototyping does not have to be 100% perfect, just good enough to give everyone a common understanding.

Get in touch

This is but part of a selec­tion of design articles spindlelegs gen­er­ated for the creative community out there. Please con­tact us fur­ther to dis­cuss if your brand really wants to ben­e­fit from this new immer­sive expe­ri­ence here: [email protected]

If something has peaked your interest. Please leave a comment below.