Lead Product Designer.Val Mercenaro
Co-founder.Hannah Dixon
Front End Developer.Val Mercenaro
UX Designer.Val Mercenaro
.Project Info
A natural progression from service-based digital product to product-based.
The vision for DNK was to create a digital hub that location independent business owners and students could use as digital skills toolbox (kit), with everything they could possibly need to “Fund Their Way” to a digital nomad lifestyle. Today, it is number one hub for students from over 75 countries and a thriving community dedicated to supporting one another.
.My role
Co-founder of DNK, Lead UX Designer (untill February 18), and Developer
During the period in which I held that position, I participated in the exponential success of our kits up to thousands of downloads (in a very short period of time).
I have designed, copywrited and developed the original platform, the LMS, affiliate platform, all user interfaces for mobile, resources and graphical concept.
Main Challenges
UX & business’ goals related issues
High bounce rate and low CR
DNK message resonated with its audience from launch day 1 and saw rapid growth mostly thanks to social media referrals.
We didn’t have a logo nor a decent site, yet our community was growing fast.
Our intent with the site design was to refine and improve both the quality of the user experience, decrease the high bounce rate and, consequently, raise the conversion rate on our website services.
.How I Solved It
I wrote a copy/content that was laser-focused on the pain point of the user and by optimizing the site loading time to 1.2s (fully loaded time).
UI improvements were implemented, suggested by meticulous A/B tests which ran periodically with surprising results (not always positive of course but we did get to know our audience very well and grow with them).
Understanding the Digital Nomad culture
The Digital Nomads’ culture and language were absolutely unknown to me, as a matter of fact, Hannah (co-founder) was the “Nomad” and I was the “Digital” of the Digital Nomad Kit :). But I was aspiring to become a Digital Nomad so it was no difficult challenge for me to research as much info as necessary about our users.
.How I Solved It
I conducted in-depth market & competitor research together with periodical polls within our 3 different FB groups. Our community is incredibly responsive and collaborative so it was an easy step to implement. Also, this research turned up to be extremely useful for the SEO I did at a later stage
A lot of services provided, two different types of users, two different authors
Another interesting challenge I had was to design a platform that conveyed 2 different people’s services, for 2 very different types of buyer personas. Simultaneously and clearly (naturally).
.How I Solved It
I made good use of colors at first. Colors helped us to guide the user to the desired action/outcome, throughout the buying cycle, creating a clearer & flawless, goal-driven user flow.
Hannah’s area was
Simplify and take in consideration usability
As you may imagine, relying on colors to convey our message brought in other issues related to usability.
The services offered were just too many also, and those which were actually requested by our specific niche were only a few, and mostly related to VA training.
.How I Solved It
Eventually, we radically simplified our users’ lives by moving from service based, to product based offers.
We packaged the main content related to their training and provided them with all the tools & resources they needed to accomplish the same goals in less time and cheaper – above all, in complete autonomy. That’s when the different “Kits” came about, together with the 5 Day VA Challenge.
Mobile Platforms
Our signature kits’ interfaces and UI elements
.5 Day VA Kit’
It was probably one of the most acclaimed challenges on Facebook during 2017. Still today it is considered as the fastest way to start working on the web as a virtual assistant or web administrator.
It was born as a Facebook group challenge, at the end of which we were offering participants the opportunity to bring the work done within the week to a much more professional level, but this time it was a paid offer.
This kind of FB challenge is a marketing tactic called “Lead Magnet” through which you gain the trust of the users so much to be able to “accompany” them within the sales cycle without any gimmick, or better, without the need to use old methods of sales that are invasive and frustrating for the user, often unsuccessful.
Later we added it as a bonus in the VA Starter Kit so we could provide the main starting point for students who could not follow it live.
.VA Starter Kit
The VA Starter Kit is our signature course for beginners the online space. We teach our students the stuff that will set them up with strong foundations for long-term success, whether they just want to work from home or want to travel the world.
It’s essentially the main kit that we provide to get started as a Virtual Assistant.
It was born of the need to have virtual assistants at our side who were able to carry out the administrative work for our customers as efficiently as possible.
The success of the Kit I think is due to the simple, no-nonsense methodology, free from information that is not directly applicable to the working environment.
In practice, we created it as if we were simply instructing our own virtual assistants to daily work.
.Material Design…with a twist!
I use Design Systems, a lot. Material Design is probably the one that I leverage on the most, despite being an iOS user.
But with MD, the elements acquire realistic shadows by being hierarchically structured on top of each other, giving depth and three-dimensionality to the surfaces of the interfaces.
Essentially that is what improves UX as it allows the user to focus on the important elements of the UI, like the CTAs or the navigation.
.Typography
Roboto is always a good choice for UX…
…but as a creative, it’s quite hard to resist the pleasure and satisfaction of Font Pairing!
So my solution is often to use Roboto as base font and then pair it with matching typefaces (usually applied on titles & headings).
In this case, I have used Oswald typeface because of the fun and “cartoony” vibe of the original graphics.
MATERIAL DESIGN BUTTONS DYNAMIC, LIGHT BG
MATERIAL DESIGN TEXT FIELDS DYNAMIC, LIGHT BG
MATERIAL DESIGN BUTTONS DYNAMIC, DARK BG
MATERIAL DESIGN TEXT FIELDS DYNAMIC, DARK BG
IOS ICON FOR RETINA DISPLAY
.Logo & Corporate Identity
We’ve chosen earthy, bold colors to represent the Digital Nomads adventures, while the logo holds on to the depth and techy feeling of Material Design elements.
Despite printing and stationery graphic is not apparently related to UX strategy, I believe that customer loyalty is totally related to it. We created a sense of belonging second to none.
LETTERHEAD FRONT & BACK
SHAMELESS SKETCH OF LOGO
RETINA DISPLAY FAVICON
The Outcome
Ultimately, results speak for themselves
.Our Raving Fans
.Overall Takeaways
Be Inspired
Working as Lead Ux Designer within an environment of particularly driven and inspired people can’t be nothing but extraordinary.
Follow The Process
In design, just as in life, The Process is what really counts…
Test, Improve, Grow
…oh, and KPIs! They do count. A lot. Here’s some sexy numbers:
%
Bounce Rate
%
Conversion Rate
%