How do you go from an idea to a functioning piece of software?
As a digital agency, we’ve found that the process is often not what our clients expected. When people think about words like ‘application’ and ‘software’, they tend to think only of programmers and lines of code.
There have been many times when a prospective client will talk to us about their needs, and say something like “this is just an internal database, we don’t need any design”. While an application like that may not require much attention to aesthetic detail, it still requires design.
In fact, before a single line of code is written, the process of creating an application must always start with design — specifically, User Interface and User Experience design.
Design, particularly in the context of software, is often misunderstood to be entirely about aesthetic appeal. However, making the final product pleasing to the eye is just one component of a design team’s work. Their job, at its core, is to plan solutions for a given problem.
In software development, designers begin the process of problem solving with UX and UI design. The goal of User Experience design is to define all of the actions that an application needs to be able to accomplish, and to create a plan for the application that results in the best possible experience while the user performs those actions. The User Interface encompasses all the parts of an application that a user interacts with, such as menus and buttons. Successful UX and UI design results in an application that is intuitive and easy to use for its intended purpose.
Both UI and UX design are necessary for every application, even if you’re creating something that you don’t think requires special aesthetic attention — like a proprietary enterprise application for managing large amounts of company data, for instance. Such an application still needs to be built on a foundation of solid UI and UX design, or it will be inefficient and difficult to use.
So, when you contact an agency to make an app, don’t be surprised if they start talking about the design requirements, even if you thought you only needed development. They’re not trying to upsell you or shake you down — they’re just trying to make your app the right way.
Design is the first part of our process for creating an application at Checkmate. Our process isn’t universal; different designers, developers and agencies have their own methods and preferences which influence their approach. This is what has produced the best results for us.
Information Architecture is about conceptualizing the app beyond its one-sentence pitch, and understanding every action the app will need to perform. To do this, we work with the client to understand their vision, and with our developers to understand what is technically feasible and suggested.
At this point, we’re not thinking about style, or even basic screen/page layout. We’re thinking solely about what the user needs to be able to do with the application. We call those actions “user stories”. User stories are short statements written from the user’s perspective that describe what they want to be able to do in an application. In a flowchart, we map out each user story, accounting for every path users may need to take. This includes everything from logging in to an account to placing an order.
A flowchart probably isn’t the first type of thing that comes to mind when you think of design, but it’s an absolutely vital first step of the design process. By mapping out all of the initial requirements specified by the client, we can find any gaps where a certain action will be difficult or impossible without an additional, supporting action.
With wireframes, we start moving out of the abstract and into something that begins to resemble an application. Wireframes are simple grayscale designs that represent each screen that will be in the application. When creating the wireframe, one of the main goals is to address possible points of friction in the user stories that we identified while determining the information architecture. This is where design-as-problem-solving becomes important. People expect a quick, intuitive experience from every app that they use. Processes that take too long will prompt users to leave and look for an alternative. To prevent this, we try to design the most streamlined version possible of each action. Ideally, most interactions should be accomplished with an absolute minimum number of clicks or taps.
We encountered a friction point like this recently with a client who wanted to completely redesign their existing application, which we hadn’t designed or developed. Their booking and checkout process was lengthy, requiring customers to go through about a dozen pages to finish their transaction. As a result, customers who had every intention of buying our client’s service were abandoning the checkout and likely switching to a competitor. We analyzed their process and found several redundant steps, which let us design a new checkout flow that was much easier to get through. An issue like that could have been very easily caught and fixed had their original designers gone through the process of wireframing first.
Once the wireframe meets with our approval and our client’s, we begin finalizing the design into an interactive prototype.
First, we flesh out the appearance of our grayscale wireframe, applying our client’s branding and adding icons, photos, and illustrations.
Then, we put the screens together into an interactive tutorial using InvisionApp. An InvisionApp prototype lets us demonstrate not only the appearance of our design, but also how each screen will work and connect to other screens.
The interactive prototype lets us test many of the assumptions that we made during the process of designing. We can see if the processes that we tried to make simple and streamlined are indeed easy to use, or if they still need improvement. We focus heavily on iteration and refinement during the design phase, as it’s far faster (and cheaper) to make significant changes to a design file than to make a similar change to a fully coded application.
When we send an InvisionApp prototype to a client, we always encourage them to share it with other people — friends, colleagues, and especially potential customers or people who fit their target demographic. User feedback is essential to refining the UX of an application. Even with a small group of testers, you often see trends emerge that show that certain elements need to be changed for a smoother experience.
With user feedback incorporated into the prototype, the design is ready to be made into an application by developers.
Designing an application requires you to think in terms of experience as well as appearance. Ultimately, people need to enjoy your using your application, or they’ll just look for something else. Focusing on user experience during even the earliest stages of the design process lets you uncover major issues and fix them before coding begins, saving you time and money while also resulting in a better product.
