My work started by identifying three main areas or critical aspects of raconteur.net to be placed at the bottom of the redesign: Content, Design, and Technology:

Content

• Analyse the content structure and define a new information architecture.
• Leverage the power of storytelling.
• Define clear goals for each significant target group.

Design

• Channel the value of the design found in the printed products lineup
• Account for subtle variation according to audience/objectives
• Build Design System, to act asd shared vocabulary and living library of Raconteur styles & patterns

Technology

• Rebuild for high performance and mobile-first
• Progressively enhance the experience for desktop and modern browsers
• Move to a cloud infrastructure and define an efficient DevOps workflow

I used Googles Analytics to identifyss the best performing content, common entrance and exit pages and, recurring patterns in the user navigation flow.

Together with the head of marketing, we later compared the evidence gathered with the current data on the website. This process led to deciding to shift the pivot from 'products' to 'content' to develop a structure around our reader's interests.

We then merged our findings with an Extensive Competitive analysis to gather valuable insights on content and features and better understand Raconteur's unique selling proposition.

We kept using WordPress to reduce the complexity of this redesing iteration but switchig from a conventional hosting provider to the [Pantheon](https://pantheon.io/) infrastructure based on Docker containers to gain:

• Local and Remote Environment Standardisation and Version Control
• Continuous Deployment and Testing
• Isolation and Security
• Virtually unlimited scalability/li>

The wireframes were created in Sketch and then shared in InVision, to gather comments and further iterate each board.
I decided to use a monochrome style (one colour against white) to obtain a straightforward form of wireframing that matches its function. You can read more about it on the UX Movement website at this link: “Why the Best Wireframe Style Is No Style.”

The process continued “wireframing in the browser”, outlining the website's structure, content and features, with actual code and live dynamic data. Then progressively starting to add semantics, ARIA rules and schema metadata relevant to search engines and assistive devices. A crucial step to ensure compliance with content discovery, consumption and syndication's web services.

Slicing the spectrum into eight hues to differentiate the primary topics with distinctive colours, loosely following some basic principles of colour psychology common to our European/Western heritage: The last colour iteration aimed to address visual imparities, with rich tonal variations and correction for UI design.

Slicing the spectrum into eight hues to differentiate the primary topics with distinctive colours, loosely following some basic principles of colour psychology common to our European/Western heritage: The last colour iteration aimed to address visual imparities, with rich tonal variations and correction for UI design.

Slicing the spectrum into eight hues to differentiate the primary topics with distinctive colours, loosely following some basic principles of colour psychology common to our European/Western heritage: The last colour iteration aimed to address visual imparities, with rich tonal variations and correction for UI design.

The main site was published in Jan 2017 and served the business up until September 2020. Live for three years, seven months, and 22 days, gathered tremendous positive feedback and almost doubled its audience, getting closer to 250k/monthly users.

4.1 out of 5