A portfolio of work

Folio2018-07-13T09:10:56+00:00

Work Samples

When portfolios were leather bound, designers carefully selected work to present.
Online portfolios often require wading through an “image dump” of similar sites. Instead, work here shows how specific issues were resolved with clarity & innovations.

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

Online portfolios often require wading through an “image dump” of similar sites. Instead, work here shows how specific issues were resolved with clarity & innovations.

Website Design

Design Issues
Complex Navigation; Compact Content; Geo Search; Form Design; Blog Layout.

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.
Beyond the logo, introductory paragraph and featured image there’s:

  • logo
  • introductory info.
  • featured image
  • address
  • list of services provided
  • opening times
  • full profiles of all team members.

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

In addition 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 Issues
Design to Engage; Bespoke Interface for Events & Courses; In Page Tabs.

Herts Aid provides support, training and information on HIV and sexual health. Ambrose Designs built their previous site.

A major shift in the organisation’s focus justified a rebuild. We took this opportunity to further improve functionality, with the latest web innovations.

Deeper Reading by Design

Due to content overload, increasingly users ration the number of long articles(deep reading) they are prepared to read online.

It’s neurological! Read more >

Design techniques were used, to reverse this behaviour:

  • Whitespace so content ‘breathes’
  • Image Signposts for articles
  • Excerpts linking to 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.

[/fusion_text]

Custom post Herts Aid

Bespoke Interface for New Content

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 Issues
Private Log In; Corporate Styling; Enhancing Existing WordPress Search.

Mind the Gap is funded by Public Health England.

Delivered in partnership with Herts Aid and Embrace UK, Mind the Gap runs HIV and Sexual Health training courses, for Mental Health professionals. Mind the Gap needed an online resource that participants could then access.

Corporate Styling

To reflect it being a medical information site.
The aim was to create an overall look that was extremely clear and professional to reflect the subject matter and purpose.

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 complete the short form requesting access

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 Issues
Complex Navigation; Compact Content; Geo Search; Form Design; Blog Layout.

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

Simple Navigation

There’s 5 categories, but unlimited subcategories. Categories can be added or removed at any time. Accordions reveal service provider list, when selected, improving clarity.

Compressing Content

Service provider pages have a lot of information: logo; intro paragraph; featured image; address; list of services; opening times; profiles of team members.

Tabs keep related info. together and within easy reach.

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: 3 field enquiry form: Name, Email, Phone number. On submission, user receives email with a full application form. Forms not received are followed up by phone or email by sales staff.

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

‘Magazine Layouts’ online don’t look like Magazines!
Unlike ‘magazine style’ websites popularised by Pinterest, Amelio’s blog (Apple) has ‘content hierarchy’, like printed magazines.

It contains: main feature (top left); 4 sub features (top right); other recent articles below. Visual hierarchy adds clarity.

Design Issues
Design to Engage; Bespoke Interface for Events & Courses; In Page Tabs.

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

Your Name’s Not Down…

Private Login access for Authorised Users only
There is no navigation bar on the home page. Visitors have one of two options:

  1. Authorised used can click the “Access the Site” button
  2. Unauthorised users can complete the form to request access.

Bespoke Client Interface

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 Issues
Private Log In; Compact Directory; Relevant Styling; Contextual Search.

Mind the Gap is funded by Public Health England.

Delivered in partnership with Herts Aid and Embrace UK, it provides HIV and Sexual Health training and online portal for Mental Health professionals.

Private Login In

Your name’s not down…
When arriving at the homepage, navigation is hidden. Visitors have two options:

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

Only client approved users are granted access to view the site. On set up, users receive an email that contains:

  • 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.

Corporate Identity

What’s in a Name?

The long name was already established. For these Healthcare recruiters, shortening it to (familiar) initials provided a memorable solution.

Logo

  • Speech bubbles emphasise consultative approach
  • Blues: strong associations with NHS and medical profession
  • Word ‘Rich’ is darker to stand out – Founder’s name is Rich

Business Card

  • Creating dynamism with diagonal shapes
  • Yellow and green direct the eye to the phone number
  • Back: Not a standard QR code. This adds contact details straight into your phone.

What’s in a Name?

  • Light Mortgages was already chosen
  • Chose ‘light as a feather’ after considering other idioms
  • Monochrome as logo mostly to be used in black & white print
  • Black feather, in spiritualism, is the sign of a ‘protective guide’

Logo

  • Serif font gives an established, corporate feel
  • Mortgages indented to give a relaxed feel
  • Feather floats over a reflective surface, indicating a slow descent

What’s in a Name

For Garden Design, the designer is the brand. Created in time for her debut show garden at RHS Hampton Court Flower Show, 2018.

Logo

  • Clarity to emphasise the name of founder and business
  • Use of contemporary typeface
  • Logo available with & without green background

Business Card

  • Minimalist: careful use of type for maximum clarity
  • Image on reverse epitomises her style of garden design