How We Create UI/UX Design at Cleveroad

359 Views
|
17 Mar 2020
|
6 min
author avatar
Katherine O.
Copywriter

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.

Table of contents

How do we develop an excellent UI/UX design at Cleveroad? Let’s single out the stages and explain the design process in detail.

Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.”
UI/UX design process at Cleveroad

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?
Want to create a UI/UX design?
We can help you out! We have 5+ years of experience in creating interfaces for different industries.

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 Human Interface Guidelines (iOS) and Material Design Guidelines (Android).
  • Max time: design has custom-made solutions. Designers create unique UI, making all the elements bespoke.
Rough estimate of UI/UX at Cleveroad

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:

Project requirements

Our Business Analysts collect the customers’ requirements and discuss the app’s functionality.

User behavior

It allows highlighting the users’ needs and expectations. Also, our designers imagine how users would act with an app.

Competitors

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

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.

InVision

As for InVision, we use this tool for prototyping. Also, InVision allows sharing the project with a customer and getting feedback.

UI/UX design process: Wireframes

Wireframes

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.

UI/UX design stages: Visual style

Visual style of GreenLight

Step 5. Design

This stage consists of three parts:

Creating a style guide

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.

UI/UX design process: Styleguide

Styleguide of GreenLight

Designing screens

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.

UI/UX design process

Design concept by Cleveroad (Source: Dribbble)

Handing over the design to developers

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.

Would you like to see more of our designs? Look through our portfolio! Also, feel free to check our Dribbble and Behance accounts to study our designers’ works.

Need an excellent UI/UX design?
Book a meeting with our specialists and get a FREE consultation.
Rate this article!
An image
An image
An image
An image
An image
(25 ratings, average: 4.5 out of 5)
Leave a comment
An image
Your message is checked by the moderator and
will add to the site ASAP
Latest articles
Article preview image
Choosing the right fonts for a project
Calendar icon
02 Jul 2020
Clock icon
7 min
Article preview image
All you need to know about a design concept
Calendar icon
01 Jul 2020
Clock icon
7 min
Article preview image
How we developed Vottelo
Calendar icon
01 Jul 2020
Clock icon
5 min
Back to top