When we talk about design in software development, we’re essentially talking about two different things. On one hand, there’s the design strategy and creative thinking around what you’re trying to build. This borders on product design.
On the other hand, you’ve got the implementation. This is the user interface (UI) design and things like the styles, colors, and wireframes, as well as how the user moves from one system to the next.
The core concepts of this phase are twofold: you’ll need an early roadmap that defines what you’re looking to accomplish. But, critically, you’ll also need user stories that define what you’re doing in terms of the user’s experience.
After all, it’s all about the user in the end. To neglect this is a fool’s errand.
When you’ve got these components in place, you can move through the rest of the design phase: user flows, wireframes, concept designs, and clickable prototypes.
Let’s dig a little deeper into these steps and what they entail.
Early roadmap
Obviously, you can’t dive willy-nilly into a multi-faceted development process without an idea of what you’re doing. You can think of your early roadmap as a hypothesis of sorts: using the knowledge and data points you have right now to create a blueprint for what you think you’ll need for the project.
Then, as you move through the design phase, you’ll continuously learn more and gather more data about the project, which you can incrementally implement as you go. This applies to the entire development process as a whole.
When designing an early roadmap, here are a few of the core considerations:
- The “why” behind your product. What’s the purpose of this tool? What value are you ultimately delivering to end users?
- The audience. Who will use your application? You should know your audience shockingly well, down to their daily habits and motivations and preferences. This information will fuel the user stories of how your audience interacts and engages with your app.
- Key features and functions. What exactly will your app do? And what are the priorities of each of these features and functions?
From there, you’ll need to lay out the key performance indicators (KPIs) to gauge your success as you move through the design phase (and forever, really). Then you’re ready to set up the tools you need to get the job done.
User flows
Once you have your roadmap (that’s fueled by user stories, of course), you can start creating user flows. These are a visual representation of how a user will navigate through your application to accomplish any given goal, including all the buttons they’ll need to click and pages they’ll need to move through.
The point of user flows is to give a clear understanding of the user’s journey, highlighting key decision points and possible paths that users might take in your app. This gives developers and designers an eagle-eye view, allowing them to more easily identify any potential usability issues while streamlining the user experience and making sure the software is actually meeting their needs.
As the name suggests, user flows are often represented as flow charts or diagrams.
Wireframes
Once you understand how users will move through your app as a whole, you can get more granular. That’s where wireframes come in. A wireframe focuses on the user interface (UI), down to the individual screens or pages of your software.
The main goal is to iron out the layout, functionality, and placement of content on each page. On a wireframe, you’ll find key components like navigation menus, content and image blocks, forms, and buttons. A good wireframe clearly illustrates the overall structure and hierarchy of the page in a clear and simple way.
The way a wireframe is created will depend on who’s making it. Some designers and developers prefer to go the manual sketching route with pen and paper, while others opt for specialized software made for this purpose.
Concept designs
After wireframes comes concept design. You can think of this as going through a sort of “mood board” approach to the final visual details of the user interface and experience — the look and feel of it all.
Here’s where your app really comes to life as you dig into the intricacies of your design. You’ll work through style elements like colors, imagery, and typography. If you have a brand book, this is where you’ll apply all the branding elements you created for your company and/or software. (And if you don’t have a brand book, now is when you’ll make it!).
Clickable prototypes
While some designers and developers stop at wireframes and present those to the client, I firmly believe that clickable prototypes are an extra step that needs to be taken.
With clickable prototypes, users are able to see and feel that their software is working. This is important because non-technical people (or anyone, really) often have trouble picturing what a final platform will look like, and how it will feel to engage with it.
When you have clickable prototypes or even just clickable wireframes, it makes a world of difference. As an added bonus, they’ll help to streamline the approval process for all involved parties, and reduce the amount of “do-overs” and edits you’ll make in the next stages of development.
It’s a win-win.
Design is where the rubber meets the road
Essentially, the design phase is the movement between an idea and its execution. It’s the time where you look closely at what exactly you’re trying to accomplish. Then, you mobilize all the needed stakeholders, teammates, tools, and resources to implement what’s needed to get the job done.
The design phase isn’t a stage that can be neglected or skimped on. That’s why it’s critical to approach it with a comprehensive game plan. You’ll need to foresee all of the key issues and obstacles that you might encounter, do your technical due diligence, and still leave some wiggle room to make adjustments as you go. This is because you’ll inevitably learn and collect more data, which will, in turn, continuously inform your strategy.
The end result: a darn good application.
Video
