Image Visualdesign1

6 tips on designing for existing digital products

Post Series: UX BLOG

Just landed a new visual design job working on an existing digital product? Implementing design changes while maintaining a visual cohesion during the design evolution can be tricky. Here's some tips on how a new designer designing for an existing digital product can keep the balance.

1. Designs that go into the LIVE site/app must maintain existing consistency

  • Respect the existing LIVE design elements, including seemingly small things (e.g. round corners (and header colour), these actually have a huge impact because they are everywhere on every page and form the foundation of the visual consistency)
  • Every page redesign should look like it is part of the exiting LIVE site/app

2. Message Pages and Banners are ripe for design experimentation

  • Error pages/Confirmation pages/etc
  • Message banners, pop ups
  • As long as the basic/foundation elements (as mentioned above) stay consistent with existing LIVE elements (e.g. body font and colour, round corner size, etc.)

3. Emails are a designer's playground for innovation

• The email style is where a designer can experiment with new styles to possibly incorporate into the products (as long as there are some visual connections to the product and brand (logo, search box, etc)
• Check any usage data on the email elements to define any that have high usage – you might want to leave these elements as they are (e.g. the header)

4. Using design to introduce delight

Think “New Element Vs Existing – if your designing a site/app new elements, this is an opportunity to introduce something ‘visually new’. However, if you are designing an existing element, you need to keep it consistent with existing styles across the site/app. To change n existing visual element site-wide, you can look at doing this via the Style Guide Review (see below)

5. The Style Guide is where you introduce/champion ‘radical’ changes

• ‘Radical’ changes are ones that have a site-wide impact (e,g, round corners, link decoration, header colour) and/or impact usability/readability and/or expand on the visual branding
• Developing the style is when we can explore how these changes work across the site, in all their different situations/variations
• Always bring it back to site-wide cohesion

6. When in doubt, and as last considerations...

  • When in doubt, compare your new design elements in situ and ensure a visual consistency is maintained
  • Remember, the visual design of a product should facilitate a smooth UX, not distract Users by screaming ‘look at my design’. Messaging and functionality are the main considerations for the User Experience. Beautiful, functional design sits back a bit and facilitates the User’s journey, and surprises with moments of delight
  • Ask yourself, what is the business need and the user goal of this page/element, and what solution best solves these two in balance?

In summary:

  • As you start designing for the sit/app, respect the existing design elements, especially the small but site-wide elements, such as round corners and font-sizing, to maintain cohesion
  • When you must redesign an existing site/app element, think “New Vs Existing” – new elements are an opportunity to introduce new design elements
  • As you get to know the product/review the Style Guide, and use this process as a means of implementing ‘radical’ changes, so that when these changes are implemented into the LIVE product, they have been well-though through
  • In the mean time, experiment with design ideas and innovations via the products emails (if any) and message pages(error message, confirmation page,etc) – these are your playground
  • When in doubt, compare your new design elements in situ and ensure a visual consistency is maintained

Leave a Reply

Your email address will not be published. Required fields are marked *