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.
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.
- 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.
- 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.
- 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.
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.
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
- 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
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
With navigation bar hidden, visitors have just two options:
- Login button for approved users
- Access request form for prospective users. Form submissions are emailed to client for approval.
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
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
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.Search example: HIV
- Highlights keyword within an extract
- Added weight if word in heading etc.
Logo & Business Card 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
- 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!
Healthcare recruiters. The name was already established. Shortening it wasn’t an option. The (familiar) initials provided a memorable solution.
- Serif font used to give an established and corporate feel
- Feather has a reflective surface below, indicating its slow descent
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.
- Uses a calligraphic typeface, without losing legibility
- ‘Pill’ shape and a red from the ‘Flat UI’ colour palette, to ensure logo looked contemporary
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.