Design Budgets

BlogHeader DesignBudgets

Depending on the type of client you’re working with and the budget size, some things are going to be higher up on the priority list in regards to others. When you need to do a design project on a budget, keeping control of the spendings is vital to ensure a healthy percentage of ROI (return on investment). 

Even if you have a small budget you can still knock a project out of the park and create an impactful design for the user if you decide to follow along. So it is not a question of how to break the small design budget barrier but instead how to embrace the situation and pivot. 

How to design on a small budget?

To design on a small budget is not a small feat. Indeed, to keep within the constraints of your predetermined design budget you need to tackle some important aspects. These will, directly and indirectly, affect your project expenses whether you like it or not. So better to be safe than sorry.

Things to keep in mind when dealing with a small design budget:

  1. Manage Expectations
  2. Scope of Project
  3. Process and Strategy
  4. Project Management
  5. Team Communication
  6. Implementation
  7. Focus on The User

Follow along as we go through each of these steps so you can see how all of them are interrelated and how to make the most of it when designing on a budget.

Manage Expectations

The client brief and discovery session should answer all possible questions concerning the project that both parties might have. There’s no space for assumptions so they will need to be removed from the equation and replaced with specific and accurate answers.

speech bubbles

How to tackle the client brief and pave the way for a successful ongoing relationship:

  • Help the client get familiarized with the process and the development of the project.
  • Set up realistic expectations right away.
  • Don’t over-promise and under-deliver.
  • Address the immediate pain-points.
  • Show the client that you’re professional and serious while being friendly.

Helping the client understand what they are getting into and the project you are both about to embark on will help them feel assured and will remove buyer’s remorse. 

Define the Scope of the Project 

Project analysis and scope determination is something that needs proper attention if you want to ensure smooth project flow from early stages all the way to late-stage implementation and testing. 

magnifying glass over a square

Also, having a style guide to consult or reference during the project will provide you with the benefit of saving both time and money. It facilitates the sharing of resources and effectively streamlines the process for everyone included.

 A style guide will keep every team member on the same page instead of getting bogged down on the details regarding the visual side of things. That way the devs can spend more time working on implementing the design created by the UX designers. 

Having a Clear Process and Strategy

You will effectively eliminate expenses creeping up on you if you have a detailed process to rely on so you don’t waste your already precious resources on things that don’t matter. Employees, professional software, outside collaborators, project management tools, research staff, all of these count as resources.

Outsourcing some of your work can be an effective cost-cutting measure and will also free some of your in-house UX designers or developers to work on the more important stuff. It goes hand in hand with a smaller design budget project 

The Value in Effective Project Management

Managing the project every step of the way so that every department team is on track is even more important when working on a design project with a small budget. Not all people naturally possess organizational and time management skills.

So, having a DesignOps team to manage the design process within your company will result in higher efficiency and consistent workflow without any hindrances. 

In regards to project management, you will have to make plans with the DesignOps department about prioritizing certain tasks over others while still collaborating simultaneously with all sectors. 

When working with a small budget the one thing to keep in mind is the balancing act of delivering a product that doesn’t tip the scale between backend functionality and visual design. This ties in perfectly with the “don’t over-promise and under-deliver” advice we gave you earlier in the article.

Team Communication

Establishing proper team communication is also vital when you have a big design project and a small budget on your hands. Communication will keep everyone in the loop on every task that’s going on. Building rapport is also an important piece of the puzzle called team communication.

three speech bubbles overlaying each other

By the way, updating each other often when working on tasks so that the project is going in the desired direction is something you’ll need to get into the habit of doing. That is, if you wish to improve team communication.

Besides that, the hidden benefit behind great team communication can be the abundance of design ideas that can be produced organically and help you get a better and more polished final product.

Implementation 

It’s obvious – functionality is king whether you’re working with a big or on a small budget design project. But even more so on smaller ones because of the inability to spend money on extensive research. 

Know that you can’t kick a project back into the development cycle if things don’t go as well as expected. You don’t have the budget for it, so, make time count and make things worthwhile.

So, if you spend extra time on implementation rather than making a pretty design, it will give you that boost of confidence when delivering the final product.

Focus on the User

Although a small budget can pose a challenge, it shouldn’t dictate the process and direction of the project. Regardless of your budget, the focal point of every project is to create with the user in mind. 

If your plans are to make a significant amount of return of investment in a short timeframe, then user satisfaction in every aspect should be one of your top goals.

sketch of an eye

Work on CRO (conversion rate optimization). Heat mapping will give you an insight into how the users interact with your product and A\B testing will help you tailor the experience to your user as much as possible.

Summary

Let’s wrap it up with a few final notes. You can always add value to a project, regardless of the budget. Don’t forget to design and develop with the user in mind, even involve them in the design process They are the key to maximizing your ROI. User insight is the most valuable ingredient when working on a small budget design project.

And, always challenge yourself in all the different aspects of the project, while working within the constraints of the budget.

Have you ever had to work on a project with a small budget? What was your approach?

We’d love to hear.

UXPin Changelog November 2017 #18

Over past week and a half, we’ve released several improvements to Design Systems, Editor, and overall app usability.

Sketch plugin 4.10

  • Updating colors and assets in Design System and Design System Library.
  • Creating Design System straight from the Design System Library panel.
  • Alignment issues for graphic elements imported from Sketch.
  • Hidden layers from Sketch are no longer exported as empty.
  • Symbols created in UXPin no longer disappear after re-sync with Sketch.
  • Sketch pages are no longer exported as empty parent pages in UXPin.

Design Systems

  • Ability to edit colors and assets in Design System Libraries and Design Systems.
  • Auto-adjustment of the Design System Library panel when switching from bigger to smaller screens.
  • Ability to create a Design System from the Design System Library panel. In the edit mode, the button will appear at the top right corner of a DSL window.
  • Button to update assets and text styles in Design System Library and DS is now shown on hover.

Editor

  • Automatic constraints for elements inside groups or symbols. The resize properties are set automatically in relation to the position of other elements inside that group.

Our Customer Experience team has released new a “Go to project” button:

  • Removed the “Back to Dashboard” button from the project folder. Now you can navigate to the list of all Projects/Groups by clicking on “Projects” tab in the Dashboard.
  • Updated “Go to Project” button on Preview and in the Editor.

If you’re interested in other improvements we’ve released in November, check Changelog #17.

Join the world's best designers who use UXPin.

Sign up for a free trial.

UXPin Changelog November 2017 #16

During the first week of November, we’ve released a bunch of small improvements to Design Systems including the following areas: fonts, color picker, and copy/paste for nested symbols.

In the UXPin Editor, we’ve added the possibility to drag and drop layers. We’ve also improved element selection in interactions. Details below.

Design Systems

  • Possibility to copy and paste symbols into a different symbol.
  • Fixed: stretching small images.
  • Improvements to updating text styles in Design Systems Libraries.
  • Fixed: applying text styles in Safari.
  • Font background color is now applied when you drag the style to canvas.
  • Changing the order of colors in Design Systems is reflected in the color picker.

Sketch plugin v4.9.2

This version of our plugin for Sketch comes with improved performance of exports.

Editor

  • Possibility to reposition multiple layers on the layers list.
  • Improved selecting elements when adding interactions.

If you’re interested in what we’ve launched in October, check Changelog #13, Changelog #14 and Changelog #15.

Join the world's best designers who use UXPin.

Sign up for a free trial.

UXPin Changelog August 2017 #7

UXPin changelog is our weekly series on all changes, improvements, and fixes we released the past week. If you’re interested in what we launched in August, check  Changelog #6 and Changelog #5.

Design Systems

  • Ability to change Design System name while creating it from scratch.
  • Adding custom pages to Design System documentation.
  • Top bar and left menu redesign.
  • Editing text styles and symbols – delete items and change names from Design Systems documentation.
  • Ability to get autogenerated specs for every UI pattern in Design System.
  • Ability to sort, rename and delete text styles and UI patterns.
  • [Performance] Extensive Design Systems (such as this one) loading time improvement.

Symbols

  • [Fixed] Copy/paste groups with symbols between prototypes.
  • Deleting documentation when the symbol is removed from DS documentation.

Sketch (Plugin 4.5)

Important: Plugin update mechanism will now be handled by Sketch.

  • [Fixed] Issue with grouped symbols not being added to Design System Library.
  • [Fixed] Applying gradients to elements from Design System Library.
  • [Fixed] Adding radial and angular gradients to Design System Library.
  • [Fixed] Issue where elements with fractional dimensions were not rounded properly when exported to UXPin.

Join the world's best designers who use UXPin.

Sign up for a free trial.

UXPin Changelog August 2017 #6

The changelog is our weekly post series on all changes and improvements, and fixes we released last week. If you’re interested in what we launched already in August, check last week update.

Design Systems Librieries

    • Reorder items in Design Systems and Design System Libraries with drag and drop.
  • Additional ways of presenting colors and assets in Design Systems for Sketch Design Libraries. Show colors as tiles or stacked and show assets thumbnails in one of three sizes: small, medium or big

Preview

  • [Performance] Lazy loading of comments to improve the overall experience while working with lots of comments.

Editor

  • Added ability to rename prototype inside Editor

Join the world's best designers who use UXPin.

Sign up for a free trial.

UXPin Changelog August 2017 #5

The changelog is our weekly post series on all changes and improvements and fixes we released last week.

Design Systems

    • Ability to edit Design System Libraries items from the Design Systems documentation:
      – add or remove a color or an asset or change its name
      – change the category name
    • Ability to simulate interactions for UI Patterns in the Design Systems documentation.

Design System Libraries (Sketch plugin v4.4)

    • Ability to change the order of the items in Design System Libraries.
  • [fixed] Newly added Libraries are by default visible on the list.
  • [fixed] Optimized assets size in the Design System Libraries.
  • [fixed] Symbols added to the Design System Libraries will be stored with their shared styles.

Symbols

  • Symbols lock improvements: lock dimensions of a symbol/group are ignored during resizing.
  • [fixed] Symbols are shown in search results in the Editor.

Security (Enterprise only)

Enforcing password to Prototypes Preview: only account owner can turn this feature on/off. Now the account owner can generate passwords for all prototypes, new and already created.

Join the world's best designers who use UXPin.

Sign up for a free trial.

UXPin Changelog July 2017 #4

Since our Design Systems launch, we have been working on a few major and many minor product improvements. Below you can see what our team achieved over the last six weeks.

Design Systems

  • Additional ways of presenting colors and assets in Design Systems
  • All assets can now be downloaded at once
  • Design System documentation is presented on separate pages instead of one. You can check how it works in the UXPin app
  • Additional styling options in Design Systems documentation
  • (Performance) Optimizing thumbnail size for Sketch imports
  • (Performance) Loading time improvements for Design Systems with many assets

Design Libraries

  • Ability to move items between categories in Design System Libraries with Drag&Drop
  • Ability to show and hide Design System Libraries using shortcuts (cmd+L for Mac and ctrl+L for Windows)
  • Design System Libraries panel in Sketch remembers its last position and size, even on different resolutions
  • New Libraries are visible by default
  • Color picker shows colors from the last opened Design System Library

Symbols

  • Ability to apply/clear single overrides for symbols. Now, when you have multiple overrides in a symbol, you can select overridden element inside the symbol and choose the desired action
  • Cloning symbols (basically it’s duplicating and detaching at the same time)
  • Detach button is inactive when the symbol was already detached
  • Improved way of resizing nested groups and symbols
  • Enhanced flow for deleting symbols: local properties of a symbol are cleared after deleting the last instance of the symbol from the canvas. Once you drag the symbol from the Design System Libraries again, it’ll have its original form.

Preview

  • Page scrolling is now running at 60fps (unfortunately, due to browsers technical limitations, at the moment it’s not available for pages containing sticky position elements, with zoom set at 100%)
  • Removed memory leaks when changing pages

Join the world's best designers who use UXPin.

Sign up for a free trial.

How to Quickly Animate a Photoshop Mockup Into a Prototype

Moving a user from one place to another in your app shouldn’t be like an afternoon stroll with no particular destination in mind. There is a goal for both you and your users. And you’re trying to move them as effortlessly through your app as possible.

With that, you’ve likely mapped out as many potential flows for your users. You’ve likely even mocked them up visually in Photoshop. But it’s not enough to create a series of static screens to illustrate a flow — say filling out a contact form — then expect them to work.

You’ll want to see it in action. In this post, we’ll show you how to create an interactive user flow so you can give it a test drive.

Continue reading How to Quickly Animate a Photoshop Mockup Into a Prototype