Alchemy Performance Assistant

A knowledgebase containing articles on key management techniques from experts in each field.

Design brief

Make UX and UI improvements to the existing website.

  • Integrate the new branding
  • Make the site responsive
  • Re-structure content based on feedback and user behaviour
  • Emphasise the expert editorial
  • Improve readability
  • Improve searchability

Smarter Search

One of the key tasks users perform on this site is searching for relevant topics and people. Previously, the site included an advanced search page which meant users must take extra steps to find what they needed. The site comprises of hundreds, not thousands of pages so advanced search seem cumbersome. After consultation with the tech team, we found out that the content was extremely well indexed and it was possible to make huge improvements to the search mechanism.

Rather than have a seperate page for search, why not improve the search mechanism to simplify the process? Current best practice favours the typeahead (aka auto-suggest , auto-complete) pattern as it not only gives rapid feedback on whether the search term exits, but can also provide expose related content in the items that are displayed.

The pattern works well on mobile too as small requests are made to the server rather than requesting and returning whole pages of data, so the interaction is faster to complete.

Simple Bookmarking

Keeping track and organising bookmarks can quickly become unmanageable. You can save them in the browser, send them to a dedicated service, copy them to a file etc. Liking, following and favouriting are all types of bookmarking.

— Ian Hallworth (@HallworthDesign) March 8, 2016

With a service like Alchemy Learning Assistant where users need to authenticate to access the archive, saving personalised bookmarks is simple to do and adds value. Our users are perpetual-intermediates, they aren’t using the service daily and are visiting to research particular topics that resonate at a particular time. We don’t expect them to invest any time in learning a new set of tools or different way of doing things, so we follow established design patterns and try to make this as simple and obvious as possible.

As the service already used the term ‘bookmarks’, it made no sense to change the name of it so we looked at the most commonly used icons to denote bookmarking and went with a simple page icon. Click once to bookmark and provide visual feedback on the changed state. Click again to cancel the bookmark. The placement is consistent throughout the service and visually linked to the content – it does not reside in the navigation area. Because it is a secondary function, it has also to take a back seat and be in a supporting role.

Columns improve scanning

Alchemy Learning Assistant contains a topic index, a glossary of terms and an index of authors.  Some of these indexes contain up to 150 items and contain uncommon phrases and titles so sometimes listing them in an A-Z fashion is not the most reliable of ways to present them.

For the desktop browser, we wanted to show multiple entries to make scanning easier and employed a multi column approach.  For smaller mobile devices where the multi-column approach is more uncomfortable to navigate, the columns are linearised.

To force a rigid grid and enhance scanability, we specified a height for multi-line entries and collapsed the overflowing content, allowing the user to click to expand the content area on demand.

Get in touch

Drop me a line if you'd like to discuss your product or service.

Can you tell me a little more about your project. If you leave a contact number, I will get in touch.




Or follow me at

Other projects