We recently launched the new Wiki design and wanted to share how its design evolved from how it looked then to how it looks now.

The Old Wiki

The old wiki theme was just the default from MediaWiki. From a UI perspective, the theme leaves a lot to be desired.

Having "Go" and "Search" is confusing to the user:

Most of the navigation links won't be used by the majority of the users (ex: Special Pages):

These tabs are confusing and generally unhelpful. It looks like a main navigation but isn’t:

Redesigning the theme to be visually more appealing was important, but these issues had to be addressed.

Mockup Version 1

For the first mockup, we didn't stray too far away from the original Wiki layout. We scrapped it because we ended up feeling that light text on a dark background made it more difficult to read, though this is a controversial topic on the web.

Mockup Version 2

In addition to switching back to dark text on a light background, we took out the Shopify logo because it was unnecessary. We started from scratch again because the Wiki's navigation was just as bad as the original navigation – the focus is on the wiki-specific links like “Recent Changes”, and we wanted it to be on the primary content instead: the Getting Started section, Using Shopify, Designing Themes, etc.

Another reason for scrapping this mock up is consistency. This mock up is a completely different visual design than anything else on Shopify.com

Mockup Version 3: The Finished Product

Here’s the final product: a significant step up from the original theme in terms of usability and design:

The Forums and Wiki now share some common design elements, so users will feel more at home:

The new navigation is better then what we had before. We had bigger plans for improving the navigation, but because of some technical limitations of the MediaWiki platform, this was the most pragmatic solution:

The new search bar is much cleaner and less confusing. The unnecessary and confusing buttons have been removed, yet it keeps the same level of obvious functionality:

The new Wiki is also a fixed width layout; not a liquid layout. This means that no matter how big your monitor is, the Wiki’s content will always remain the same width. Fixed vs. Liquid is a hotly debated topic, but fixed layout makes the Wiki's content less intimidating and more readable.

What do you think of the new Wiki design? Do you prefer light text on a dark background or vice versa? Do you miss the old liquid layout? I would love to hear your feedback in the comments.