Streamlining the Design Process: User Flow to Final Design using Sketch

How Wixel, a software development studio, simplifies the UX and UI design process using one application.

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:

  • each set of designs took an enormous amount of time
  • a lot of information, thinking and decision making was lost between designs
  • copy decks are great, but copy just looks, works and feels different on screen — we wanted to write copy into our wireframes
  • it really bugged us that the look and feel of the designs varied so wildly from program to program — we wanted to have our clients experience security in seeing the same set of designs evolve through the 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 artboard . Make the artboard 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 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:

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 artboard.
  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 artboard 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 extent of the artboard 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:

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:

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, Wixel Mobile UX Flowchart Kit and Comprehensive Flowchart & Wireframing Kit is available on Gumroad and Creative Market. Follow us at @wixelhq to keep track of our design and open source project releases.

We’re offering a 70% discount on Gumroad for the Comprehensive Flowchart & Wireframing kit. The kit is a combination of our web and mobile kits.

Show your support

Clapping shows how much you appreciated Wixel’s story.