https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/
Miro is an online visual collaborative whiteboarding platform that enables distributed teams to work effectively together, from brainstorming with digital sticky notes to planning and managing agile workflows.
With Miro, you can take advantage of a full set of collaboration capabilities, including video, chat, presentation, and sharing, to make cross-functional teamwork effortless and collaboration easier.
It’s becoming popular nowadays within the startups and UX design community, especially during the pandemic while people in various countries required work remotely. Today I’d like to share a quick analysis of the UX design of the Miro website’s home page and sign-up pages based on the below UX design psychology principle.
When psychology meets UX design — the PET design toolkit
I want to analyze it with the PET Design™ toolkit by Human Factors International about designing for Persuasion, Emotion and Trust.
When I landed on Miro’s home page, I could see it’s designed as clean, friendly and welcome at the first flow, with clean main navigation on the top.
Persuasion
There are two prominent call-to-action buttons (with high colour contrast), one is located right below the tagline, and another one is located at the top-right, which is a typical call-to-action location. The design and display of the button trigger users’ action easily with the emotional tagline (to be described below) and the button labels of “Start a whiteboard” and “Sign-up free”, which are typically some of the benefits the prospective users would get immediately. If the user is interested in Miro’s platform enough but still hesitating, the user might scroll towards the bottom of the page. At the page bottom, it displays a prominent page block of calling-to-action before the user exits. It prints a tagline of worried-free, sign-up free and joins 15 million users that echoes the key benefit the users will get and the key worries the users are worrying about.
Emotion
There is a large, bold and animated tagline at the top-middle that attracts users’ eyeballs. It’s animated with the second terms being varied:
“Where _____ teams get work done” … “Where distributed teams get work done” … “Where remote teams get work done” … “Where work from home teams get work done” … “Where telecommuting teams get work done” …
Trust
The middle part of the webpage displays information on the total number of trusted users, how they use Miro collaboratively with confidence and quotes from users from well-known enterprises who share with us their satisfying stories.
Signing-up
The Miro’s sign-up process is designed as clear, simple and straightforward. It requires minimum personal data from users for registration by using email. It also supports registering using single sign-on (SSO) with popular platforms such as one-click signing-up using a Google, Apple or Facebook account.
Conclusion
Miro developed persuasive and emotional design elements and implemented research-based methods throughout the design process to make its website more trustworthy and convincing that deepens the relationships with their prospective and existing customers by generating leads to conversions.