Writerology

Providing courses on character development, Writerology applies real psychology to fictional works. The goal was to break down the wealth of content into an easy navigable resource for aspiring writers.

Writerology book logo icon

Branding

The new look involved a rebranding of the site to unify the various materials that were being distributed to subscribers. The blue-green accent was used to produce a simple and elegant open book logo, its pages open and ready to share with the audience. The site itself adopted a minimalistic approach with a mix of greys, whites and drop shadows to produce depth while allowing the content of the site to produce much of the 'look and feel'.

Writerology category view with sidebar resources

Clarity of information

The clean branding required a simple and uncluttered user interface for the website.

Each area of the page has a clearly defined heirarchy. Cards and sunken areas look modern and provide a sense of depth that is easily translatable to a multitude of devices.

Clickable elements are highlighted and inspire confidence in an action and despite the muted colour palette, contrast is kept high for readability and accessibility.

Write chain challenge leaderboard

Community

A big push for the site was to build on the fantastic community that had been built using social media. The Write Chain Challenge, where a target is set and links are created each day encourages small acheivable goals. A custom Perch add-on was written to allow easy management of the score board - the avatars providing a sense of continuity between the Twitter following and the website.

Writerology blog index and navigation

Navigation

The site navigation was carefully considered and a new page tree was developed with the client. Moving away from the confusing nested pages of the previous site key areas were identified and moved to a clear navigation at the top of the page.

Secondary links are contextual, being displayed on a per-page basis. Additional actions are added to a sidebar with a search to help users navigation the vast array of content on offer.

The result is a website that users are able to navigate with ease and a 100% increase of visitors compared with the previous site.

Writerology displayed responsively on a smaller device

For the mobile writer

The new site aimed to keep as much of the experience as possible as the display size reduced. All pages on the site are fully responsive, making use of collapsing columns and natural overflow scrolling to produce a fast feeling and natural interface.

Large chunky buttons make sure that users can interact with confidence and by using Stripe Checkout, payments can be easily taken right from a mobile device.

The result is a 166% increase in mobile users visiting the site and 100% increase in tablet users.

CMS editing controls

Easy Content Management

Perch CMS provides a great experience for the client. Using a system called blocks they are able to build up blog posts and be truly creative with their content - for example, adding pull quotes and image galleries.

Additionally functionality was developed unique to the client, including the ability to lock pages and a leaderboard app for the Write Chain Challenge.

Examples of button variants in blue-green

Built for the future

Under the hood the site uses modern CSS design, breaking the UI into components and organising style code amongst layers.

Developed in Sass the user interface is fully modular with modifier classes setting any additional styles or indicating state - such as the example above. This allows a developer to easily add additional pages or UI elements as the site evolves.