Improving Your Design to Development Workflow

The need for speed and efficiency is more important than ever in the digital world today. Outdated services can quickly damage a company’s brand and drive away customers. New approaches to website planning are gaining more acceptance as proven methods to improve the design to development workflow, which in turn, cut costs and speed up processes.

Using a LEAN project management workflow, your initiative stands a better chance of reducing confusion and interpretation issues between designers and developers (especially when it comes to building site features). A shared responsibility of designing and developing through an iterative approach brings many advantages over a traditional hand-off methodology.

The History

Originally, the Agile product management system was created for software developers that were looking for more efficient ways to create, build and test features in a progressive way. A software development product cycle is different than a web development cycle in the duration and scope of the project, but many of the lessons learned have been carried into a digital, browser or app based product or website through the LEAN method of product creation introduced by Mary Poppendieck and Tom Poppendieck in a book titled LEAN Software Development.

The Goals for an Improved Design to Development Workflow

LEAN development is intent on reducing friction in a product due to what amounts to a lack of cohesive understanding between the product team members. This lack of transparency leads to a process that will routinely waste time, money and resources in the design to development workflow. Common problems include building solutions that are unnecessarily complex, building the wrong feature, rework, extra time spent trying to understand a task, and extra time spent waiting on communication. These issues are a strain for all involved (including the client), and they are much more difficult to manage and are costlier to address towards the end of an initiative then in the beginning.

Focusing on the Initial Wireframe and Design

A key deliverable during a product build is the design wireframe and composition. This documentation is counted on as a guide for the project and as a benchmark for the client. In 2017 clients are more sophisticated than ever, but still lean strongly on a design composition as a contractual component. However, there is a good deal of waste that is generally involved in the design process that LEAN methodologies can address.

The idea that you must conform to one standard or another is not valid here. The process you adopt is something that works for your individual company and its clients. The methodology is open to creative solutions as long as the exercises help achieve the following goals:

1.        Share learning between the design and development teams

2.        Delay in decision making until facts are gathered and tested

3.        Deliver a product quickly

4.        Empower the team members and make them accountable

5.        Help everyone see the whole product

Even though some of these goals (ex. #2) can be part of the actual development cycle, in this instance we are discussing them as part of the information gathering and design cycle. In order to successfully achieve these goals there are a few actions required:

1.        Involvement of both the design and development teams in the process from the beginning

2.        Faster methods of wireframing and prototyping as a delivery component

3.        Independent thinking in the name of improvement at the expense of strict adherence to a static design

4.        Creation of processes to quickly gather information and share information and understand of the product

Rap Songs and Doodles

In the beginning, a structured meeting of the minds between representatives of the client and the design/development team will be the first step towards building a shared understanding of the goals of the product. The two sides, with the interest in doing what's best for the end-user of the product, will discuss objectives from their respective points of view. The client representative will understand the needs of its users, how users respond to a brand, their demographics, interests and habits. They will also be able to articulate a mission that will help address a problem or set of pain points that needs to be solved. These are necessary to avoid designing and building something just for the sake of designing and building something. The design team will represent a technical understanding of the digital world and how to solve problems for users.

Combining the interests of these two groups can sometimes be challenging. Two different languages are being spoken, one using insider business information, and one in high level techno babble. Creative exercises to help both sides break the ice and start to build a shared rapport can be accomplished. Take a relaxed approach to the process and don't try to solve all the problems immediately. Some ideas for how to do this include:

1.        Write a rap (or country if that's your preference) song about the product.

2.        Draw a picture of sandwich that reflects the current product (if one exists), and another one that reflects the vision for a new product

3.        Draw an interface for your product as it would appear on a watch face, or other limited information medium

4.        Write or draw about a typical day in the year 2020

At this point, we will have hopefully shared in some fun and will come away with an idea of some of the most important aspects of the product we are working on.

Data Driven Designs

At this point, business requirements and key performance indicators (KPIs) can be introduced and discussed. User personas should be leveraged as well if they are available. The two sides will work quickly to determine if there are any obvious conflicts between the data requirements and the desired objectives for the brand and the user.

More Fun with Paper Prototypes and Card Sorting

There quite a few exercises that can be used to create a rough outline for your project plan. Some popular ones include:

1.        Paper prototyping

2.        Priority and feasibility lists

The common thread of these exercises is that they are iterative and will be structured in a way that allows for individuals in the group, or the group itself, to spend time creating low-fidelity sketches or notes that will then be shared and discussed. Some examples of these exercises are:

1.        Build some different devices (phones, iPads, etc.) from cardboard with openings cut out for paper inserts. Using a list of features, have each individual draw and color with markers a prototype of the product.

2.        For 15 minutes, have each individual person write down a list of features or content types they feel are important to the site. Discuss with the group. Then return to the individual lists and reduce the amount of features to 10. Return to discussion. Reduce down to 5. Discuss and then reduce to 2-3 for a final discussion.

3.        Create features or content types as post it notes and build your page structures on walls or tables. Start with a few basic sizes but allow use creative methods of manipulation (i.e. scissors). Keep content types limited to about 30-40.

There are additional exercises that can help deal with the information at higher levels as well, but they are not discussed at this stage in the process. An example of an additional exercise would be card sorting to help organize content types.

The Result

At this point, wireframes and designs can be created and shared with the collective team. The number of wireframes and fidelity can be open to interpretation, but eliminating time spent here is a desired outcome. A paper prototyping exercise would have provided several site structures to handle a variety of views and content displays.  Programs such as Sketch of Balsalmiq can be used to create digital versions of these. Full screen pixel perfect design compositions are a time intensive task; however, they usually only represent a small portion of the actual content. A mood board (a collection of the main site structures and content type display) can also be a useful substitute to a fully realized set of design compositions. The intent is to keep the amount of time invested at this stage to a minimum. A design compositions goal at this point would be to express branding and theme design patterns in a more fully realized, high-fidelity format.

When the development team begins the build cycle, it is with shared knowledge they can now use to work quickly and efficiently. Unleashed Technologies would love to help you build your next web or app initiative using a more collaborative approach to improve the design to development workflow. Contact us for more information.