How we surprisingly nailed user-friendliness
Our user journey journey
I had just gotten back from a meeting with the members of a foundation. I had been Technical Support for their annual event twice now. But I had grown increasingly frustrated with the system they employed running on the antediluvian Microsoft Access. I couldn’t see myself dragging this any further. I was ready to quit. “If only we could…” I muttered to my roommate.
“We’ll hack this thing together in one weekend!” he exclaimed. Little did we know that it would take another 5 months before we would finally reach the end of our user journey journey.
The web application we developed is a platform on which roughly 300 Dutch flower growers can register their products to participate in a yearly summer flower contest. Previously, the registration was completely offline, so we built that from scratch.
On the other side of the platform, the organizing committee can keep track of the registrations and deliveries leading up to the event. On the day of the contest, a process of blind grading is used to determine a winner amongst the flower submissions.
Although the floral industry is still tremendously important to the Netherlands, digital transformation in this field has been trailing. For example, the auctioning company Royal FloraHolland, which trades 90% of all flowers in the Netherlands, only begun its “Digital First” strategy since 2017. There are some outside initiatives though, which have been reaping the opportunities, like the subscription-based flower delivery service Bloomon.
This trend of lagging in technology is also very apparent with the growers themselves. They are mostly Generation X (1960s-1980s) or even late baby boomers. And considering their more practical propensity, our target audience was quite digitally illiterate and sometimes even technophobic.
Hence, while appreciating the target audience we were serving, we established early from the get-go that, in order for this product to succeed:
- It needs to be as simple as possible;
- We should always have the user in mind.
It is these two notions that eventually stretched our journey to the five months it took. Firstly, for our web app to be as simple as possible, we needed to understand the user journey end-to-end. And secondly, the only way of having the user in mind continuously is by figuratively climbing into the user’s head. We had to better understand the user’s mental model.
Understanding the user journey end-to-end
Due to the arcane nature of the user journey, it took us quite some time to better grasp all the nuances and phases of the process involved. But it is exactly because of this, that we were able to greatly simplify our product and digitalize the registration almost seamlessly, such that some growers were done within under 2 minutes.
For starters, we dumbed down the number of views the user would see to just two: an overview page and a registration page. There is no reason for an intricate wireframe if the only thing a grower wants to do is to submit his/her flowers for a competition.
Yet we did not cram all the information on those two pages. We prevented information overflow — particularly detrimental for first-time users — by serving the information timely.
With the help of Django (an open-source web framework written in Python), we were able to generate apropos HTML and CSS for the same web page depending on all kinds of conditions. This year’s and previous participation (yes/no) defined what a user would see and could click. But also timing defined when e.g. a grower could print an automated form to accompany the delivery of the flower submissions.
Understanding the user’s mental model
Besides embracing the user journey, we realized over time that we, the developers, perceived interface concepts much differently. We concluded that the target audience’s mental model in this regard was significantly unlike ours. Therefore, we deliberately exposed ourselves to any biases we had towards the product by generating three types of user feedback:
- In-person user testing
- Live customer support
- User recordings
1. In-person user testing
The in-person user testing was particularly revealing. Firstly, it gave us the opportunity to understand better the motivations of the growers to participate in the contest (and thus what would be their attitude towards our product). Furthermore, the pressure of our presence most likely exacerbated their understanding of the registration process, such that — counterintuitively — it gave us the most genuine feedback.
A great example of a user comment was our use of the trash bin (see on the right in the image below). To us, it felt intuitive to empty the existing registration table by clicking on the icon. However, for our users — being acquainted with Windows — their initial response was to drag-and-drop products into the trash. Clearly, their mental model did not co-align with ours. We eventually decided to do away with this icon (and the undo-button), even more so for the sake of simplicity.
2. Live customer support
Nothing is worse than using a product for the first time and having no lifelines to reach out to if you get stuck. Omnipresent customer support is imperative and being on top of it just as much. Moreover, the interaction you can have with the user right there and then, can give you valuable feedback within its context.
These days it is as simple as installing a live-chat on your webpage, such as Intercom or Zendesk. In our case, we used Tawk.to, which is not as full-fledged as any of the other services, but it’s exactly what we needed. And free.
One clear lesson we took away from our customer conversations was that adding a novel flower was not intuitive enough. We improved on this by iterating on the appearance and choice of words and by providing a small tutorial.
3. User recordings
Another massive trove of UX information we found was the user recordings rendered by the service Hotjar. Just to be clear, we were not secretly videotaping how the user navigated through everything on their device. It registered — only — e.g. mouse clicks/movements and changes in the HTML on our own webpage.
During the registration period, we viewed the recordings daily, making us nimble in spotting unintended behavior. One example, which was quite puzzling for us at first, was that our users kept coming back to our web-app using our initial e-mail with a set-password link. Since the link expired at some point, the grower was subsequently confronted with a quasi-error page, causing confusion on how to get in.
After talking with some growers, we found out that the concept of a domain name (like airbnb.com or amazon.com), was not as clear-cut. So instead of going to our platform’s URL — as we thought they would — they would find the first e-mail that they received, click the link, and enter the page from there. We improved on this, by making sure that in later e-mails a simple button “View registration” was included.
A second immense learning for us was to better appreciate browser agnosticism; quite some bugs were incurred by simply disregarding its effect on bygone (versions of) web browsers. Hello Internet Explorer!
On August 19th the platform opened up for beta users. Two days of bug hunting later, we gave access to all users, accumulating 379 flower submissions in the two weeks leading up to competition day.
Starting out we had absolutely no idea of how much work would go into developing our web application. Over time, we learned that to stay true to our mission statement, we had to understand the user journey thoroughly and position ourselves in our user’s perspective.
We feel that with over 50% of all the users in our target audience wholly managing the registration themselves, we’ve succeeded in delivering a bespoke user-friendly product. Additionally, it came as a great compliment that the committee member — who feared adoption by the growers and resisted change the most — reveled: “It’s amazing! I wish we had had this system 20 years ago.”
Michael is an internet technology enthusiast and freelancer in Startup Operations Management. He enjoys bringing structure, analyzing and devising business strategies for companies. Bring me to his LinkedIn!