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.
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!
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:
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
Opening an accordion reveals a list of corresponding service providers, in alphabetical order. This automatically populates when new providers are added or removed.
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:
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.
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.
For a subscription fee, members gain access to discounts from a range of healthcare & wellbeing services.
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.
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.
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)
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
Formed 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.
To 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'
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.