Efficient and Focused Design

How to define your idea without coding.

2018-06-07

A picture is worth a thousand words. Iteration is the key to successful software products, but it’s hard to do it efficiently. If you focus on iterating on the look and functionality separately and then bringing them together, you can work faster, get better feedback, and make better decisions. Next, we’ll see what that looks like.


Step 1. Function (Wireframing)

A feature list tells you what the product should do and the wireframes show you how it should do it. The key here is to get ideas on paper. We suggest starting with paper and pencil and then move on to higher fidelity tools. The primary goal here is to concretize your thoughts, sharing them with customers and teammates, exploring new possibilities, and deciding what the product is going to look like at a high level. This process is very iterative. The more questions, concerns, and possibilities are brought up and resolved at this stage, the more clarity we will have later. At this stage, changes are incredibly easy and have no hidden costs, but each time we wait on solving an issue the costlier it gets to do so. Feedback and iteration on wireframes should happen on the topics of functionality, layout, and flow without the distraction of fonts and colors. The look is the next step.

img

Step 2. Look (Style Guide)

When the core of the app is defined, we can focus on finding the style for your app that your users will love. This will resemble your branding guide. It includes colors, fonts, logos, icons, images, and other assets and design specifications to be used throughout the product.

img img

Step 3. Merge (Mockups)

The next step is combining how things should look with how things should work to define the details of the user experience. The beauty of mockups is that they leave nothing to the imagination. The goal here is a pixel-perfect nonfunctional rendering of your product.

img

Bonus. Animate (Clickable Prototype)

If you need to present a demo or proof of concept for your product before development, at an investor meeting or client demo, you can do so by creating a clickable prototype. Adding transitions to your mockups can create a realistic visual representation of the final version of the product in action. You can click through it and get a feel for how it will work. This enables you to showcase the site or application and align key stakeholders on the goals of the build. This step is essential if you need to de-risk development and get buy-in but can skip it if the commitment to build is there.

We hope this overview gives you some clarity on how to go about designing for success. The design will continue evolving for as long as your product lives, but we’ve learned that to build beautiful software products on a budget you need to structure your decision making and focus on different aspects of the product at different times.



Ready for the next steps? Check out how we can help.

Not ready, but interested in learning more? Sign up to learn more about what it takes to build great software products.