Redesign of an Online Glossary

A mockup of the redesigned site

Problem

Very thorough online ecology glossary with minimal UI, long sections of small type in a serif font, and few pictures to break up all the black text on a white background. Basically you have to scroll down (site has over 5,000 lines of code) until you reach definition you are looking for.

When I first visited the site, I was intrigued by many of the informative, often humorous definitions, but after a few tries at scrolling, I was ready to leave the site. I think the lack of UI keeps visitors from discovering all the rich treasures this site has to offer, and so I decided to see if I could improve the user experience.

Solution

I identified parts of the site that needed help. The area above the fold needed to look more modern, and there needed to be fewer links that both detracted from the purpose of the site and potentially took visitors away. The font needed to be changed to a sans serif so that it would be easier to read online, and there needed to be more hierarchy and emphasis. Finally, pictures could be added to break up the white space and add to the user experience.

Part of original site, with annotations.

Result

The redesign gives the site more impact and usability. Now the visitor can easily navigate and jump around, and most importantly, immerse themselves in the site without getting stuck or frustrated by poor UI. The images add impact and interest, the font is easier to read, and the entries are easier to find.

The area "above the fold" is now more captivating and the image of Earth is not confined to a small box. Instead, it is a full-width parallax image that feels vast on the page. The links are now contained and while some are still there, the focus is more on the title of the site and the "Continue" button. A fixed navigation bar (that is also mobile-friendly) has been added to the bottom of the screen - always available so the user can easily jump to different entries throughout the glossary.
The lead paragraph is no longer confined to a box and has room to breathe. It also dramatically sits between to parallax images, which captivates the viewer and hopefully urges them to continue scrolling to explore more of the site.
Entries are in bold to make identification easier, and now, if a definition references another definition, there is a hyperlink to quickly take the visitor to that definition, rather than forcing him or her to scroll down hundreds of lines of text. Again, the fixed navigation bar means the visitor has another option to move around the site.
The very long glossary has now been broken into sections (by alphabet), with beautiful parallax images that hint at the section to come. Here we see an image of Tracy Arm Fjord, which relates to a definition in the F section about fjords.

Other Web Work

Image mockup of ACC Women in IT website

Website

For Women in IT at ACC program, using Divi WordPress.

Image mockup of PWG Media website

Website

Responsive redesign of an existing website, using Bootstrap 3.

Image mockup of Niagara Streaming

Website

Responsive redesign of an existing website, using Bootstrap 3.