Reducing Design Debt on your Website or App

Do you have design debt?

Reducing Design Debt.

Design Debt is the idea that the more inconsistencies you have in your website app or branding, the more it affects the integrity of the experience with your product.

This applies to any company, including a small business.

The last two companies I’ve worked for, one being an amazing airline and another a software company both had ZERO digital brand guidelines in place.  One of which had BRAND guidelines but nothing about how the rules on how the company should be represented online.

This is important because of Design debt.

Design debt affects your business because it means more money and time is wasted making decisions that should be made with a reference guide. Every good designer should want to simplify and streamline their process on-going, making it easy for anyone else to pick up and continue the ‘design vision’ for the product.

Every business starts out with no Design debt and starts picking up these errors due to inconsistencies within a team or during a handover when an employee leaves.   If there is no shared vision for the product or a place to reference this shared vision, it soon becomes problematic the longer the product goes on without one.

There is also the case of having to repeat the research and rationale phase of these decisions.

Example:
The example below can be provided in the guidelines alongside a rationale.  The decision to remove the asterisk from mandatory form fields means that users do not see a form filled with these highlights.  Rather, we notify the user of ‘optional’ fields when in the rare occasion there is one.

Form UX.

If small decisions like this are to be made with every project a company begins, than the cost of efficiently delivering and ensuring a consistent user experience starts to diminish.  Often it is not until a user begins to use multiple products overtime that they begin to see the flaws and increased learning curve required to master a product or nagivate a website.

 

Where does it show up?

It can show up with things like buttons, fonts, or behaviours – like the way your pop-up appears on different pages.  Sometimes it’s something as simple as where you place your logo.  Do you have it on the left of some pages of your site, then right on others?

So how do I start creating this Digital/Product Guideline?

Digital Guidelines = Websites or a more generic term for any company brand stuff online.

Product Guidelines = Specific to software.

Here are just a few items you could start to define your guidelines and reduce your design debt to make life easier not just for you, but for your users!

  1. Colours (what are the key colours you use and what do they indicate to the user?  buttons, alerts)
  2. Icons (does the edit icon always look the same?) . Which library do you use?
  3. Writing Style (What’s your call to action to convert?  It it always ‘Book now’? or ‘Sign in’ vs ‘Log In’?
  4. Forms (is the way the fields presented always the same? How about the ‘Submit’ button, is that always on the bottom left or right?)
  5. Typography (Are your fonts always the same !  Check website, the product or software, email signature and business cards)
  6. Status types (For software especially, what colour is your ‘in draft’ vs ‘published’ view?  Are they always the same?
  7. Header
  8. Breadcrumbs
  9. Pagination
  10. Logos
  11. Messages
  12. Date/time

 

It can start looking like the below and can quickly become pages long to define how all of these elements SHOULD and SHOULD NOT look.

Style Guide Design debt 1.

Style Guide - Design Debt.

Alongside any project that I work I, I create and then upload this style guide to Invision which allows me to directly share the HTML/CSS code with developers who use it to build the design.  This can then be handed over to any designer to continue building upon this vision to reduce design debt.

Style Guide Invision.

 

It also helps to have this guide available online.  Here are a couple of ideas on where to place it:

  1. a sub-domain.  Something like design.yourdomain.com  preferably password protected.
  2. confluence – if your company has this great tool, make it available to everyone who is part of your team
  3. PDF – just ensure it gets around to those who will need to refer to it

 

With these guidelines in place, you will be well on your way to reduce and eliminate design debt.  Ensure you communicate these guidelines to the team and ensure there is someone who enforces it to keep your brand and product design protected.

Stay informed,

Tania Richardson web designer.

Author avatar
Tania
https://taniarichardson.com
15 years as a digital designer. Author and Director of Richardson Creative, that helps start-ups and large organisations use design and data to design the best online experience for their business.