Catching the problem
As the homepage of my website proudly proclaims, I am many things. I’ve developed a multidisciplinary approach that allows me to practice and work in different fields.
I’m an engineer, a marketer, a designer, even a sport coach and both a student and a professor.
I’ve decided to approach to the professional world in that way, but it comes with a unique challenge:
defining who I truly am.
While my passion of blending technological and digital aspects with a human-centric mentality has opened numerous doors and kickstarted my career, has also presented me a dilemma.
Just the simple question “What do you do for a living?” leaves me pausing, taking a deep breath and responding with “It’s complicated, it might take few minutes to explain”.
That’s a serious problem, if even the person who’s living this life cannot define themself in a few words, how can I expect others, especially potential employers, customers or recruiters, to understand who I am and what I’m able to do?
I’ve looked for another confirmation, particularly relevant in an era where our digital footprint often speaks louder than words: Google.
After a quick search of my name, I’ve found my LinkedIn profile, that’s not bad, but for the same reason as above I think does not catch immediately the essence of my skillset.
Beyond that, there are a few sport achievements and a namesake architect from Macerata.
Clearly, there was a gap between who I am and how the digital world perceives me.
And as I’ve learned from the professor Pietro Orciuolo, during his course on UX, Digital Transformation and Online Positioning, at the University of Trieste:
if you don't define your value and meaning, others will do it for you.
How bias and branding affect my perception
As you may have understood now, this website is a canvas where I paint my multifaced identity, hoping that my words will offer a more transparent insight into my professional world.
The solution to my problem comes from concepts and knowledge about marketing and personal branding, strictly intertwined with the situation I’m talking about.
Sometimes people approach these subjects with crappy methods, long turns of phrases that often lead to a misunderstanding of the concepts.
Instead of that, I always prefer a scientific method, talking about cognitive biases.
A bias is a mental shortcut that allow our brains to process information in a faster way.
That’s fundamental for neuromarketing techniques and some of these play an important role on building our online persona:
- Anchoring Bias:
We are the first impression we make.
For every person that it’s meeting us (or searching about us) for the first time, we’ll be strictly anchored to what this person is making in its mind about us.
My Google results may lead to a distorted image, it’s important to align my true self to every first digital impression.
- Exposure Effect:
Familiarity breeds preference.
People tend to develop an emotional connection to things they encounter repeatedly, even if they are not paying attention to any of that.
My goal is to stay on people’s radar presenting my articles and thoughts. When someone will need a solution, it’ll know where to turn.
Prof. Orciuolo emphasized this principle with the motto "Stay on top of the mind".
This concept, further elaborated in Al Ries's book "The 22 Immutable Laws of Marketing", explains the importance of being the first in consumers’ minds rather than in the market.
That’s the third rule of the "Bible", but the first two explain its complementary idea.
How it’s essential to be pioneer in a new market (It’s better to be first than it is to be better) and how it’s difficult to obtain the leadership in a saturated segment (If you can’t be first in a category, set up a new category you can be first in).
These rules resume in the importance of finding my own niche, my Unique Value Proposition.
In my early career stages that is my adaptability, my ability to blend different skills, and offering a wide point of view over all the projects I’m part of.
These are only some of the biases involved on my decisional process (some other examples are the Halo bias and the Social Proof), but now let’s skip on the realization of this website.
The structure
The first step was choosing the best structure for the website.
How could I narrate my journey? From what could I take as an example? I probably learned the answer while I was studying at the UX Design Institute of Dublin.
During the Professional Diploma (I’m going to talk about this in a different article) was rooted the philosophy of learning-by-doing.
Throughout the course, I was asked to deliver projects about the subjects I was studying. That was both for my learning process and for building an effective portfolio.
A portfolio is crucial for everyone who’s working in the design industry.
It's a curated collection of your work, a reflection of your identity, and a window into your own working methodology.
It’s a way to demonstrate your practical skills, beyond your theoretical knowledge, and highlights your proficiency in the UX process, meticulously documenting each step with photos and screenshots to narrate your journey.
I started looking for other’s portfolios, searching for inspiration, but then I understood that while I’m deeply embedded in UX research and design, I’m also involved into various domains.
This multidisciplinary nature meant that the traditional portfolio structure might be too restrictive for me.
On the other hand, a blog format, offered the flexibility I needed.
It allows me to talk about my UX projects, as in a portfolio (mostly in “ UX insider ” category articles), but also provides me a platform to discuss my other passions, skills and competencies (like in “AI, Oh my! ” articles).
I’ve made my initial decision, obviously I’ll be able to introduce new sections in the future, but a blog was the best way to expose myself.
The CMS
The foundation of any website lies in its Content Management System (CMS).
A CMS is an online software that facilitates the creation and organization of web pages, articles and contact forms, without any needs of an extensive web programming expertise.
After a bit of research, my choice went towards Webflow, a CMS that has a significant acclaim in the design community.
This decision was influenced by two primary factors:
- Webflow stands out for its ability to easily integrate external code.
Moreover, its user-friendly interface makes it effortless to incorporate dynamic effects to page elements, enhancing the overall UX and interactivity of the website.
- Figma, a renowned platform for digital design which I’m familiar with, offers agame-changing feature.
With the Figma-to-Webflow plugin, designers can craft a design directly on Figma and then import it into Webflow.
This can give to a person the power of being both a designer and a developer, bridging the gap between design conception and website realization.
Always be human-centric first
It’s not just a buzzword, but a guiding principle. As designers, we must ensure that every element should be intuitive and easy to access.
Even for a seemingly straightforward website, it's imperative to remember that behind every click there is a human being that works with emotions, biases and pre-structured patterns.
No matter how simple a website might seem, it's essential doing design research and, if possible, usability tests.
Ultimately, focus groups and interviews seems useless for a blog, so how could I do?
I used a professional tool that I used during my job experience, that allows me to analyze and predict user heatmaps through artificial intelligence.
A heatmap is a visual representation that showcases areas of a website that receive the most attention by user’s eyes.
This tool is inspired by a project from the Massachusetts Institute of Technology (MIT) and helped me also finding blind spots, areas where the human eye doesn’t naturally gravitate.
Author's note: The images provided might not be an exact representation of the current website visuals.
However, the primary objective here is to demonstrate the tool's efficacy.
Over an half of the web traffic comes from smartphone, adopting a mobile-first approach is not just a trend but a necessity, so the website was tested with both desktop and mobile versions.
Heatmap desktop version
Heatmap mobile version
The tool offers a visibility score ranging from 0 to 100 for the analyzed pages. An optimal score lies between 60 and 80.
Scores below this range indicate that the pages might be challenging for users to understand, while scores above suggest an oversimplification.
Both the versions of the homepage, which are intentionally designed to be simple and straightforward, achieved a score of 78 and 63, respectively.
Obviously, a blog essence relies on what you can read on it. However, the initial mobile version of the articles text seemed to have readability challenges.
Heatmap of an article, mobile version, the human eye skipped the central paragraph
Blind spots of an article, mobile version
Sections with bold elements were entirely skipped by readers. The human eye typically scans texts with an "F" trajectory.
It’s evident how there’s a 0% attention span on a specific section, that it indicates that readers might struggle to understand the content.
To solve this, I decided to reduce the text's weight, which was too like the headings and subheadings.
I’ve chosen for a lighter version of the font and provided bold words with a more vibrant colour to capture attention.
Heatmap of an article, with a lighter font
Blind spots of an article, now you can notice the "F"
The adjustments resulted in the desired "F" scanning pattern, ensuring no section was bypassed.
As readers scroll, their focus progressively shifts downwards, allowing them to immerse themselves in the content.
The text refinements were also extended to the article presentation cards, with an impressive score of 72.
Heatmap of the cards, mobile version
Lastly, I tested also the form on the Contacts page.
With a positive score of 60, I was more interested in the visibility of the Call to Action "Send Message".
When it comes to buttons, the rule of thumb is simple: the bigger, the better!
The launch
And so, after a meticulous design process, with a blend of traditional principles and modern technology, my website is ready for its grand debut.
This article is the first step, a behind-the-scenes into the making of my digital platform.
As I’ve already noticed, the website it’s pretty simple and straightforward, but I hope I’ve illuminated you about how there's a world of knowledge and expertise that goes into its creation.
As we move forward, you can expect a lot of articles with the same sentiment.
Each piece will not only share my knowledge and experiences, but also showcase my view of the world, where boundaries are blurred and discipline merges for the better of the humans.
.svg)
.svg)
.svg)