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.
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'.
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.
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.
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.
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.
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.
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.