Case Study - michaelacarrot.com
1 - Overview
Product
Showcase Website + Blog + CMS Post Builder
Website
michaelacarrot.comContributors
Matteo Peroni: Web Developer / Web Designer / Web Engineer
Gabriele Bessi: Web Developer / Web Designer / Web Engineer
William Bardon: Web Developer / Web Designer / Web Engineer
Introduction
Michaela Scalisi is a Swiss travel blogger and skater.
She rebranded in November 2022 and turned to us to create:
- A new Landing page allowing her to introduce herself and showcase her work to potential partners.
- A Blog section that encompasses all the experiences gained from her travels.
- A web application to create and manage blog posts quickly and easily.
2 - Challenge
Objectives
- Showcase website with UI and UX designed for efficient navigation and content organization.
- Optimized SEO for the website and individual posts.
- Web application for post creation that is user-friendly, fast, scalable, and enjoyable to use.
Deadline
01/2023
Michaela reached 100k followers on Instagram, with a clear growth trend. She wants to create a landing page and blog that align with her new brand identity and provide immediate and clear organization and consumption of content.
Additionally, since the previous tools used for post creation were unintuitive and time-consuming, there was a need to create a Web App that allows her to create content quickly and efficiently.
3 - Process
Before considering the blog's design, we researched the most famous web-blogs, noting how their content is often poorly organized, preferring greater interaction over simple and quick content consumption.
With this blog, we adopted the reverse approach, emphasizing clear and simple navigation and creating a product that is easily consumable by the user.
For the design process, we used Figma, frequently consulting with Michaela. Here are some design insights and concepts.
4 - The Solution
Showcase Website + Blog
The website has a simple design with features that make it captivating, such as frequent use of shapes and serif font.
The chosen color palette aligns with Michaela's main topics, evoking nature, well-being, harmony, and exploration.
All content is available in both English and German, as a significant portion of Michaela's followers speak German.
Showcase Website
The hero section underwent several changes during the creation process, and the final result highlights Michaela's beautiful illustration while doing what she loves.
One of the goals was to organize the content to make it as accessible as possible to users.
We grouped the content into three categories and placed them in three cards right after the hero section to highlight their visibility.
Continuing with the clean concept that accompanies the entire landing page, we organized information related to 'about' and 'work' in a section with horizontal scrolling that is not immediately visible on the main page.
This way, less relevant information is consulted only if the user is genuinely interested, leaving the main page layout clean with essential information and actions.
The contact form is always accessible from the CTA in the navbar, and with the implementation of an anti-spam captcha.
We also added a fallback in case of errors during email sending. In that case, users can manually send an email through their mail client, ensuring contact requests are not lost even in case of service disruptions.
Blog Post
Posts are the heart of the blog, divided into chapters that are accessible on the left at any reading point in the post.
On the right and at the end of the reading, other related posts are presented. At the top, there is a reading progress bar.
At the end of the post, we implemented the comments section to generate more engagement from users.
CMS Post Builder
Most of the time was invested in the management application since all tools were programmed from scratch according to Michaela's needs.
This allows 100% customization and the ability to implement new features without constraints that would have existed using existing market tools.
The application is branded 'Mouth' as it is a standalone package designed to be used for other projects that aim to create content.
Upon logging into the application, the dashboard summarizes the main tools created:
- Post Editor: CMS to manage posts displayed on the blog.
- Media Gallery: a tool created to provide better and unified management of all media files used within posts.
- Newsletter: this section allows consultation of all users who have joined the newsletter.
Media Gallery
It functions as a real file explorer where you can create, delete, and move media files.
Inside folders, media files can be uploaded with drag & drop, and they are optimized for web usage through an algorithm we created.
With this tool, files are not at risk of being lost, and they do not occupy space on the user's PC. Additionally, the client can organize the folder structure as desired.
List of Posts
In this screen, posts are divided into categories and subcategories, also present on the website.
Here, you can have a general overview of the content and perform actions such as adding, editing, cloning, and deleting posts.
Post Editor
The Post Editor is the tool most used by Michaela. For this reason, we ensured it closely aligns with her needs.
We focused on ease of use, enjoyment, and speed in creating posts.
Post Creation Tools
There are 3 layouts to start creating the post: full section, two columns, three columns.
Post Information
In this screen, general post information can be viewed and modified. Here, you can choose the cover image, associate categories and subcategories, and add tags for better precision of related posts.
The post status can be:
- Draft: post not yet visible on the blog.
- Published: post published and visible on the blog.
- Published with Draft: post published and visible on the blog with modifications not yet published.
5 - The Result
Fantastic!
Super fast!
Excited!
Super!
Michaela is very satisfied with the work; we have greatly facilitated her part of creating web content. Now, it is much more enjoyable for her to write a new post.
The Web App manager is easily extendable as it was programmed without the use of plugins and external libraries.
The site has good UX, and according to the feedback we gathered from users, it is user-friendly and organized in a clear and efficient manner.