Key Deliverables to Include in Your Software Design Phase

19 Jan 2015

As a software company, many of the clients we work with already have design capabilities and hire us to make their concepts come to life. This leads to complications because not all designers understand the limitations that come with software projects. When you add budget restrictions and compatibility requirements to the mix, you run the risk of your project falling short of this grand vision that the client and their designer had in mind.

This is a big reason why having a designer on your software team can be a tremendous advantage. It not only opens up opportunities for clients without design resources; but your deisgner can also become an effective liason to keep the client's expectations within scope. Adding a member of your team to the design process for your software project can help ensure the right compromises are made to accomplish the goals of the project with sacrificing user experience or requirements. 

When working on UI design for software projects or web apps, there are a number of key deliverables that we have found to be quite effective in keeping the process moving and the scope within reason.

1. Brainstorming Session

Success in a software design project is determined by the ability to streamline a user experience while maintaining a consistent brand throughout the process. 

The first step is defining a look and feel to guide design direction by building a profile of a client's brand during the sale process. We often ask them what their goals are as a company or what sets them apart from other players in their industry. Having a good understanding of your client and what motivates them is a useful, yet often overlooked component to highly successful design projects. 

Our first key deliverable is a brainstorming session where we discuss major design concepts and user experience goals for the project. Clients might not always know what they want, but chances are they know exactly what they don't want. We prepare for this session by putting together a collection of different of interface designs and brand styles we find online. We then present these examples during the session. There are many different formats and tools that you can use for this presentation, ranging from a simple collection of links to pinterest boards or visual inventories.

Our goal is to walk away from the session having narrowed down what themes the client wishes to convey through his design and what functionality they want to integrate into the user interface and experience. The brainstorming session serves as a great opportunity to establish limitations and to uncover any items that the client might be opposed to (such as the color yellow, I kid you not).

2. Mood Boards and Element Collages 

The next deliverable that we work on is building out the design, a process is unique to each designer.

Our internal process includes many different tools such as sketches, wireframes, sitemaps and user stories. The deliverable in this stage is what is known as an Element Collage, also known as Pattern Libraries, Style Guides, Mood Boards or UI Kits. It is essentially a collection of logos, typography, colors, UI elements, iconography and key features of the projects merged into a single document or "collage".

Keeping all these items in a single document helps the client visualize how their app will fit together, like pieces of a puzzle layed out in front of them. We have really enjoyed working this way and get great feedback from the clients to help kick off the revision process. This collage is typically created in Adobe Illustrator and presented to the client as a static image or pdf. The advantage is that this allows for us or the client to easily share the document with different team members. The drawback is that often our end product is not a static image, but a dynamic software application. 

3. Dynamic Prototypes and the End Product

To make our design process more efficient, we explore different platforms for our collage such as javascript applications, css libraries and prototyping tools for native applications. Depending on what your end product is, you can streamline the design process by building your puzzle pieces in the required codebase right off the bat. This allows you to piece together your end product after the revision process instead of waiting for the final design approval before beginning to code. This becomes a bit more challenging with native Android and iOS applications because building a codebase for each platform can be time consuming, especially if the functionality concepts are still under client review.

We started exploring some great browser tools like Invision that use javascript to mimic native android and iOS functionality. This allows rapid prototyping functionality and design for review without having to rely on architecting the entire app first. This makes dynamic prototypes a key deliverable within our design process because it allows us to finalize design and functionality while ensuring that the client's expectations will be met when we deliver the end product.  

Always Review and Revise

Keep in mind that design is indeed a process. We have found team reflection is equally as important as the tools that you use. Discussing what worked well and what didn't after each project is how we grow as a team and foster a collaborative environment. We hope that these tools and methods might provide you with some insight into how you can improve your own design process. We encourage you to use these methods for both internal and external projects. You might find that there are gaps in your process that need to be fixed and it is never too late to start improving. 

photo by david marcu