How Much Does it Cost to Create UI/UX Design from Scratch

Key takeaways

• The cost of the UI/UX design and the timeframe depend on many factors and can vary from $5 000 to $10 000.
• The key factors are feature planning, number and complexity of features, visual complexity, and the design team’s expertise.
• To estimate the design cost for a particular project, you need to plan out epics and user stories, calculate the amount of time spent on designing every step of the user journey, and multiply it by the team hourly rate.

What makes up the cost of UI/UX design

Whether you’re making an app focused on breathing techniques or a website for tourists, UI/UX design cost is calculated in a similar fashion. When talking about the price, there are several key factors at play: feature planning, number and complexity of features, complexity of design elements, the design team’s expertise. Let’s take a closer look at them — keep in mind that the first 3 factors are specific to the app design cost:

Factor 1. Feature planning

When a startupper comes to a design agency to create an app, it typically goes two ways.

• A startup founder already has a clear vision of the app and knows what features to include.
• A startup founder has nothing but a vague idea for an app.

In the second case, designers have to map out the user journey and determine features to include. They also have to outline the logic of each feature. For example, define how payments are integrated in the app. Finally, the team will need to get the client’s approval. An agency will have to spend extra time for that so the app’s design will cost more than in the first case.

When developing PetBuddy, our client had vague ideas about features she wanted to include. We had to map out the app and think over the logic of every feature — like this chocolate calculator. It took us some time

Thus, feature planning is the very first stage of the design process which influences its cost.

Factor 2. Number of features

More features in an app means more screens to design — it takes time, which is why it drives up the design cost.

Let’s compare two apps that we developed at Purrweb: an app for pet owners and an ecosystem for nightclubs. The latter cost more to design as the app included way more functions and users roles.

The PetBuddy app required the design of screens for a single user role

The nightclub ecosystem took more time to design simply due to the sheer number of features and user roles it has

Factor 3. Feature complexity

When talking about UI/UX design of an app, certain features may be more difficult to implement than others. This makes them more expensive to design.

For example, think of an education-based app. Motivating customers to keep studying after each lesson can work two ways in similar apps:

• You can show a screen that congratulates the user and simply tells them to continue.
• Or think of gamification — integrate calendars with progress trackers, game characters, and the like.

The latter requires additional screens and resources to map out its complex logic, so the design costs more.

Certain e-learning apps, like Duolingo, have quests and complex reward systems to keep users motivated. Designing them takes more time than creating a single “Congratulations!” screen — and costs more

Factor 4. Complexity of design elements

Style and aesthetics are a crucial part of UI/UX design cost. Its price will differ if a product or a website is either minimalistic or jam-packed with design features, complex animations, and interactive elements. Here’s a table showing the difference in visual complexity:

We worked on two apps with different visual complexity of design: Breathmethod and a medicine delivery app.

Breathmethod is a meditation app focused on breathing practices. The general look of the app needed to have a certain effect on the users: calm and tranquility. To achieve the goal, we integrated photos, created animated elements and icons, elaborated a suitable color palette — and came up with the app branding from scratch.

The Breathmethod app design

On the contrary, the medicine delivery app’s design is neutral. It has simple icons, monochrome color palette, and a standard layout.

The medicine delivery app design

Factor 5. Expertise of your UI/UX design team

When you look for a team to create your website’s or app’s design, you’ll notice that there are many vendors ready to offer you their services. The website or application design cost differs vendor-by-vendor — it’s undeniable. Here’s what it’s dictated by:

Experience. How many years has the team been working on UI/UX design? If an agency has a solid track record, chances are its services will cost extra. It’s still a good deal — the fact that they have many successful projects increases odds that your case is going to be among the ones that worked and earned their founders money.

Type of agency and partnership. The price for design services  depends on the type of hiring and can vary wildly. A freelance designer may take less money but there is no guarantee that they will provide high quality. An in-house team can create a great and efficient design project, but it will cost plenty — the company has to find and sort through candidates, onboard new colleagues, and manage staff. An outsourcing design company strikes a balance in terms of price — yet it delivers solid quality which users adore. You can read more on how to hire app designers in the article below.

If we’re talking about outsource partnerships, the cost is typically defined in the contract. There’re hourly rates, which are considered the gold-standard of the industry of web apps.

How to estimate the price of a UI/UX project

As we’ve mentioned, there are several factors at play when we talk about the price of design. As for price estimation itself, here’s the approach that we use at Purrweb. It allows us to estimate the price of an app’s or a website’s design.

Step 1. Plan out epics

An epic defines one of the steps of a user’s journey. Planning it out is done after the market research and gathering the info needed to make a design project. With epics, designers and project managers can visualize generally the way a user is going to navigate websites, mobile or web apps.

For example, think of a fitness app — we created one at Purrweb. It can have several epics: registration, a homepage with necessary features, and more.

Authorization is a large part of user experience. It’s a single epic, and it can encompass several screens

Step 2. Identify user stories and states

At this stage, a project manager “divides” each epic. User stories are steps of a user’s journey, too — but they’re more specific, and they help outline which features to implement in an app. With their help, you can also estimate how many screens you’re supposed to make, and how complicated they’re supposed to look.

Let’s return to the fitness app. In the “Homepage” epic, you may want to create such user stories as starting a workout session, checking the calendar, seeing different programs, etc.

From the Fitness app homepage (on the left), a user can review other training sessions (on the right) — this is one of the user stories inside the homepage epic

Step 3. Estimate a timeframe

Finally, a business analyst and app designers estimate how much time it will take to design each screen or page — keeping epics and user stories in mind. They identify the number of hours to map out user flow, create wireframes (barebone versions of screens), and address all states.

States of a feature define how it may work in different scenarios. For example, for a registration feature, the developer not only has to think about what happens if the user types a correct login, but also needs to consider if the user inputs a wrong password or leaves the form blank.

This timeframe is multiplied by an agency’s hourly rate — that’s how you get the price for an iOS or an Android apps’ design. An approximate estimation breakdown looks like this:

Basically, epics are features described in broad strokes. User stories flesh this info out — they describe in depth each action the user can take in the app

You don’t have to go through this time consuming process of calculating the price yourself. Purrweb will do it for you, free of charge. If you’re looking for a project manager, business analyst, or a designer — contact us using the form below.

Steps to create UI/UX design

Each company has its own process of creating UI/UX design. At Purrweb, we’ve completed over 300 projects over 8 years, including iOS and Android apps. So we’ve streamlined the process of design in order to complete it in the most time-efficient manner possible. You can adapt it for your own app development team — or you can hire us.

Here are the necessary steps to create UI/UX design in a designated timeframe.

Conduct market research and competitor analysis

Our clients come to us with an idea of what their app or a website is about. But oftentimes they have no idea what the market’s like. This is where we can help — we can identify our clients’ target audience, or analyze other businesses in their niche to determine their strengths and weaknesses.

Gather references and create a mind map

We ask our client to find some examples of UI/UX design which they either love or dislike. This way, we’re on the same page regarding our clients’ app and website design — there won’t be unnecessary changes along the way which drag the process on.

This is also the stage when we define features the app will have and create a mind map. The mind map shows how the app is going to work, and how users will navigate it.

A mind map for one of our projects — we usually create them in Miro

Create wireframes

They’re created to figure out where to place the content on a website and certain features in the app. Wireframes can also help to imagine how a website or an app will look like. Although you can’t test the wireframes with real users yet, still you can gauge the first impression of the app’s or website’s usability.

Wireframes help visualize where each feature should be placed in an app

Make a solid design-concept

We pick 3-4 screens and flesh out their design to visualize a core user journey through the app or website.

The design concept is the stage when we get the final agreement on the design look and feel.

Design-concepts often differ from wireframes — they look more complete

Create prototypes

Clickable prototypes allow us to test how the interface will perform and conduct UX research.

Finish the design and create a UI-kit

The result of the step is beautiful clickable prototypes and a UI-kit which we present to the client. At this stage, we explain certain design choices to our client: e.g. why we chose a particular font or a button design. The finished design can be passed over to developers or investors.

The design of the Cryptowallet app. The finished design can be passed over to developers or investors

How long does UI/UX design take

Wonder how much time this UI/UX design process takes? Let’s take a look at an approximate timeline:

At Purrweb, we create a fully-fledged UI/UX conceptual design in about 1,5 months. In the end, the client gets a solid design of the final product.

We executed this process while designing Fintarget — an app for beginner investors. The owner already hired a developer team, and the only issue was UI/UX design — we helped them with that. We implemented several features: authorization, user profiles, and investment strategy search. As a result, the owners got a web app and the mobile app version of the design. It took us 1.5 months.

In 1.5 months, we completed the design of the registration page, a user profile, and an investment portfolios section

Conclusion

If you have an idea which you think will conquer the market, and you want to calculate the price and timeline of your project — contact us in the form below. We’ll get back to you in 24 hours.