As first published on Medium

Let's not sugar coat it. Our design process was clunky and time-consuming. Now, while that is not the same as a process that is completely broken, it's not ideal when you specialise in building large software projects in short timeframes. What we needed was a process as efficient, smooth and as optimized as the rest of our business.

Design is an iterative process. There are sketches, wireframes, revised wireframes, mockups, more mockups and eventually some form of “final” design.

These various designs required our team to use a variety of tools. Depending on the team member's role, the selection included Keynote, Omnigraffle, Balsamiq Mockups, Adobe Fireworks and/or Photoshop.

Every time we wanted to work on something we had to start on a clean slate — business development would handover Keynote files to a Product Manager to wireframe more precisely in Balsamiq or Omnigraffle. Eventually those wireframes would have to be recreated in Photoshop or Fireworks by the designers.

A number of problems arose from this process:

At the time our team wanted to be able to quickly create user flows for business documents, carry that same look and feel across to the wireframing process to flesh out the documentation and details in our journey toward final designs. Ultimately we wanted consolidation of software.

We looked at a variety of ways to solve this, taking into account, our team's existing skill set, while factoring in the ease and speed of learning new software. We had to find a process and piece of software that business execs, designers and developers could quickly grasp and use with ease.

Just after we decided to move from Photoshop to Sketch for all our design work, it hit us. Our development and design teams both loved Sketch, if we could teach the business folk how to work with it, we could use a single application for the entire process backed by the right set of resources.

Luckily for us Sketch is intuitive, quick to learn and in just a day we had the business folks excited. We set out to create resources for our new process and we haven't looked back since. We love it so much, we felt compelled to share it with the world. We're releasing all our resources we use to the public. What follows is a practical example of how it works.

Instructions and a Practical Example of using the Wixel Web Wireframing Kit with Sketch

1. User Flow

  1. Create a new canvas . Make the canvas big — the bigger the better.
  2. Open the Wixel Wireframing UI Kit and start locating the tiles you need to create your user flow.
  3. Copy and paste each tile that you require onto the new canvas. Sketch does a great job of aligning the tiles as you go.
  4. Open the arrows folder and locate the arrows you need to use and copy and paste these onto the canvas and size accordingly . Use the flip 5. 5. horizontal/vertical tool to easily change direction of existing arrows.
  5. Add text captions to the tiles that you have added.
  6. Add descriptors to explain the intended user flow within the tiles shown.

This process looks like this:

wireframe-example-1

2. Wireframes

Once all the stakeholders are happy with the user flow, the fun starts. For this example we fleshed out the homepage design (from the initial tile) using the Wixel Wireframing toolkit.

  1. Locate the first tile to get yourself started and copy and paste this into a new canvas.
  2. Hide the browser background so that it does not get in the way.
  3. Remove any elements in the tiles that are not applicable to your intended design and start replacing the text ‘indicators' with real copy.
  4. Find the next tile, copy and paste into the new canvas again, position and delete the browser background — then repeat stage 4 as needed — after that its pretty much a rinse and repeat exercise.
  5. Once you have your final wireframe in place, unhide the browser background and extend the two rectangles for the base of the browser to the extend of the canvas window.
  6. For a finishing touch you can easily use the layer styles to change the colouring of the elements to suit the client's brand colours if desired.

The initial tile has now evolved into this:

wireframe-example-2

3. Mockups

Once wireframes are approved, you already have a lot of the structure, perhaps even text and calls to actions. Designers simply expand on this visually.

Here's an example of the final design of the above wireframe:

wireframe-example-3

Last Word

That's it in a nutshell. One app, one streamlined system to deal with UX, wireframing and final design. We hope that our process inspires you and that the ideas work as well for you as it does for us.

The Wixel Web Wireframing Kit is available on Gumroad and Creative Market. Follow us at @wixelhqto keep track of our design and open source project releases.