The Portfolio

When portfolios were leather bound, designers carefully selected work to present.
Online portfolios are often a frustrating rummage through an “image dump” of similar sites. So, here’s specific examples of design goals being met.

Review My Site >

When portfolios were leather bound, designers carefully selected work to present.

Online portfolios are often a frustrating rummage through an “image dump” of similar sites. So, here’s specific examples of design goals being met.

Website Design

Design Goals
Reducing Content Overload; Bespoke New Events Module; Find Courses Easily.

Herts Aid have provided support, training & information on HIV and sexual health for over 25 years.

Ambrose Designs built Herts Aid’s previous site. Whilst they’d been continuous improvements, a major shift in the organisation’s focus, meant a complete rewrite of the content was needed. This justified a full rebuild.

We took this opportunity to use innovations in functionality, not available for the existing build.

Reducing Content Overload

‘Content overload’ means users ration how many long articles (deep reading) they read online. It’s neurological! Read more >

However, increasing ‘deep reading’ rates, tends to increase enquiries. To achieve this, the following design techniques were deployed:

  • Whitespace makes reading appear more manageable
  • Image Signposts to illustrate each article
  • Excerpts to preview full articles
  • Animation to add dynamism.

Note: Technological changes has made low bandwidth animation possible. Keep it rapid and on page load. Resist using ‘look-here’ pulsating graphics!

Custom post Herts Aid

Bespoke New Events Module

With fields set up to ensure client enters the vital info. adding fresh content becomes frictionless.

  • Custom fields for new events and courses
  • Input aids: calendar picker, hint text
  • Fail safe as ensures no vital info is missed.
  • Auto-formatted to corporate layout and style.

Hide or Show

Content is revealed on selection. This minimises crammed content, excessive pages and pages so long it’s hard to locate info.

Tabs, for instance, were put to great use in training sections.

  • Default open tab is most high profile (e.g. Workforce)
  • Same prime positioning for related content (Bespoke Training…)
  • Reduced scrolling means visitor less likely to get lost.

Toggles (below) used to reveal answers to Qus & As and Case Studies:

Design Goals
Flexible & Easily Navigation; Geo Search; Effective Form Design; Improve ‘News’.

Amelio is a private membership club. In return for a subscription fee, they offer discounts from a range of healthcare, wellbeing and lifestyle service providers.

The site needed to be capable of accommodating exponential growth in partners, without making navigation unwieldy.

Complex Navigation Made Simple

There are 5 main categories. However, there’s potentially unlimited numbers of subcategories.

This example shows, under main category ‘GPs and Medical Services’, there’s subcategories: Private GP Services; Midwifery & Paediatrics; Nursing & Homecare; Nutrition & Diet; Osteopathy & Physiotherapy; Psychology.

It’s been designed to grow and adapt:

  • Any time subcategories can be added or removed
  • Multiple listing of service providers in other subcategories

Accordions displaying subcategories delivers crystal clear navigation.

Opening an accordion reveals a list of corresponding service providers, in alphabetical order. This automatically populates when new providers are added or removed.

Compressing Content

Each service provider’s landing page has a lot of information.
In addition to including each service provider’s logo, there is an intro paragraph; featured image; address; list of services; opening times; profiles of team members.

Tabs bring related information within easy reach.
Address, services, opening times and profiles have their own in-page tab.

Also, the form relates to the page it is sent from. Visitors don’t have to fill in which service provider, when making a booking enquiry.

A Good Form is a Short Form

Abandon rates can be high, if you ask too much in an online form.

Have more than three fields, in an online form, means responses drop significantly. View the evidence.

The membership application form has just three fields to fill in:

  • Name
  • Email
  • Phone number

Catching abandoned enquiries

Once submitted, an email is automatically sent to the user with a full application form, to be completed, signed and emailed back.

Any forms not received can be followed by a phone call or email from the customer support team. Form is G.D.P.R. compliant.

amelio online form

Search by Post Code

Successfully delivered this deceptively complex search functionality.

Type in a UK post code and discover how far a service is from that location.

  • Returns services listed in order of nearest to postcode
  • Displays mileage and links to directions
  • Essential when searching many providers supplying the same service.
  • Lists full range of services available
  • Links to service provider’s landing page to complete ‘user journey’

‘Magazine style’ layout

Previously their online publication, Apple, was an animated flip book.
A poor user experience, it was awkward to update with limited SEO.

‘Magazine Layouts’ online don’t look like Magazines!
Popularised by Pinterest, ‘magazine style’ websites bare little relation to actual magazines. Creating Amelio’s Apple as a blog, it has ‘content hierarchy’, like printed magazines.

  • Main feature: top left and largest image
  • 4 next most important articles: top right
  • Subsequent articles presented below, most recent first
  • Image led, with short supporting excerpts

Visual hierarchy adds clarity
It helps the reader locate the main features. Short excerpts provide enough information, to entice visitors to read more, if of interest.

Design Goals
Private Log In; Compact Directory; Improve Search Results by Showing Context.

Mind the Gap is funded by Public Health England.

In partnership with Herts Aid and Embrace UK, Mind the Gap runs HIV and Sexual Health training courses, for Mental Health professionals.

Styling of this online resource needed to reflect it being a professional, medical and authoritative site.

Your Name’s Not Down…

Online portal for client approved, authorised personnel, only.
With no navigation bar on the homepage, visitors have one of two options:

  1. Authorised users login via the “Access the Site” button
  2. Unauthorised users can complete the short access request form. Access granted, at the client’s discretion.

Gaining Access

Authorised users receive an email with username and a link to reset password and gain access.

It also includes tips on creating a password >

  • Secure: 2-month lock out for incorrect username or excessive password attempts
  • Input aid: Remember Me option
  • Fail safe: lost password option

Retrieving Information

Whilst FAQs are listed by category, search was key. WordPress’ default search box (header & FAQs page) was enhanced.

For example, irrelevant web pages are excluded.

Example: Search results for ‘HIV’

  • Highlights keyword within an extract
  • Added weight if word in heading etc.

Design Goals
Reducing Content Overload; Bespoke New Events Module; Find Courses Easily.

Herts Aid provide support, training and information on HIV and sexual health.

Reducing Content Overload

Due to content overload, users ration how many long articles (deep reading) they read online.

It’s neurological! >

However, deep reading increases enquiries. So, the following design techniques were deployed:

  • White space makes reading more manageable
  • Images signpost articles
  • Excerpts preview full articles
  • Animation to add dynamism.

portfolio Herts Aid

Bespoke New Events Module

For events and courses, custom fields were created ensuring client enter all the vital info. when adding fresh content.

Input aids: hint text, calendar picker

Auto-formatted to style & layout.Custom post Herts Aid

Reducing Scroll Fatigue

Content hidden until selected to reduce page length.

Tabs compress content, e.g. courses.
Keeps prime positioning for related content.

Toggles on FAQs, case studies.

Design Goals
Simple Navigation; Compact Content; Geo Search; Increase Form Submissions; Improve Blog Layout.

For a subscription fee, members gain access to discounts from a range of healthcare & wellbeing services.

Simple Navigation

Achieved by organising the unlimited range of services under just 5 main service types. At any time, service types can be added or removed. Open accordions reveal relevant service providers.

Compressing Content

Tabs keep related info. together and within easy reach.

Service provider landing page contains: logo; introduction; main image; address; list of services; opening times; profiles of team members.

Good Form’s a Short Form

Abandon rates are high if you have more than 3 fields on an online form. View the evidence.

Application process: Complete 3 field online form (Name, Email, Phone no.). User receives full application form. Sales staff follow up on any full forms not received, by phone or email.

amelio online form

Search by Postcode

Deceptively complex to create!

Find closest providers by postcode. Displays mileage; link to directions; range of services available; link to service provider’s landing page.

‘Magazine style’ layout

Amelio’s blog (Apple) adds clarity, using content hierarchy, like printed magazines: main feature (top left); 4 sub features (top right); other recent articles below. This is clearer than ‘online magazine layouts’ (eg Pinterest)

Design Goals
Private Log In; Compact Directory; Relevant Styling; Show Search Results Context.

Mind the Gap is an HIV and Sexual Health training programme funded by Public Health England.

Private Login In

Your name’s not down…
Exclusively for approved mental health professionals, at the homepage, navigation is hidden. Visitors have two options:

  1. Approved users can log in
  2. Unapproved users complete an access request. Approved by client on an individual basis.

Client approved users are granted access to the site. On registration, users receive an email containing:

  • username and link to reset password
  • tips to increase password complexity.

Bespoke login page
Login button takes you to the login page.

  • Entering incorrect username leads to 2-month lock out
  • ‘Remember Me’ option
  • ‘Forgotten password’ option
  • Back to homepage option

Compact Directory

To avoid page scroll fatigue, service provider directory has:

  • in-page tabs for each region
  • toggles to view more info. on each service provider

Looking the Part

Authoritative look using:

  • white space, black and navy fonts
  • ‘Lato Bold’ for clean headings
  • ‘Montserrat’ for body type

Retrieving Information

Whilst FAQs are categorised, the search box is key.

Both the header and one on FAQs, improve WordPress’ default search functionality. For instance, irrelevant web pages were excluded.

search300-200Search example: HIV

  • Highlights keyword within an extract
  • Added weight if word in heading etc.


Portfolio. Jacqueline Poll business cards

Stage 1: Naming the Brand

For Garden Design, the designer is the brand. To communicate founder’s name clearly, logo needs to be non-fussy.

Stage 2: Logo

Background colour is part of the identity. However, logo also created with clear background, for use where appropriate.

Stage 3: Business Card

  • Style: minimalist, emphasis on clarity
  • Reverse image epitomises her style
  • Created for her debut show garden at RHS Hampton Court Flower Show, 2018.
Portfolio. RSC business cards

Stage 1: Modifying the Brand Name

Initials are not ideal for brand recognition. However, the existing name was too long. Besides, RSC has a familiar ring to it!

Stage 2: Logo

Speech bubbles emphasise consultative approach. Use of blues provides strong association with NHS and medical profession.

Stage 3: Business Card

  • Diagonals add dynamism
  • Bright colours draw eyes to phone no.
  • Scanning QR code adds full contact details straight into your phone.
Portfolio. Light Mortgages logo

Stage 1: Making Name Memorable

Considered a range of idioms, to improve brand recognition, before referencing light ‘as a feather’.

Stage 2: Logo

Logo is to be used only for paper documents, using a basic black & white desktop printer.

  • Traditional serif font gives an established, corporate feel
  • In spiritualism, a black feather is a ‘protective guide’.
  • Indent for ‘mortgages’ and floating feather gives a relaxed feel

About Ambrose Designs

Richard AmbroseFormed by myself, Richard Ambrose, in 2010 to deliver crystal clear websites, that work.

Clarity is the motivating principle. That’s from how sites look, to making interfaces easy to use and explaining things to clients. Only geek out with fellow geeks!

Many of Ambrose Designs clients are in construction, bespoke design (i.e. garden, wedding dresses etc), events, training, recruitment or provide information portals.

Businesses like these, value having a website where fresh content that can be swiftly added, easily located and presented professionally every time. Being able to easily find & show previous work to clients, similar to projects they’re chasing, is a really powerful sales tool.

In principle, you can do all this yourself. In reality, getting an expert to do this quickly and effectively is a far better use of your time. So, every few months, you may send Ambrose Designs half a dozen photos to be cropped with a few lines of text for a recent project, to be added.

Alternatively, you may want a bespoke distraction-free dashboard with a fully stocked image library, so new events, jobs or information can easily be added yourself and automatically formatted for your site. Or, perhaps you want forms that do a bit more than the standard solution.

Earning a reputation for this personal, on-hand type of service, is what clients say they value most. It remains central to Ambrose Designs offering.

Studio 2To maintain this, from its garden studio in North London, Ambrose Designs has deliberately remained small lean and agile, only bringing in trusted specialists as and when required.

Technically and visually every element on a site needs to work, so attention to detail is key. This was instilled in me early on as a junior, producing artwork in a West End illustration studio, for high profile clients including two ex-Beatles *.

That same eye for detail comes in handy, when looking out for that missing semi-colon in computer code, that can stop a website displaying correctly.

For more, listen to my recent interview on 'The Standing Out Podcast'

* I happen to be a life-long Beatle fan and answer Beatle related questions online in my spare time. One article got 200,000+ views. No idea why!

If this sounds like the sort of service you are looking for, get in touch to discuss getting yourself a crystal clear website, that works.

Contact Ambrose Designs