Design at Tucows or d@t (pronounced “dat”) was a redesign project led by me, Janelle, an ex-accountant and CPA. When I began working on this project in January of 2022, I didn’t know I was going to become a full-time Product Designer several months later, or that d@t would be the vehicle that led me there.
I was still working in the Finance team at Tucows when I discovered my interest in design. I wanted to gain experience, so I reached out to Brigitte, Director of Product Design and UX, asking her if there was anything I could help with on the side. Her response was an immediate ‘yes’ and that she’d find something for me. I was ecstatic, expecting to be assigned a screen or a flow on a real project, a contrast to the made-up projects I had completed at that point. Brigitte came back to me with something I would’ve never expected — an entire website to redesign from scratch and complete freedom to do whatever I wanted with it.
Now that you know d@t was designed by an accountant, I hope it challenges any part of you that believes we are only meant to do one thing. I also hope it sparks some interest in you to read along and see how I pulled this off without any prior design experience. Now without further ado, here is the story of d@t.
Why Tucows’ design team needed a new website
We didn’t. There was never a particular problem that was defined.
The goal of the old website was to attract top talent to our team and increase the number of applicants to each posting.
We think it served its purpose pretty well, but since no tracking features were ever put in place, we had no quantifiable data to prove that it was getting more people to click on that ‘apply’ button.
What did I do with the lack of data? I shifted my focus towards something that was available to me — our design team.
How my colleagues felt about applying to our team
I started listening to my colleagues, paying close attention to any opportunities within the application process to make that experience better for future candidates. I had several conversations and launched a team survey keeping a few questions top of mind — What were my colleagues’ expectations during the application process? Were any unmet? What was important for them when joining a new team?
I learned that they sought answers to two main questions when seeking a job — 'What are the people like?' and, 'What work would I be doing?'. The old website only scratched the surface.
“It left me wanting more. I remember thinking there wasn’t enough information or photos to satisfy my curiosity.” — Anonymous colleague
People on the hiring team also always put their best selves forward during the application process, which, as my colleagues noted, makes it very difficult to get a good sense of what it would be like to work in the team.
“I don’t like when content on a site feels forced. It needs to feel natural. Show rather than tell.” — Anonymous colleague
From all of these insights, I knew that the biggest challenge for d@t would be capturing who we are and what we do in the most authentic way possible.
Another huge opportunity for d@t
Midway through the project, I became intrigued with the idea of proving design’s value within a business setting. After only a few months of working in design, I realized a hard truth, which was, many business people don’t acknowledge the intentionality, thought, and power in design beyond just making things look pretty. Design isn’t often viewed as a business thing, and that’s a problem that remains to be solved within the entire industry.
So I identified an additional opportunity with the website — to demonstrate more of the design process so that the business can see its value.
d@t’s objectives
With this new opportunity in mind, I defined three key objectives for d@t —
- Showcase the work, so that people know what we do
- Shine a light on the people, so that people know who we are, and
- Demonstrate thought leadership, so we can advocate for design in the world of business
The goal is to achieve our objectives in the most authentic way possible. The more we stay true to ourselves — sharing our thought processes, wins, and even losses — the more likely we are to attract the right people and demonstrate design’s value.
The site would serve as a beacon, shining a light on the people, our work, and our perspectives so that we can grow our team with the right people and be strong advocates for design.
Building the bones of the site
In my initial sketches and wireframes, I set three categories or “frames of mind” — mild, medium, and spicy — to generate as many ideas as possible. This process forced me to go wide and consider the extremes, along with everything in between. The advantage of this was having plentiful ideas to choose from, and the result was a happy blend of all three categories.
The structure of the site is closely tied to the three objectives, with each page going deeper and deeper into the two themes people want to know more about — the people and the work.
It’s a simple structure — but every page, and every section, is purposeful in giving that job seeker more information as they spend more time on d@t.
The new additions to the website were ‘Stories’, ‘Articles’, and ‘Individual Profiles’, which would deliver the authenticity job seekers need in their search.
‘Stories’, or the blog, was about showing the rough work — the sketches, raw ideas, processes, and business rationale behind designs.
With individual profiles, the team could share anything that resonated with them — whether it was a funny GIF, an image from their life, or a Spotify playlist they loved — so that their personalities could shine.
Defining the visual brand myself, and failing miserably
When I first started on this project, I wanted to do everything all on my own so that I could prove to everyone, and myself, that I had what it took to be in the design field. I worked hard on the visuals, coming up with so many iterations of what the site would look like and drawing inspiration from as many award-winning sites as I could find. But nothing clicked.
What did I learn? I learned to let go. I learned that well-designed products come from a team of people and a diversity of backgrounds. Sure, I sharpened my visual design skills in the process, but at a certain point, I knew it was time to ask for help and recognize what others could execute better and faster.
The moment I let go of my desire to design every single element of this project, d@t blossomed.
Establishing the brand together
Building the brand was the most collaborative element of this project. After all, the brand needed to reflect all of us, not just me or what I felt ‘looked good’.
A smaller subset of the design team was formed, with representatives from Product Design, UX Writing, and Design Ops.
Through countless meetings and sessions, together we came up with the brand for d@t as well as Hubble, an internal product that focuses on the onboarding experience and centralization of knowledge. Every element — from the friendly illustrations, bold and retro font, and quirky tone of voice — was thoroughly discussed and finalized by a team vote. My main job was to carefully weave those elements throughout every fabric of the site while maintaining the intentionality of each page.
The brand voice and copy were challenging to nail. I sought help from Sr. UX writer Nancy Webb, and we held a workshop to collect real thoughts and perspectives from the team themselves.
Card sorting helped solidify our team values — have fun, be kind, and stay curious — and a brainstorming exercise allowed us to gather real sentiments about working in our team. After synthesizing all of the comments, each value was paired with a real quote from a team member, essentially vouching for each one.
Improving the user experience (UX) of the site
Even though we haven’t tested the website with real users yet, there were a few tweaks I made along the way which I believe were significant UX improvements. Here are two examples.
Eliminating carousels
One of the first major lessons I learned — carousels are a nightmare for accessibility. Why? It’s tough for keyboard and screen reader users to interact with them.1 In an earlier iteration, the website relied on carousels in various spots.
I took them all out due to accessibility concerns but later realized that it was also a better design choice overall. Take the values section for example — replacing the carousel with a vertical parallax that users would scroll through drew equal emphasis to each value, without taking up too much space visually on the page.
The expected result is higher engagement because most people are likely to scroll right past a carousel without interacting with it.2 Putting more focus on what we care about also aligns with our goal of attracting the right people who resonate with our values.
Removing empty states
Something I didn’t initially plan for was that not everyone on the team would want or have time to build their profile pages. When I realized this, my first reaction was to design an empty state for those individuals. I tried to come up with something witty and light-hearted, using it as an opportunity to demonstrate more of d@t’s brand.
There were two problems with this.
Firstly, there would be several people with an empty state, which would require the user to use trial and error to find profiles with actual content. For someone just looking to get a better sense of the team, this would be time-consuming, potentially causing frustration and/or drop-off.
Secondly, there was nothing the user could do to resolve or ‘fill up’ that empty state. A good empty state should not only explain why it’s empty but also what to do about it.3
In this case, if a d@t team member chose not to share anything, there would be a permanent empty state offering no opportunity to fix it.
The resolution was simple but effective — remove empty states so users can find active profiles faster and get a sense of the team more efficiently.
This meant that an empty profile would no longer be clickable on the team page. I also added a hover state and arrow for active profiles, differentiating them from empty ones so they were identifiable.
Lessons learned and key takeaways
Here are some of my learnings and key takeaways from working on d@t and transitioning careers from finance to product design.
- Design is imperfect, iterative and collaborative — the faster you embrace this, the faster you will improve
- Understand when you need to let go of the work, accept help, and allow others to do it better
- Usability always trumps beauty — if your user can’t use your product, it doesn’t matter whether the design is beautiful
- Design is business
Final thoughts
It has been an incredible journey designing d@t from scratch and seeing it launched into the real world.
What’s in the works right now? I’m formulating a research plan so we can test d@t with real users and continue iterating on this product to help achieve those 3 objectives — showcase the work, shine a light on the people, and demonstrate thought leadership — with the desired outcome to attract the right people and prove the value of design in business. After that will likely be many more iterations until we get it right.
d@t was not just created by me. Thank you to Brigitte, Meredith, Elise, Karen, Kay, Nancy, and Keven, who contributed significantly to this project and to my career transition. And thank you, reader, for spending the time to read through my process. I can’t wait for you to see what’s next.
Footnotes
Credits
