A Portfolio of Recent Work

Folio 2018-05-01T17:22:34+00:00

Work Samples

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

Online portfolio often require wading through an “image dump”. Here’s some hand-picked recent work, highlighting specific design issues.

Recent Work

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.

Aim was to design a site, capable of accommodating exponential growth in partners, without making navigation unwieldy.

Clear Navigation

  • There are five service categories.
  • Each category may, in time, have many subcategories.
  • Each subcategory needs to list service providers (and their full details).

In addition, many service providers will offer services in other subcategories and categories! So, navigation needed to be easy to modify and clear.

Subcategories are accordion toggles, which can be added and deleted at any time. Opening a toggle reveals a list of service providers, in alphabetical order. When new providers are added, this will automatically populate.

Compact Content

  • Each service provider will display a main image, logo & introductory info.
  • Needs to show address, services, opening times
  • Also needs profiles of all team members!

Tabs reveal services, opening times and profiles.

Form relates to the page it is sent from. So visitors doesn’t need to specify which service provider, when completing a booking form.

A Good Form is a Short Form

  • Only required to provide name, email and phone number.
  • Triggers an email, that’s sent with a full application, to be completed, signed and emailed back.
  • Any forms not received can be followed by a phone all or email from the customer support team.
  • G.D.P.R. compliant

Increase the number of fields, in an online form, beyond 3 and responses drop significantly. View the evidence.

Postcode search

  • Search returns services in order of nearest from postcode.
  • Displays mileage and links to directions
  • Essential when searching through a large number of service providers.
  • Lists services and links to full details

Making the Blog a Magazine

Originally, Amelio’s regular online publication, Apple, was a animated flip book, so poor user experience, awkward to update and limited SEO.

‘Magazine style’ layouts which don’t look like Magazines!
First popularised by Pinterest, ‘magazine style’ web layouts bare little relation to actual magazines. Apple’s magazine style blog, has the important ‘content hierarchy’, just 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, by helping the reader locate the main features. Short excerpts provide enough information for the reader, to entice them to read more, if of interest.

Design Issues
Make Content Enticing; Pre-Formatting Events & Courses; Form Design.

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

Ambrose Designs built their previous site. A major shift in content focus led to a new build, capitalising on recent web innovations, being approved.

Visually Enticing

Web content overload means visitors read websites differently now. And it’s neurological! Read more >

To help the weary visitor, content for the new site is signposted with more images. Content is also presented in bite-sized pieces. Key changes:

  • More image-led content
  • Compact content (tabs & toggles)
  • Low bandwidth animation

Compact Hidden Content

In-Page TabsHertsAid-tab

  • Multiple content displayed in the same page area
  • Related content is close by and less scrolling

Toggles – closed

  • Displays many story headlines together as a list
  • Means visitor selects story that resonates for them

Toggle – opened

  • Opens to reveal full article
  • Means able to have multiple, long articles in one compact page area

A Note about Animation

  • Make it fast
  • Only use it on page load
  • Don’t irritate your visitor

Technological advances mean low bandwidth animation is now possible. However, ‘look-here’ style pulsating graphics are not welcome. As the page loads, content slides in to subtly grab attention.

New Content: Custom Input Fields

  • Bespoke fields for new events and courses
  • Input aids such as calendar date picker
  • Hint text to further assist author
  • Includes required and not required fields
  • Ensures all essential details are included

  • Auto-formatted font and layout
  • Author only has to enter the information
  • Makes adding new content friction-less

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

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

Homepage
With navigation bar hidden, visitors have just two options:

  1. Login button for approved users
  2. Access request form for prospective users. Form submissions are emailed to client for approval.

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.

Logo & Business Card Design

Logo design

  • Speech bubbles emphasise consultative emphasis
  • 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
  • Use of yellow and green to direct the eye to the phone number
  • QR code on back, which almost became popular!

Background
Healthcare recruiters. The name was already established. Shortening it wasn’t an option. The (familiar) initials provided a memorable solution.

Logo Design

Design

  • Serif font used to give an established and corporate feel
  • Feather has a reflective surface below, indicating its slow descent

Background
Considered a number of idioms, before choosing ‘light as a feather’. In spiritualism, a black feather just happens to be the sign of a protective guide, which works quite nicely. Colour choice was due to the logo mostly being printed in black & white.

Design

  • Uses a calligraphic typeface, without losing legibility
  • ‘Pill’ shape and a red from the ‘Flat UI’ colour palette, to ensure logo looked contemporary

Background
Based on the founder’s name, Sherron Alexander-Bedingfield originally considered naming the business Salexbed. After user testing, the feedback was that it sounded like a bed manufacturer!

As a consultancy, specialising in legal matters, we agreed Alexander-Bedingfield sounded far more appropriate.