The Mobile App Design Process: How to Design an App
Designing an app has its unique challenges whether it is for a new or existing product. There are so many factors that must be looked at. With what seems like such a complicated process, it may be hard to keep track of all the steps. So what does this process actually look like?
The Design Process
1. Discover the Problem
No matter the product, a client comes to us because there is a problem that needs to be fixed. With an existing product a client may already know what some of the big problems are, but can't solve them. Perhaps the client has no idea why their users struggle to complete necessary tasks, or why their website has a high bounce rate. For new products, often clients see a need for their idea and need someone to help the idea turn into product.
When KRUTSCH redesigned the web application for the State of Nebraska’s Early Childhood Education Record System, Nebraska knew that they needed a product that was user friendly for a diverse user base. What they didn’t know was how to solve this problem.
Original Portal page.
The original design was busy and crowded visually. There were a lot of graphic elements that fought for attention, taking away the user’s focus on the important content.
Implemented design.
KRUTSCH focused the UI on user log-in or sign-up, while providing quick access to secondary tasks and resources that did not require log-in.
Whether we have a good idea of what the problem at hand is, or isn’t, at KRUTSCH we start each project with workshop sessions. We dive deep into a heuristic review to uncover the problems we are trying to solve, and for whom we are solving these problems for, which leads us to the next step.
2. Collect Data
Interviews with product owners, current or potential users, a heuristic review, and user testing are all paramount for a successful product. Often, testing the current product reveals truths that neither the client or designer were aware of. This information that is gathered may not always be what the client wants to see or hear, but it defines how and what you design, and it will serve as evidence to support design decisions to the client. We often learn that clients have their own opinions on how something should look and operate. This should not be ignored, but if what they desire doesn’t line up with what users need, it is the designer’s job to make that apparent. Always have the end user’s goal in mind.
3. Building Workflows
Whether designing for a new product or one that already exists, part of the design process is going to involve iterative phases of design and testing. It can not be escaped. What can be great about an existing product is that the current version has already been tested, and that feedback can be taken to make a product that is better designed. The challenge with users that are accustomed to the old design is the learning curve of introducing a new design. Even if the old design leaves users struggling, they’ve often found a way to workaround the problems.
New products have their own hurdles. There’s no product legacy and that can leave one feeling a bit lost with where to start. It is crucial to work with the client to learn what the product is and what it needs to do. At KRUTSCH we went through a lengthy Research and Development phase when designing and building a safe teen driving application, so we could answer the question, “Can it be built and should it be built?”
Proof of Concept design that allowed KRUTSCH to quickly build a working prototype to discover the possibilities and challenges of detecting driving status.
Upon completion of our R&D phase, KRUTSCH was able to refocus the design on an app that provided parents the ability to monitor teen driving while still remaining passable for both Apple App Store and Google Play.
If the answer is yes, that this new product can and should be built, now what? The next step is to map out a workflow. Just like would be done for an existing product, it’s important to map out the different user journeys. Once the architecture of the app is defined, sketching can start.
4. Creating a UX Wireframe and Testing
It doesn’t really matter if it’s a new or existing product, the point of wireframes is to make sure it’s understood what elements are needed and how they're going to be laid out. Keeping these wireframes simple (i.e. no stylization) allows for the client and users to give honest feedback about usability without being distracted by visuals that aren’t necessary at this point. The pretty colors, graphics, and fonts will come later.
Reviewing and testing wireframes may seem redundant, but it’s a great way to make sure that the UI is successfully built out and follows the established information architecture by showing how users will move from page to page.
5. Develop Hi-fidelity Storyboards
Now bring on the color! Existing products likely come with established brand guidelines, like fonts and color, but that doesn’t mean that there’s no room for creativity. A visual hierarchy must be established. This visual hierarchy plays a vital role in establishing the information architecture that a user will rely on to navigate through the product. This is big because the design has the potential to either decrease or increase the amount of effort required by a user, which ultimately determines the success of the product.
Defining the visual language for a new product can be both daunting and exciting. It’s starting from ground zero, but depending on the client, a designer might have free rein to do what they want. This freedom can sometimes come with its own set of challenges. Ideas start brewing during the initial research and "defining the problem" phases. As the components come together, there will be an idea of what the product's UI could look like. At least for the first iteration. Like the steps above, this too will involve several iterations and will uncover what works and what doesn’t during user testing.
6. Develop a Prototype App
Once screens are built out, it’s time to prototype. Prototyping allows a designer to give the client a realistic idea of what their product will look like without touching code. It also enables the design to be tested with users and give them an experience that closely mimics the look and feel of the real thing. For both existing and new products, prototyping serves the same purpose: to give valuable feedback on how the design will be accepted by actual users. Prototyping is an extra step, and it can take some time, but it can save the client time and money down the road. Development isn’t cheap, and it costs a lot more to build the wrong product.
7. Build, Test, and Iterate
The research has been done, a plan has been made, the UI has been designed, and prototypes built, so the job is done, right?
No.
The final product still needs to be tested, in which changes that need to be made will be discovered. Before testing the final product it’s likely that the development team will run into some hurdles, which will require design updates. The process can feel never ending, but the reality of it is that we don’t design perfect products, and there’s always room for improvement.
App development for new and existing products each have their own unique challenges. Whether redesigning an existing UI, or starting from scratch, there are a lot of parallels. Regardless, the end goal is the same: to provide the client with a product that meets the demands of the user. If that’s done, then there is true success.
End Note
Follow us on LinkedIn to see the next article in your feed.
Rachelle Abernathy is a graphic designer at KRUTSCH, whose work focuses on integrating beauty into the pragmatic function of our everyday life. She is committed to finding creative and efficient solutions to design and business challenges