As our development team at Cleveroad has worked to perfect our internal processes over time, we have changed and adapted our workflow to be more effective and convenient—for both our clients and our team. We’ve paid huge attention to our UX design process, too. We follow agile principles. Each stage of the process is vital, but flexible, to accommodate changes and ensure we test our ideas.
In this article, I’ll describe how the UX design process for mobile apps looks within our software-development company—what steps we take, what people we involve, and how our clients help us. I’ll also share some UX research and design tips that should be helpful to beginners.
Champion Advertisement
Continue Reading…
1. Immersion
To create the best possible designs, our team carefully studies business goals and project requirements. Therefore, at the very first stage of the process, we immerse ourselves in our client’s business.
The best way of understanding a business is to talk to its owners. This saves you time and engages your clients in the design process, demonstrating that the final outcome is not the result of some momentary inspiration, but a combination of the right visual style and business logic.
In our software-development company, UX designers work closely with requirement analysts during the immersion stage, conducting stakeholder interviews with clients and documenting the project’s requirements. Some of the questions we ask during these interviews include the following:
What are the company’s goals and mission?
How does their business get revenue?
Who is their target audience?
What are users' expectations for the app?
What goals and tasks should the app support?
What user problems do you need to solve?
What are the app’s required features?
Client’s business goals are often things such as increasing sales, reducing the load on the call center, and attracting new customers.
At the end of the immersion stage, you should clearly understand how the business is earning money and what key actions the user must perform—for example, subscribing, buying, or ordering something using the app.
2. Research
After the immersion stage comes research. UX design begins with a study of the target audience and their needs. You’ll use this information to create products and services that are helpful to the people who belong to your audience and are easy to use. At this stage, our Design team studies the project requirements, analyzes users’ behaviors, and conducts a competitive analysis.
First, study all available project materials, whether they describe a basic business idea or provide a detailed specification that fully describes the desired functionality, mindmaps, and user roles. Once you’ve analyzed all of the information you’ve received from your client, create personas and a user-journey map.
Creating a Persona
Once you’ve had a chance to talk to real users of the product, you can create personas that are based on that data—for example, a buyer persona similar to that shown in Figure 1. You should create a persona for each unique user role, describing each user’s needs, goals, and painpoints—creating probably three or four personas in all.
Our Design team creates user-journey maps to understand how people would use the product—both on first use and on an everyday basis. Consider all possible usage scenarios in advance, note the problems that users may have, their emotions, and their experiences when using the product.
Conducting a Competitive Analysis
There are two possible outcomes of conducting a competitive analysis:
On the plus side, you can save a lot of time by adopting some of the competitors’ decisions, which they’ve implemented for a reason—hopefully, based on research or business results.
But the risk is, by diving deep into studying your competitors, you might focus on implementing existing patterns and miss the chance to create something new.
During research and analysis, as with many other things, it’s often better to pursue a middle course. You might first explore a new service and consider how it should work, then proceed by also studying your competitors.
Analyze about five similar services and document the pros and cons of their unique design solutions. Go through the main workflows of each app to separate the good ideas from the problems that make it harder to use the app.
3. Wireframing
Wireframes define the underlying structure, as well as the information hierarchy, for a mobile app’s design, as shown in Figure 2. They help determine the place of elements in a screen layout, which depends on how you would like users to perceive the information and helps prevent your missing anything at an early stage. Although wireframes support the application of visual design later in the design process, they do not specify an app’s visual design, colors, typography, or other visual elements.
Figure 2—Medium-fidelity wireframes for a mobile app
Working on specifications and wireframes in parallel is good design practice. Design is a visualization tool. While some ideas might sound good, they might not look good. Plus, better ideas might come to mind during the design process.
Creating wireframes doesn’t require much time—although the time it takes depends heavily on their fidelity. However, UX designers spend many hours discussing the requirements with their client and the other members of their product team.
Our Design team uses Sketch to create wireframes, then uploads them to InVision to make it easier for our clients to leave their comments and make suggestions. To simulate a working app and confirm the design with our clients, without involving developers, we also create a clickable prototype at the wireframing stage.
4. Usability Testing
Next, we test our clickable prototypes with real users. Because we test prototypes that are based on wireframes, our research participants aren’t distracted by colors or pictures, so they provide feedback on the app’s functionality, not how it looks. Testing our app designs lets us see which elements are unnecessary or would be unclear to users, indicating that we need to rethink them. We also do usability testing at the end of the design phase, if our budget allows it.
5. Visual Style
Once our client confirms the wireframes, the UX Design team works on the app’s visual style. They create a visual style for the product, still taking into account the business requirements and target audience. The team develop two or three visual concepts for the project, from which the client chooses one. Figure 3 shows two visual-design concepts the team created for Greenlight, a mobile-dating app.
Figure 3—Two visual-design concepts for an app
The UX designers work on form, lines, colors, and typography—which depend on the brand—create a mood board, and apply the design to three of the app’s main screens. If a client already has a ready-made brand book, including a logo, tagline, color scheme, and user-interface (UI) elements, the team’s job is to integrate them into the app design.
6. Design Style Guide
At this stage, the team goes through three steps:
Creating a style guide
Designing the app’s screens
Supporting the development team
Creating a Style Guide
We create style guidelines for each project, collecting all visual styles in one document and making them available to the developers. After all, developers have to convert these styles to code, so keeping things simple helps them a lot. Figure 4 shows the style guide we created for the Greenlight app.
Figure 4—Style guide for Greenlight
If you’re working on a large-scale project that requires the involvement of several UX designers, you’ll need to create a design system—to optimize the design process and ensure high-quality versions of the product in the future.
Designing the App’s Screens
The UX Design team designs all of the app’s screens, as shown for Greenlight in Figure 5. This means depicting all possible states of all screens—for example, showing how an empty news feed looks right after signup or what error message appears when a user provides incorrect data. If the app displays articles, show examples of both long and short headlines.
Figure 5—Screen designs for Greenlight
Sometimes the UX Design team starts designing screens simultaneously with the beginning of the development process. Thus, at the end of a sprint, the client can test the app on their mobile devices.
Supporting the Development Team
The client must approve the final version of the app’s design before we hand it over to the developers. We use Zeplin as our primary tool for collaborating with the Development team.
At this point, the UX designers switch to a supporting role. If the developers need anything—such as an error message, icon, font, or another widget or graphic-design element—or any design-related questions arise, the designers handle it. Often, the UX designers might still be supporting a recently completed project as they begin working on a new one.
Conclusion
Involving an entire team—including the business owners—in the design process gives you a high chance of creating a beautiful, engaging product. After all, UX design requires making decisions that are based on your understanding of both user and business needs—and you must satisfy those needs. That’s why immersion, research, and usability testing are crucial stages that you should never skip or give short shrift. No matter whether you’re working as a freelance UX designer or you’re a part of a product-development team, you should always endeavor to maximize the impact of UX design.
As a technical writer at Cleveroad, a mobile Web-development and design company in Ukraine, Vitaly focuses on content-marketing strategy. His interests include UX design, digital transformation, and marketing. He earned his Bachelor’s and Master’s degrees in English Language and Literature from Oles Honchar Dnipro National University. Read More
