← All work

Microbiology Society home page redesign

A updated home page deisgn that mixes editor-controlled content in a new interactive design with live article data, so it stays fresh without a developer.

Role: UX designer and front-end developer

Interactive tour of the Microbiology Society home page (48 seconds, no audio). Screen recording with no audio, with an orange ring marking the cursor. It opens the portfolio and resources menus, the search scope picker and the search suggestions, then the accordion menu, before scrolling down the page to the video and social links.
Microbiology Society home page header: logo and menus above a teal hero with a heading and a search box with a scope picker, then four coloured shortcut tiles.
Hero search with a scope picker, then four shortcut tiles. Live site, desktop.
Featured Articles band: three image tiles with dark title bars, beside a Latest Content list of article titles and authors.
Featured Articles: three editor-controlled tiles beside a Latest Content list built from article data.
Micro Perspectives band: three image tiles beside a Most read articles list.
Micro Perspectives repeats the pattern, with a Most read articles list generated from data.
Micro Scopes band: three image tiles with author credits and a more link.
Micro Scopes: editorial tiles with author credits (cropped to the tiles).
An embedded video beside podcast, events and conference promo tiles, then a row of social media links.
The video loads once social media cookies are accepted. Podcast, events and conference promos sit beside it, with social links below.

The problem

The Society publishes six journals for authors, readers and librarians. The home page had to send each group where they need to go, promote editorial content, and keep showing current research, while letting editors change the message themselves.

What I did

  1. Led with search. The hero search has a scope picker that lists each journal and suggests terms as you type, so a visitor can go straight to a paper or narrow to one journal.
  2. Added four shortcut tiles for the routes people ask about most, such as open access and collections.
  3. Split each content band in two. Three editorial tiles sit beside a list generated from article data, such as Latest Content and Most read articles. Editors can change the tiles in the CMS, and the list updates itself.
  4. Made every editorial block an editable CMS blurb, so editors can change headings, tiles and promos without a release.
  5. Held back the video embed until a visitor accepts social media cookies, and kept the social links as plain links.
  6. Kept navigation usable on small screens, where the menus collapse into an accordion.

The outcome

Editors control the message and the data keeps the page current, so the home page stays up to date with little developer time. Positive editorial feedback helping to lock in the customer