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:
\",\n mdxType: \"ProjectDetail\"\n }), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n content: \"Content
Design
Technology
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:
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: \\u201CWhy the Best Wireframe Style Is No Style.\\u201D
The process continued \\u201Cwireframing in the browser\\u201D, 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.
\",\n mdxType: \"ProjectDetail\"\n }), mdx(\"div\", {\n className: \"w-k8 md:w-k7 mx-auto mt-k1v mb-k1v\"\n }, mdx(\"div\", {\n className: \"flex flex-row flex-wrap\"\n }, mdx(\"div\", {\n className: \"w-full overflow-hidden md:pr-8 md:w-1/2\"\n }, mdx(\"div\", null, mdx(\"div\", {\n className: \"text-center aspect-w-16 aspect-h-9 overflow-hidden\"\n }, mdx(\"img\", {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n className: \"h-auto\",\n src: \"https://res.cloudinary.com/yumyo/image/upload/c_crop,g_center,h_1440,y_0/c_scale,w_920/v1650963563/media/folio/prj/rac/desktop-qireframes-1920-5-4.png\"\n })))), mdx(\"div\", {\n className: \"w-full overflow-hidden mt-k1v md:mt-0 md:pl-8 md:w-1/2\"\n }, mdx(\"div\", null, mdx(\"div\", {\n className: \"text-center aspect-w-16 aspect-h-9 overflow-hidden\"\n }, mdx(\"img\", {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n className: \"h-auto\",\n src: \"https://res.cloudinary.com/yumyo/image/upload/c_crop,g_center,h_1440,y_0/c_scale,w_920/v1650963562/media/folio/prj/rac/mobile-qireframes-192-5-4.png\"\n })))))), mdx(Heading, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n level: 3,\n className: \"mt-k1v\",\n mdxType: \"Heading\"\n }, \"Final Design\"), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n label: \"\",\n content: \"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.\\n
\",\n mdxType: \"ProjectDetail\"\n }), mdx(\"div\", {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n className: \"mx-auto w-k8 md:w-k7 block mt-k1v mb-k1v text-center\"\n }, mdx(\"div\", {\n className: \"text-center overflow-hidden aspect-w-16 aspect-h-9\"\n }, mdx(\"div\", null, mdx(GatsbyImage, {\n alt: \"All site templates\",\n layout: \"fixed\",\n image: getImage(props.remoteImages[1]),\n mdxType: \"GatsbyImage\"\n })))), mdx(Heading, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n level: 3,\n className: \"mt-k1v\",\n mdxType: \"Heading\"\n }, \"Final Design\"), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n label: \"\",\n content: \"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.\\n
\",\n mdxType: \"ProjectDetail\"\n }), mdx(Heading, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n level: 3,\n className: \"mt-k1v\",\n mdxType: \"Heading\"\n }, \"A different Home every day\"), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n label: \"\",\n content: \"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.\\n
\",\n mdxType: \"ProjectDetail\"\n }), mdx(Heading, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n level: 3,\n className: \"mt-k1v\",\n mdxType: \"Heading\"\n }, \"Outcomes\"), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n label: \"\",\n content: \"The main site was published in Jan 2017 and served the business up until September 2020.\\nLive for three years, seven months, and 22 days, gathered tremendous positive feedback and almost doubled its audience, getting closer to 250k/monthly users.\\n
\",\n mdxType: \"ProjectDetail\"\n }), mdx(Heading, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n level: 3,\n className: \"mt-k1v\",\n mdxType: \"Heading\"\n }, \"HotJar\"), mdx(ProjectDetail, {\n \"data-sal\": \"fade\",\n \"data-sal-duration\": 900,\n label: \"\",\n content: \"4.1 out of 5\\n
\",\n mdxType: \"ProjectDetail\"\n }), mdx(\"div\", {\n className: \"mx-auto w-k8 md:w-k7 lg:w-k5 2xl:w-k4 block mt-k1v\"\n }, mdx(RatingPieChart, {\n mdxType: \"RatingPieChart\"\n })), mdx(\"p\", null, \"Total Pageviews\\n12,765,007\"), mdx(\"p\", null, \"New Users -\\n7,038,019\"), mdx(\"h2\", null, \"Total Pageviews\"), mdx(\"div\", {\n className: \"mx-auto w-k8 md:w-k7 lg:w-k5 2xl:w-k4 block mt-k1v\"\n }, mdx(HorizontalBarChart, {\n category: \"\",\n value: 12765007,\n barColor: \"#ffd700\",\n maxValue: 13000000,\n mdxType: \"HorizontalBarChart\"\n })), mdx(\"h2\", null, \"New Users\"), mdx(\"div\", {\n className: \"mx-auto w-k8 md:w-k7 lg:w-k5 2xl:w-k4 block mt-k1v\"\n }, mdx(HorizontalBarChart, {\n category: \"\",\n value: 7038019,\n barColor: \"#a78bfa\",\n maxValue: 7100000,\n mdxType: \"HorizontalBarChart\"\n })), mdx(\"div\", {\n className: \"mx-auto w-k8 md:w-k7 lg:w-k5 2xl:w-k4 block mt-k1v\"\n }, mdx(LineChart, {\n mdxType: \"LineChart\"\n })), mdx(\"p\", null, \"From 127,115 in 2016 to 243,369 in 2020\"), mdx(\"p\", null, \"projection for the entire year based on data from Jan 2020 to Sept 2020\"), mdx(\"p\", null, \"The Custom Publishing section would have been developed as a stand-alone website to support the division's specific needs and objectivess\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"id":"9e542c15-939b-5308-b7c2-064a56bcefdc","frontmatter__template":"cases","slug":"raconteur-media","__params":{"frontmatter__template":"cases","slug":"raconteur-media"}}}, "staticQueryHashes": []}