A portfolio of work

Work2018-08-31T17:42:07+00:00

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.

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 provides support, training and information on HIV and sexual health. Ambrose Designs built their previous site, back in 2014.

Whilst they’d been continuous improvements, a major shift in the organisation’s focus, justified completely new content and a full rebuild. We took this opportunity to use innovations, not available for the existing build.

Reducing Content Overload

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

It’s neurological! Read more >

However, increasing deep reading rates usually increases enquiries. To do this, the following design techniques were deployed:

  • Whitespace making reading more manageable
  • Image Signposts for each article
  • Excerpts previewing full articles
  • Animation to add dynamism.

Note: Technological advances mean low bandwidth animation is now possible. However, make it rapid and on page load only. Resist irritating your visitor with ‘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.

Reducing Scroll Fatigue

Having content revealed only when selected, allows pages to have whitespace, without being awkwardly long.

Tabs were put to great use in, for instance, 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 also used to reveal answers to Qus & As, Case Studies etc.:

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.

Branding

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