Fjordle wouldn’t exist without the community behind it.
Reflections on the borders of design and code from a bold & curious Product Designer.
Hello there! I’m Bruno, a Product Designer based in São Paulo, currently working at FJORD Brasil. Find me on LinkedIn, let’s have a chat!
TL;DR: Coding can be an extremely useful tool in a designer’s utility belt. Key take-aways have been included towards the end of the article.
Last Friday Fjordle was launched — the Fjordian version of our early 2022 internet sensation, Wordle — at the first day (out of 4) of our remote, Friday-based month-long event, Equinox 2022. This article tells a little bit of the story behind it, and brings some reflections from my standpoint as a Product Designer.
How Fjordle Came to Be
I’m a strong supporter of the power of communities. It is actually very hard for me to imagine my life without the supporting communities I’ve had in my surroundings — sometimes whole groups of people, at other times as much as one pair of active and empathetic listening ears. So when I was invited to be a part of the team of Local Studio Leads, who would assist the event’s organisation to help make Equinox radically local, I was delighted.
In the ensuing weeks, I found myself in the midst of conversations discussing how to make an event the size of Equinox (connecting upwards of 2 thousand designers across multiple timezones) fun and engaging, while I could almost touch the company-wide growing atmosphere of excitement, collaboration and creativity. There wasn’t one person I talked to about Equinox that could quite curb their enthusiasm about the event.
In the meanwhile, and completely unrelated to Equinox, Wordle has stormed the internet. Personally, I was probably part of the early majority adopting the game: at first, I confess I was annoyed by the tiny squares with a cryptic opening line (such as “Wordle 205 5/6”) that popped up here and there on social media. I didn’t pay any heed, until I saw the Brazilian version of it doing the rounds on my Twitter timeline. Then I had to halt everything and pay attention. It kind of blew my mind.
Since then, the world has seen a myriad of Wordle spin-offs spring to life — my favourites so far being Quordle and Globle. The original game, created by Welsh software engineer Josh Wardle to entertain his partner during our trying times (even more so as of the writing of this article 🇺🇦), has been sold to the American newspaper The New York Times, not only for an eye-catching sum, but also for a very interesting reason: “it’s not my full-time job and I don’t want it to become a source of stress and anxiety in my life”, Wardle told The Guardian. I find this reasoning very compelling, almost meditative in a way, probably because I work in the same field as Wardle, only that I hold a different seat at the table.
As you can probably tell, I’ve been a bit hooked by this simple “guess the word in six tries” game ever since. I’ve sent the link to a couple of friends, I share both my English and Portuguese scores daily on one of my group chats (God bless wordleworm friends), and have gone as far as introducing some coworkers to this small and apparently innocuous modern-day addiction. It’s not quite clear to me how though, but somehow the idea of having an Equinox-themed Wordle ready to be played during the days of the event seeped into my subconscious. It just felt right.
It was supposed to be a very simple concept: I only needed 4 words (for brevity’s sake), they would be released on each Friday and would be the correct word until the next Friday. The words have been picked based on the event’s motto “Back to BOLD”, and as challenging as it is to find four 5-letter words related to this one specific theme, they’re meant to be a gratifying and inspiring surprise once guessed.
So I took to coding. I have had past experiences with HTML and CSS and really, really loved it at the time, so I thought it could be a fun challenge to take on; I consulted with some code-savvy friends before undertaking this task, and I was energetically encouraged to proceed. So I rolled up my sleeves, rummaged for good tutorials on YouTube, pulled up my light-themed Visual Code, and started typing out tags, selectors and… hitherto unknown to me, variables and functions.
There’s something invigorating about the developers’ bubble (or at least the one I’m somewhat close to), which is the can-do attitude. It doesn’t matter your age, your amount of previous experience: sit down, code, and it will come along.
It’s pretty inspiring to see devs taking to learn these coding languages they’ve never messed with before and gaining momentum, bit by bit coming in full bloom with their new acquired skills. Maybe it’s easier for me to have such a positive outlook because I am objectively removed from all of the nitty-gritty involved in learning, say, how to work with a brand new database program, but still.
After a couple of somewhat entertaining hours following along a very neat tutorial, bada bing, bada boom — I had a faithful clone of Wordle. It was beautiful to look at, it had even a bit of motion to it, but I wasn’t anywhere near done with it: as a Product Designer with a knack for visual creation, I knew I could stir the look-and-feel of Fjordle into a more interesting direction, aligned with the event’s visual identity and much more usable than Wordle is.
That was when I began playing with colors, components and states. Coming to the Figma canvas after having just built the HTML of this product I was sketching gave me an enormous boost in confidence: UI design is not about just squares and text strings floating around on a rectangular frame; it’s about div nesting, flex-box, the flow, and so much more. There is an underlying sense of purpose when design meets code. And that’s one of the things that enthrall me in going hands-on in coding.
Then, as I was adapting the style sheet to fit my design, I reached a turning point in the timeline of Fjordle: by having to interact more with the interface in order do some testing around, I started to dig up some bugs that weren’t covered by the current version of the code.
And this is where the plot thickens.
My first instinct was asking for help. Now, how I could ask for help in an effective and optimised way, was a valid concern of mine. And so I began a process of documenting, in a very rudimentary User Story format, what my code was already able to do, and what it still lacked. In this way, I could save up my time as well as my friends’ time (since they wouldn’t need a deep dive in the code to hit the ground running) when asking for them to chime in with their ideas.
This proved to be the best thing I did collaboration-wise, since with this document I was able to, with a simple and brisk onboarding, bring in at least 3 different devs at different moments of the project.
I shared this document with a couple of dev friends, so that they could help me assess which stories would be more challenging or easy to tackle, so I could go straight into debugging… and I found myself experiencing an episode of coder’s block. Even having a couple of clues on where to start and what to do, I would look at the code and not know where to begin, or even how.
As mentioned above, I have had past experiences with HTML and CSS, but this was my first time trying my hand at JavaScript. Which goes to say that all the repertoire I’ve built and problem-solving I’ve done in the other two languages, needed to be done in JavaScript. The problem here is that I had a deadline coming up: I was a week away from Equinox’s first day. To be more precise, it was Monday and Equinox would start on that week’s Friday. And the learning process, while it might be obvious, requires time.
I have to be honest — it’s very frustrating not being able to make the code perform what you need it to, and I have been harbouring this frustration ever since I hit this plateau in the project, even to this day. After unsuccessfully trying to debug by myself, I went to a friend to vent these feelings of defeat, and my friend asked: “Already giving up? But how much time have you spent learning Javascript so far?”
About 10 hours off my weekends, it turned out, of writing code, trying to find answers on Google, looking for basic JavaScript content on the internet, trying out very basic JS exercises, and maybe a handful of minutes just staring blankly at my code as I still couldn’t budge an inch. And Equinox was right around the corner.
Luckily, as I mentioned above, I’m a strong supporter of the power of communities. I not only cultivate my communities as best as I can, but I’m also fortunate to be a part of Fjord, where connection and generosity are values fostered throughout the company every minute by its amazing people.
So I asked for more help. Using the super power of being a Fjordian, I posted an ask for help in one of our forums and Peter, a Design Manager from the Netherlands currently located in the U.S., came through with a very pragmatic and enthusiastic attitude. I explained to him the context of the whole thing, showed him my backlog and he very kindly agreed to lend a slice of his afternoon to Fjordle. I sent him the link to my repository and he returned an annotated .js file that helped me to understand just what changes he’d implemented, and why. (By the way Peter, if you’re reading this, I am big-time thankful for your thoughtfulness!)
As it turns out, Peter was a crucial piece on this puzzle, because right after his contribution, I managed to borrow a couple of (nightly) hours from a local, lovely friend of mine, who doesn’t even code in JavaScript, but who eagerly agreed to help out with a project in an event oriented language, something they had very little experience with but always wanted to dabble on (I suppose this is a perfect example of one of those shenanigans from the dev bubble I mentioned above). In any case, Peter wrote the date validation bit of the application, and having his decision-making rationale exposed on the code not only helped my friend to navigate JavaScript but also paved the way for how the validation logic turned out eventually.
I must have spent two or three nights in what I can only describe as idiosyncratic pair-programming sessions with this latter friend of mine, following along whatever was going on the shared screen in our call, and basically performing two main tasks: 1. explaining how the code had been built thus far, detailing whatever functions and variables there were before and ahead, in order to reduce the risks of breaking the code; 2. keeping track of the project’s backlog, which at this point had become a Value-Complexity quadrant, built on our assessment of value-generation for the end user, as well as effort/complexity based on my friend’s coding skills.
Fortunately, we synergised really well collaborating in this way, and were able to achieve a playable, mostly (but not entirely) bug-free MVP of a product, ready to be launched and enjoyed by Fjordians all over the globe, as well as a few supportive friends to whom I very excitedly showed my accomplishment. I can certainly say that I didn’t sleep great in the days leading to Equinox, but I was so invested in the project that I wouldn’t have it any other way.
The cherry on top (at least for me though) was a last-minute addition right before launch. One aspect of Product Design that I’ve really been meaning to learn more about is the intersection between design and data science. In this regard, I’ve been looking for any and every opportunity to come closer to this area, and this is why I decided it was a good idea to plug Fjordle to Google Analytics so I could begin to dip into this whole new and very interesting universe.
Plugging an application to GA is as simple as adding a tag to your code; but understanding, piloting and drawing insights from a GA dashboard is something else. My main difficulty lies in the terminology used basically everywhere — titles, labels, categories, menus, etc — , but again, I’m fortunate enough to have a supportive data analyst coworker who has showed me the basics of GA, which allowed me to get this very neat screenshot above.
After setting up GA, Fjordle was finally ready to be launched to the world, and it seemed that people were delighted to see a tailor-made version of Wordle in the Fjordverse. I was exhilarated to see people accessing the link in real-time through Google Analytics for the first time. A very cherished moment indeed that I’ll keep with me for a while.
Main Takeaways
In the aftermath of the launch, I felt I needed to take the time to reflect on the whole experience. Here are some takeaways from the experience.
- The main thing that struck me in this journey is that I have been simultaneously performing the role of a product designer, a product owner, and a developer throughout. I started out as an amateur developer, but soon realised that I had to very quickly turn into a nifty product owner if I wanted to meet the deadline to release this application. Which goes to show just how much having capable people to be the liaison between a product idea and a working digital product is a must in any scenario.
- I’m also a firm believer that knowing how to code is beneficial for any designer, and going through this experience only confirmed that this is the hill I choose do die on. Earlier this year I had decided to brush off my coding skills, by learning how to do web scraping, and this is the type of side project that pays off tenfold, way beyond the single purpose of learning how to web scrape. It teaches you about code, about the tenets and challenges in this craft, and ultimately gives you thoughts and words to formulate good questions — which is crucial for getting critical answers.
- In the case of designing screens for web applications, there’s no way around it: no matter what you design on a Figma frame, this thing will eventually come to exist in the real world; and for this thing to come to life, it will have to abide by the HTML and CSS “rules”, at the very least. It should be blatantly obvious the need to understand at least the basic syntax of both languages as a UI designer.
- What is more, knowing the nuts and bolts of programming languages improves a designer’s ability to communicate with developers who are joining forces on the same product, because it helps to better understand the constraints and needs of both parties. Being able to communicate means frictionless collaboration, which seems to be a common pain-point as far as I’ve seen in my Product Designer path.
Now something to be paid attention to is that the can-do attitude is generally a great idea, but it requires our most scarce resource in the workplace (and in life, one could argue): time. And I definitely didn’t have much time on this one. The event is running, there’s a couple of bugs and improvements that need implementing, and I have my own workload as a full-time designer to tend to.
Another thing I’ve been giving much thought to since launch is this: in the wake of Fjordle, I would like to be known not as a JavaScript connoisseur (I still have a bit to go to get there), but as a passionate Product Designer with a gluttonous sense of curiosity, who is able to understand the language of and communicate with specialists, working towards a viable, working, value-outputting outcome. To me, this is the biggest value generated by Fjordle to my career path.
And finally, I cannot go without repeating once again that Fjordle would never have existed without my supporting community. I am thankful and indebted to each one of them, and I hope I get to pay back in generosity and zestiness all that which I have been given. My role as a connector of crafts and minds was indispensable, too. I’m curious to know what’s around the next corner on my Product Designer journey.
Final Thoughts
So Fjordle is deployed, Equinox is running, and there’s still lot’s of room for improvement in the game. Version 2.0 is live, in which responsivity has been implemented, so I hope to see the mobile device bounce rate going down on my GA dashboard. I have considered taking on a simple JavaScript challenge to hone my skills and see if things finally start to click for me in JavaScript. I would also love to build very specific metrics on Google Analytics based on user completion rate, browser refreshes, etc., to get a better picture of how people behave in this type of application.
However, all of that apart, the most sensible thing right now is probably taking a break from coding. The initial excitement with Fjordle was tantamount to the feelings of being overwhelmed and burnt out in the aftermath. After all, when it comes down to me and coding, in the words of Wardle: “it’s not my full-time job and I don’t want it to become a source of stress and anxiety in my life.”
👏 Mind some claps? They’re much appreciated! 👏
