How to Hire a Good UI/UX Agency and Get a Transparent Design Estimation
Senior UI/UX Designer at MobiDev
It's not always easy to find a reliable UI/UX agency and get a transparent design estimation for a project. Saying: "I want to make a UI/UX design for my software product. What's next?" - that's not the right question. The story often begins with: "I'm looking for a software to be developed, so let's start with the UI/UX design stage and see how it goes." That's what our clients are often looking for. And UI/UX stage estimation is what our experts start with. Let's see how it goes in my experience.
Working as a UI/UX designer, I realized that the main problem of all deadlines and budget failures is the lack of information. Either it's estimation, or delivering UI/UX. To give you a better understanding of what I mean, I'll tell you my own true story.
Once I renovated my house. I found the renovation firm, called them and described what I wanted. According to the information I gave, the foreman estimated plastering and wallpapering time frames for one week. Then we set up a meeting at my house to estimate the number of building materials and sizes of the rooms.
When discussing all ideas I wanted to realize, we discovered that all the renovation process should also include interior design, demolition, plastering, gypsuming, painting, wallpapering and finishing work. Thus, the entire renovation time frames grew into three months. As a result, in three months I received not just a newly wallpapered house, but a well-designed space that fully met my expectations. My sense of satisfaction was over the moon.
Similar things happen in the UI/UX design process. When UI/UX experts make estimates they consider such design matter tasks that may not be obvious.
My goal is to tell how to get the most transparent UI/UX estimation so that to plan the time and budget clearly and count the entire software development costs. I truly hope that by the end of reading this article you will be on the same page with those who "think with screens". Let's go through the step-by-step UI/UX design process in order to understand how to get a project delivery on time.
Step 1. Provide Required Information to UI/UX Designer
Here are some of the questions, UI/UX design agency would definitely ask you:
➢ Are there any existing design works to continue working on or should a designer start from scratch?
➢ What kind of software do you want to build: mobile app, desktop app, web app/site?
➢ What tasks will your software perform?
➢ What is the environment of your software: where and when will it be used?
➢ What functions/features should definitely be included in your software?
➢ What software technology stack is required for the project realization?
➢ Do you have any examples of similar software products within your domain area?
The data you provide is a basis to start an estimation. All of this information will be requested by the UI/UX expert for the design stage estimation.
Some clients have the specifications done. Even with some of the UI/UX design elements, like a brand book. In other cases, a sales manager may assist with creating an initial specification to start with. For most complex software, there's a separate business and technical analysis stage to create the spec.
Step 2. Choose UI/UX Estimation Type
Once you provide information to the UI/UX designer, the next step is to choose an appropriate estimation type. Based on the amount and context of the input information, the most frequent UI/UX estimations I've ever done are:
✓ ROM Estimation - "Rough Order of Magnitude" - an estimation that will have an accuracy of +/- 50% from the total hours. This estimate type will give you a ballpark number instead of an exact figure. ROM is a quick estimation with the minimum input information.
✓ Precise Estimation - an estimate with an accuracy of +/- 25% from the total hours. This is a good choice for projects with an already existing scope of work. Estimate still supposes +/- 25% inaccuracy due to requirements and functionality changes and improvements.
Designers "think by screens" - this is the main difference between UI/UX design and software development estimations.This means that the UI/UX designer visualizes data by flowcharts and decomposes it into modules and screens. Data visualization helps to get to project details even with the minimum input information.
During the data visualization step, the UI/UX expert communicates with the client many times. The more questions they clarify, the more accurate UI/UX design estimation will become.
!Remember: Software technologies allow the creation of brilliant things but only after the ideas are well-analyzed. While making a design estimation, UI/UX design agency together with a client analyze ideas through visualization examples and discuss different design approaches. This process helps to get a general vision of the future software product and plan time and budget for post-design stages ahead. That is why it is so important to pay sufficient attention to UI/UX design.
Step 3. Estimate Each UI/UX Step
Although UX/UI design supposes creative thinking, a designer's work usually has a logical structure. Every software product design, either a mobile app or web-based one, pass through the following flow:
1. Sketching - takes 5-7% of the total estimate. UI/UX designer explores the system and related requirements, does navigation and style draft sketches. This step also includes a user portrait creation and high-level shifts among screens.
2. Wireframing - takes 60-70% of the total estimate. UI/UX designer creates a User Experience. The more complex a system is the longer the wireframing stage will take. Sometimes designers involve software developers at this step. Together they outline logic for the future product to avoid possible mistakes while developing the software. By doing this at the wireframing stage you save 10 times more time and budget then at the software development stage. Wireframes may also be taken as a specification for further development.
3. UI Design - takes 30-40% of the total estimate. UI/UX designer customizes visualizations, colors, fonts, icons, illustrations, etc. So-called "Cleaning and Beautifying" step.
4. Slicing (preparing for development) - takes 10-50% of Wireframing + UI Design steps sum. This step is estimated only after the design flow approval. The time frame of this step depends on the number of screens, UI elements customization or used libraries, the technology chosen for development. The more complex the UI design is, the longer the slicing step takes.
In my experience, all classic estimations have more or less similar flows. But each project has its own flow specifics. Let's review UI/UX estimations for each project type.
UI/UX Estimation for Mobile App
When you've already decided to build a mobile app, it's time to understand what software technology stack will be used. It is a crucial thing for UI/UX agencies because the time spent on the project's UI/UX directly depends on technology.
Mobile products types:
1. iOS and Android Native Apps
The case is to design two different apps: iOS and Android native. UI/UX designers often make a full estimate of the iOS app first. Then based on the numbers, they calculate the UI/UX design porting for Android. Wireframes are made for both platforms because of different UX principles. Porting takes on average 50% of the received value from the first platform design estimation.
2. Cross-platform Apps
Cross-platform mobile technologies adapt UI/UX design for all platforms through software development methods. There is no need to design for each platform. UI/UX is made for one screen resolution and then cross-platform frameworks like Flutter, Xamarin and React Native, adapt it for necessary platforms. At the software development step, developers use cross-platform technology to write code once for both Android and iOS.
When a UI/UX designer knows the technology that will be used he/she understands:
• What limitations to cope with.
• How much time preparation and implementation will take.
• What Do's and Don'ts to take into account.
Below you can view the example of mobile app estimation document:
UI/UX Estimation for Website and Web App
By default, web development includes UI/UX design for both desktop and mobile devices. Depending on the requirements, UI/UX agency experts choose the working strategy: mobile-first or desktop-first version.
Below you can view the example of website estimation document:
Finally, once the UI/UX designer has already learned the software requirements, outlined and approved the screens scheme, the estimate will be divided into desktop and mobile versions, where the mobile version takes about 25% of the whole time spent on the UI/UX design.
Sometimes it's necessary to make a design additionally for tablets. If it's possible to adapt the design through software development tools, UI/UX design stages will take less time. Finally, once the UI/UX designer has already learned software requirements, outlined and approved the screens scheme, the estimate will be divided into desktop and mobile versions, where the mobile version takes about 25% of the whole time spent on UI/UX design.
UI/UX Estimation for Complex Software
WebRTC for smart home products, healthcare solutions, wearables & industrial IoT
This method helps not to get lost in huge and complex flows.
Below you can view the example of complex system estimation document:
Such project estimations take twice as long as web or mobile apps due to UX design complexity. High two-way communication is vitally important here.
When UI/UX designers make an estimation for complex system software they should totally understand the requirements. The more details they know, the less risk of re-estimation will happen later. To avoid risks, it is advisable to involve a business analyst.
The percentage ratio of UI to UX changes in such cases. Complex system software should be easy to use, user-friendly and responsive, despite often complicated business logic. The most appropriate ratio will be UX - 70% and UI - 30%.
When making the wireframing stage estimation, UI/UX designers certainly involve software development experts. Together they build a visual architecture for a future complex system software. It helps to make a more precise estimation of time, avoid unexpected mistakes at UI and software development stages. Moreover, developers can use wireframes further as a simple and understandable specification.
UI/UX Estimation for Particular Cases
Every project I join as a UI/UX expert is unique with its own business ideas, features, and style. Still, some projects require non-standard flows, compared to mobile and web software solutions. Designing Augmented Reality features, POS system or smart house operation panels are such cases.
Such software estimations have additional flows. This does not always increase of UI/UX estimation numbers. It means that all the additional product features should be taken into account while making a UI/UX estimation. If you have additional software requirements beyond the classic scope, you have to provide as much descriptive information to UI/UX designer as possible. Otherwise, it will be impossible to make an accurate UI/UX design estimation.
Example of the Augmented Reality App Estimation:
You want to include three screens with Augmented Reality into your app. In that case, the whole UI/UX estimation, excluding these 3 screens, will look like a classic UI/UX estimation for mobile app. These 3 AR screens should be estimated separately.
When applying AR, we should fully understand what exactly users should see on mobile displays: interface, 3D models (and how many), animation, etc. Every AR design activity should be estimated separately because the number per one screen may vary significantly during the workflow.
Below you can view the example of UI/UX design estimation document for Augmented Reality:
To sum it up, any UI/UX design process consists of four simple stages. Sketching, wireframing and UI design are necessary stages in most cases.
All, that should be done, is a requirements adjustment for a system of UI/UX design estimation. I've described the approach to project estimation that works best for me. This allows me to work transparently with MobiDev clients and avoid risks related to project time and budget.
By Oleksii Ostroverkhyi,Chief Commercial Officer at MobiDevProvision of software development services is a growing industry... more →
February 11, 2019
Client: US-based startup that works in the music sphere Business goals: Attract investors with a working beta for subsequent... more →
Effective UI/UX design is directed at needs, wishes, and limitations of end users. That's what you must keep in mind when you... more →