How We Create UI/UX Design at Cleveroad

154 Views
|
17 Mar 2020
|
7 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.

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 buttorn, 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.

!

The customer needs to approve the specification before the 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.

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.

!

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.

Our Expertise

We’d like to share two of design projects — LetsSurf and RetailOps. Our team has fulfilled the whole process of design and development. Below, you can find their wireframes and ready design.

LetsSurf

LetSurf is a robust platform that connects surf enthusiasts with instructors. We’ve developed a website coupled with iOS and Android apps.

The design team has created an attractive design from scratch, following project requirements and meeting deadlines.

We designed various screens like Registration, Chat, Map, according to the latest design trends. Also, we chose a blue color as the main one to highlight the surfing mood.

Wireframes & Design

Wireframes and ready design of LetsSurf

RetailOps

RetailOps is a powerful SaaS platform for back-office tasks available on iOS.

Our team redesigned the app since it was old-fashioned and had an iOS 4 interface. The design team created a user-friendly design. We used Sketch to build wireframes and screens along with Zeplin to share the design with the customer and developers.

Wireframes vs ready design

Wireframes and ready design of RetailOps

Would you like to see more of our projects? 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 imageAn image
Bad!
An imageAn image
Strange!
An imageAn image
Boring!
An imageAn image
Good!
An imageAn image
Love it!
(19 ratings, average: 4.5 out of 5)
Latest articles
Back to top
As s part of our team, be ready for:
An image
Competitive Base Salary
An image
Comprehensive Benefits
An image
Great Work Environment
An image
Drug Free Workplace
Tell us more about yourself