January 21, 2019
Code & Design
This design process series covers the exact design process we use every day at SetDev.io. It’s a culmination of a six-year journey, bootstrapping a software engineering consulting agency as the lead designer. All deliverables discussed are attached as Sketch files for your convenience.
Ahhh a fresh, new project — very few things are equally exhilarating, right? Especially if it’s the freedom of a passion project. In this jolt of excitement, as a designer, it’s almost second-nature to immediately begin sketching/wireframing/greyscaling the idea in mind; and yet this is almost always the wrong first step.
Don’t worry, I’m 100% guilty of committing this mistake multiple times but I’ll save you a headache. In all likelihood you’re not working alone but with either clients or teammates — this is a key principle that should remain at the forefront of your mind. Particularly early on in a project, an extra sentence of communication today is worth hours of meetings tomorrow. Spending precious time iterating towards a solution that only you have in mind, without at least reviewing your approach & assumptions, with the rest of your team, foreshadows friction.
It’s cliche but ultimately all products at their onset are simply hypothesis, experiments. At the very least, the team (teammates or clients) should know what experiment it is you’re running.
The focus of this first module, Brainstorming, is to make sure that all stakeholders are on the same page — they know what experiment it is they’re running. This is accomplished through two separate deliverables:
The first deliverable, the Project Vision, answers key high-level questions in order to provide an anchor of direction for the team. The second deliverable, the Competitor & Inspiration Analysis, visually translates these answers to effective market research.
The Project Vision is a succinct, guideline deliverable that outlines the basic constraints, direction & main key performance indicator (KPI) for a given project. Compiled through multiple internal/team or client discussions, the deliverable has two main purposes. First, it gives ideas tangible weight by streamlining & translating them to actionable, to-do’s. Second, more importantly, it creates the very first document that all stakeholders, teammates or clients, can agree on.
An example of a project vision is presented to the left (or above on mobile). It’s critical to note here that the number of questions & the questions themselves are not static. All deliverables are flexible & this origin one is no different. For example, if the project entails multiple user-types, a great alternative might be: what is the end goal for each user-type?
The six cards towards the bottom are the most fundamental & likely least static questions. Again, a few of these things may seem obvious or even redundant to have on paper but I can’t express enough that they might not seem so obvious to everybody else. It’s easy to assume that everyone is on the same page — take the extra time needed to make absolutely sure that all stakeholders, whether it’s an internal project or a client-contracted project, participate (or at least read) this deliverable.
A few, short, effective meetings should result in a sufficient first draft. With the experiment now taking shape, it’s time to analyze the current competitive & inspirational landscape.
The second & final deliverable in this module, the Competitor & Inspiration Analysis, serves to survey the competitive landscape for open niches. It’s effective as both a design & marketing tool. By analyzing the competitive landscape, the idea is to identify potential market gaps.
Competitors
While a very rare handful of ideas have little to no direct competitor, every product idea has at least a handful of indirect competitors. The first part of this deliverable is to thoroughly comb the app stores & Google for potential competitors. Download & walk-through at least three to five competitors apps — write about any overlapping commonality that stands out. The research conducted here is really useful for the marketing teams future positioning as it starts to become clear where the products potential strengths & weaknesses lie.
Inspiration
The second half of research is spent looking for UI/UXs solutions that address the potential market gaps identified from competitors. A great starting point is searching through Dribbble or Behance for related case studies. A second source is to simply open up your favorite apps to take note of what makes them a great experience — while your favorite app might have nothing to do with the idea at hand, these days very popular apps commonly hold a fairly-high standard of design worth inspecting.
Putting It All Together
The last step involves organizing the information & providing visual context like the example above. Try to keep it short, neat & informational. Again, please feel free to grab the Sketch template of linked throughout the piece.
Module one is now complete! Though it contains only two deliverables, we’ve now both communicated a common mission & identified a potential market gap. They’re not anything extraordinary & understandably can come across as boring, but it’s worth re-iterating here the main difference (or so I’ve learned from my experiences) is that the professionals front-load communication in order to decrease the likelihood of unproductive communication in the near future. Don’t overlook communication . While the deliverables surely help you, the designer, flesh out the idea more thoroughly, it’s really the cohesion that these first documents create that make them worthwhile.
In the next module, we’ll leverage the knowledge gained in order to more clearly highlight our perfect potential user. Module numero dos, Researching, introduces the massively important concept of customer validation — the lifeblood of any successful product in the long run.
sources
