Wireframes are no longer enough.

Ability to wireframe is probably one of the most mentioned skills on a product mangers resume. It used to be that you would walk into an interview and explain that as a part of your process for product development you would jump into Balsamiq or some other mockup tool and throw together wires for your suggested feature. This would lead to handing wires over to the Design team which in turn would hand off designs to engineers after receiving PM blessing and stakeholder buy in.

The exact steps depend on your team structure, but the process is probably pretty close.

There are a two main challenges with this process:
1. Getting feature proposals in front of stakeholders is delayed because of having to rely on Design (which is often a bottleneck).

2. Design handoffs are never smooth and we all know that PSDs don’t perfectly become code.

Is it possible to solve these by:
a) having your execs and peers sign off on vision by the way of wires and
b) iterate on PSDs until they are coded perfectly?

Yes, but both are a sure way to a lot of headaches. A bunch of lines and squares don’t tell as good of a story, and very few engineers have a passion for translating design to code.

Today I want to talk about a new process and a set of tools that can really decrease drag and help you, the PM, assist all teams (Execs, Design and Eng) in moving much faster as you build beautiful products.

New Design Tools

Sketch App.

Sketch app from Bohemian Coding, totally roared onto the scene and became the go to tool for many designers over the past year or so. There are tons of great posts introducing Sketch and helping designers move from Photoshop, transferring years of tricks and shortcuts into a new app package. You can find links to some of those walkthroughs at the bottom of this post.

One common mistake for PMs is to get Sketch and then still use it very much as a wireframing tool, by drawing a bunch of squares, lines and labels. Yes it will quickly enable you to directionally explain what you are trying to accomplish, but to tell a better story you should work with your design team to empower you further by creating a robust visual style guide file.

Creating a style guide.

A style guide is basically a cheat sheet for all the possible interactions your app has (buttons, fonts, colors, menus). It can seem like a fairly big task to build one of these, and quite honestly it is, but the key is to make sure that the investment to create this style guide is incremental.

You don’t want to send your design team off for weeks to come back with a full guide with every single element vetted and created. I would suggest that you sit down, talk about the next project you’d like to start mocking up and the elements on those screens. Use these basic building blocks as an entry point, giving you something to work with right off the bat and also preventing the Design team from being overwhelmed by the monstrous task of putting everything into the new style guide format.

As a starting point, you can use this Bootstrap UI file for your designers and have them basically style all the elements of your interactions and organize them in one file.

Showcasing your vision.

Nobody loves “slideware” or a succession of static images. Yes we’ve tolerated them for years, but that’s not how ideas are meant to be told. Convey your vision through motion and interaction, not passive absorption. Engagement over stillness.

This is where InVision comes in. Drag and drop your screens and easily connect them into flows by using hotspots.

The tool is extremely easy to use and once you get it going you can put a functional prototype together in minutes.

You can also easily beam this to your phone and get it into folks hands and really get fast findings on how someone is trying to interact with your mocks.

Did I also mention that InVision magically works with Sketch? Watch this video, it’ll blow your mind.

Buy-in and iteration.

Once you’ve gotten your pretty prototypes approved and everyone is excited to get this thing built, you’ll have to come back to designers to refine the visuals further. It’s not like Designers become obsolete once they give you a beautiful style-guide, but they do have more time now to think about interaction architecture, modular creation and usability.

Remember, the goals here are:
1) Convey your vision better by being more visual
2) Lessen the load for designers and engineers on smaller changes

Getting it built.

As a bonus, and this is a big one, we are going to make life easier for your Developers.

I seriously nearly lost it when I saw this, it’s so amazing. There is a plug-in for Sketch simply called Measure, which seamlessly creates redlines.

Marking up mocks with all kinds of details (fonts, padding, hex colors) has been a tedious but necessary part of the Designers workflow, otherwise the end result would look nothing like the mocks.

Well with Measure this process is automated and is extremely simple. It can also be carried out by the PM or Developers themselves, removing the endless back and forth. Just watch this video.

…

To sum things up, you can start changing your process to improve the speed of going from an idea to high fidelity functional prototypes, which in turn should result in more enthusiasm and buy in from stakeholders, free up the designers to work on larger tasks and lastly get the developers the level of detail they need.

The steps for this are simple:

1) Start using Sketch
2) Develop and use a Style Guide
3) Leverage InVision to bring prototypes to life
4) Help developers be more precise when they build through redlines

Remember to communicate frequently through this process and continuously get feedback and buy in as you design new solutions. Stay away from rigid handoffs and be mindful of how much time you initially spend putting prototypes together. Your job in the beginning is to quickly convey your vision and start iterating, don’t spend precious time on moving things a couple pixels here and there, simply use the style guide to make it look production ready.

Good luck and hope you can get moving on designing more beautiful products.

A few Links to get you going:

Switching to Sketch.

https://medium.com/@adellecharles/ditch-photoshop-design-for-the-web-using-sketch-86a4d0672697
https://medium.com/@jm_denis/discovering-sketch-25545f6cb161
http://medialoot.com/blog/sketch-for-beginners-a-complete-getting-started-toolbox/

Tips and Resources:

https://designcode.io/sketch
http://blog.mengto.com/the-best-hidden-features-in-sketch/
http://www.sketchappsources.com/