How We Create UI/UX Design at Cleveroad
An attractive and user-friendly design means a lot for app success. Users are quite demanding these days, so the UI design should be eye-catching to capture their attention and the UX should help them solve their problems fast. In other cases, they may close the app and never come back. The primary purpose of any UI/UX designer is to create a good-looking and intuitive interface.
How do we develop an excellent UI/UX design at Cleveroad? Let’s single out the stages and explain the design process in detail.
5 main steps of UI/UX design at Cleveroad
Step 1. Immersion
To develop an attractive and functional design, Business Analysts and designers have to study business goals and project requirements.
As a result, the first stage of the design process is the immersion into the client’s business.
We look for answers to the following questions:
- What are the client’s company goals and mission?
- How does the business get revenue?
- Who is the target audience?
- What are user expectations?
- What are the app’s goals and tasks?
- What are the users’ problems that we need to solve?
- What are the required features of the app?
During the immersion stage, designers cooperate with the Business Analyst Department. These specialists hold several meetings with the client to figure out project requirements. The primary purpose is to create a list of features.
Also, designers make the rough estimate. It stands for the time required to create a design for the project. The rough estimate consists of two numbers — min and max time and its accuracy varies from 25% and 75%.
To calculate the design time, we use two numbers:
- Min time: design consists of native components of the operation system (iOS or Android). Such design consists of standard buttons, images, and other elements recommended by (iOS) and (Android).
- Max time: design has custom-made solutions. Designers create unique UI, making all the elements bespoke.
Rough estimate of UI/UX design
Step 2. Research
After the immersion stage, the design team moves on with the research. They study the following aspects:
Our Business Analysts collect the customers’ requirements and discuss the app’s functionality.
It allows highlighting the users’ needs and expectations. Also, our designers imagine how users would act with an app.
Our specialists look through the existing tech solutions on the market. They study the used elements, colors, and so on. It allows us to make the design better and more appealing.
As a result, we create a detailed specification. This document describes the demanded technologies and tools to develop UI/UX design.
IMPORTANT! The customer needs to approve the specification before design team moves on.
Step 3. Wireframes
The next step is creating wireframes. They stand for a schematic representation of the future interface, showing the significant elements of the app.
Wireframes allow seeing the use of various screens and their connection. As a result, customers understand the application structure and navigation. Also, designers place all the interactive elements on the wireframes. They are buttons, links, forms, and others.
Our UI/UX design team typically uses two tools to create wireframes — Sketch and InVision.
Sketch is a graphic editor for macOS. It allows creating great design for web and mobile apps (both iOS and Android). We use Sketch to develop wireframes.
As for InVision, we use this tool for prototyping. Also, InVision allows sharing the project with a customer and getting feedback.
Creating wireframes doesn’t require a lot of time. However, designers spend a bunch of time discussing the requirements with the client and rest of the team. After creating wireframes, the client either approves them or asks for making changes. Afterwards, we can proceed with a detailed estimation. It’s an accurate time required to build the design (according to wireframes).
So, wireframes spell out how the future project will look like.
Step 4. Visual Style
During this phase, UI/UX designers create a visual style of the app taking into account the business particularities and target audience.
Our designers team to develop two or three visual concepts of the product for the customer to choose from.
They pick the appropriate colors, fonts, and other graphic elements. Also, we create a moodboard of the project and design three main screens of the application.
If the client has a brandbook (logo, tagline, color pattern, and UI elements), the design team considers this and integrates them into the design.
Simply saying, a visual concept is the design of the same app screen with various colors, fonts, and styles.
Below you can find two visual concepts of GreenLight, a social dating platform we've developed recently.
Visual style of GreenLight
Step 5. Design
This stage consists of three parts:
In case of the big project that requires several UI/UX designers, we make a style guide. This document consists of all app elements, so it’s easy to adhere to the chosen style. Also, the style guide makes the work of software developers easier as they don’t have to ask designers about details.
Styleguide of GreenLight
Our specialists prepare all the screens and their possible conditions. After that, designers can create a clickable prototype.
IMPORTANT! The customers should approve the design before moving to the next part.
Design concept by Cleveroad (Source: Dribbble)
After creating the design, the design team passes it over to developers. We use Zeplin as a primary tool for handing over. Software engineers can start the development process. They develop app functionality, both front-end and back-end parts.