Project overview
First impressions matter
Research conducted by Click Boarding, an onboarding software company, indicates that 69% of employees are more likely to stay with a company for three years if they experienced great onboarding. They also uncovered that organizations with a standard onboarding process experience 50% greater new hire productivity.
Needless to say, a seamless onboarding experience goes a long way. That’s why at Tucows, we created an initiative to revamp an existing onboarding experience we had in place dedicated solely to the design team.
The original site was pretty bare-bones. It only provided descriptions of the different functions under the design team and the members that made up those functions. We wondered what else we could provide for new and existing design employees to set them up for success within their roles. Thus, we set out to do some much-needed research that would allow us to get direct feedback from our teammates.
The dream team
As much as it was tempting for us as Product Designers to dive right into the exploration phase, we knew that the best products are created in collaboration, with people from diverse backgrounds.
We made it our first priority to organize a team that would provide the necessary expertise for everything we hoped to achieve. Our team included Design Engineers Kay Evans-Stocks and Karen Evans, Product Designer Janelle Leung, UX Writer Nancy Webb, Design Operations Manager Keven Lupien, and Director of Product Design and UX Brigitte Kovacs. Often referred to as the “dream team” amongst all of us.
We ensured that our team met on a bi-weekly basis in order to gather perspectives from each important role throughout the process. We also reminded ourselves to have fun with these meetings. Being casual and relaxed allowed us to have open conversations with one another and to contribute to something that we’re all equally proud of.
The exploration and discovery phase
We knew the first steps in approaching this redesign would require a lot of research. Our first round of research within the design team was done by creating a simple survey with Google Forms. We had three primary goals that drove our research:
- To gather insight into what the design team currently struggles with day-to-day.
- To uncover any challenges or obstacles that design team members faced when they first started at Tucows.
- To uncover any further opportunities that could potentially improve the operational efficiencies for new and existing employees.
Making sense of the data
We were lucky that the design team was eager to share their input, and contribute to this rebrand. It didn’t take long before we had met our goal of 10 survey responses. We set out to synthesize our findings and group them into common themes. The 3 most prevalent themes were:
- Unorganized onboarding process: The majority of the responses reflected on an onboarding process that was unorganized, disjointed, and brief.
- Onboarding lacked centrality: Many responses touched on current processes that lacked centrality. Indicating that there were too many materials in different places and that it took a while to become familiar with where all the necessary resources and information lived.
- Lack of connection with team members: Several responses reflected on the need for stronger relationships and a better understanding of which team members are responsible for what. There seemed to be a lack of human connection in the onboarding process.
Based on the survey results gathered from the team, we were able to create three strong research-driven goals that would guide our decision making.
- Create a single source of truth for information and resources related to the design team.
- Build stronger relationships amongst team members.
- Create a better understanding of employee structure and roles.
From this, our talented UX Writer Nancy Webb crafted us a mission statement that would guide us as we worked through this project:
“Our mission is to build a single source of truth that provides design team members with the tools and documentation they need, and connects them to the stakeholders and collaborators that will help them succeed.”
The fun part
Now that we had a sufficient amount of insight from the design team, it was time to start flushing out what this experience would look like and how it would behave. This is where the fun begins. Rather than the two of us sitting in front of Figma trying to establish a brand on our own, we decided to incorporate mini branding workshops into our team’s bi-weekly meetings.
This approach allowed each of us to have some say in the brand. We all played an important role in creating the look and feel for what we now call “Hubble.”
Hubble
Like the telescope. An analogy that works well because a telescope is used to observe distant objects in space. We felt that our platform would serve as the telescope that the design team needed in order to observe all the information that they could not find before.
Building the brand together
We applied this collaborative approach to almost every aspect of the new brand: colours, fonts, illustrations, and more. Each of us had an opportunity to present what we felt the brand should look and feel like. We opted for bold colours, quirky illustrations, retro style fonts, all while not sacrificing accessibility, one of our core values as a team. We created a brand that we felt visually represented the personality of the design team: casual, inviting, relaxed, and fun.
Our single source of truth
To keep the branding consistent, we also built a “UI kit.” The goal of the kit was to keep all of the UI elements uniform and organized throughout the designs. In simple terms, it acted as our single source of truth for the brand.
The UI kit contained crucial elements such colour pallets with accessible contrast ratios, typography guidelines, and layout grids. It also included the necessary components that we created such as buttons and forms. We used this UI kit for Hubble as well as the d@t website which followed the same branding. We made sure we prioritized updating the kit as our designs grew and evolved.
Designing for our goals
We continued to meet with our team on a bi-weekly basis to provide updates on the process of designing Hubble. Challenges were addressed together, and technical restrictions were considered early on in the design process.
Together, we crafted solutions that we felt met the overall goals derived from our initial research.
1. Create a single source of truth for information and resources related to the design team
We designed a page within Hubble to store all the important resources the team expressed lacked centrality, such as HR resources, team-related tools, and documentation. To aid in discoverability, we added the ability to filter by function – Product Design, Design Operations, In-House Agency, and UX Research.
Previously, this information was provided to individual team members by their managers, usually in the form of a Word document containing the listed tools that were needed for their roles. Now with Hubble, employees will have one consistent place to find the tools they need for their roles. We also went a step further to provide them with details about the importance of the tools and who manages them.
Another aspect we created in Hubble to meet this goal was a space for new teammates to see all the various Slack channels they can join.
Lastly, we included a page for event recordings so that employees can quickly access them if they are unable to attend the live session.
2. Build stronger relationships amongst team members
To achieve this goal, we incorporated a team members page where new employees can get to know everyone and their role on the design team.
We also designed personalized profiles. The profiles provided a place for the team to write about themselves, share photos, and provide crucial information such as their email, Slack handle, and role.
Taking inspiration from other products, such as the famous dating app Hinge, we provided a set of prompts for our teammates to use when building out their profiles to ease the process. We believe the profile pages will help teammates get to know one another and build stronger connections that can significantly improve collaboration, which can be especially difficult in a remote work environment.
To effectively gather our teammates' responses, we created a workshop in FigJam utilizing the many widgets they offer. We allowed the team to add images, GIFs or written responses for their profiles in their own time if they chose to participate.
The final outcome for the profile pages looks something like this:
3. Create a better understanding of employee structure and roles
We provided an organizational chart to help new and existing employees become familiar with the team's structure. We chose to embed the pre-existing chart created with Figma. This way, the chart will automatically update when changes are made to the original file, which results in less technical maintenance on our end.
To reduce confusion surrounding the larger organizational structure, we also included explanations of the different sub-businesses that make up Tucows.
The scary part: Testing
Once we had finalized our prototype for Hubble, it was time to test it with our primary user base: our teammates. We call this the “scary part” because there’s no way for us to truly know how our primary user base will feel about the product we’re presenting. We assume that we’ve done a good job of achieving our goals, but we’ll never know until we validate. We knew how important this part of the process was, so we had to make sure it was well thought out.
Creating our research plan
We developed a research plan with guidance from the expert herself, UX Research Manager Nitya Rao. With her help, we crafted 2 primary research goals:
- Uncover any usability concerns within Hubble.
- Better understand whether or not the content met the needs and expectations of new and existing design employees.
User testing
We recruited a total of seven design team members to complete the user test. Three participants had worked at Tucows for under eight months, and four had worked at Tucows for over eight months. This range of participants gave us the opportunity to observe how Hubble met the expectations of employees with different levels of team knowledge.
Additionally, we only invited employees with limited visibility into the Hubble project to participate in the user test.
We decided to conduct unmoderated sessions with our participants when setting up our test on UserTesting. Unmoderated testing was particularly useful in this case because it can produce less biased results since participants are not speaking directly to the creators of Hubble, whom they happen to know personally.
Analyzing the feedback
After all the tests had been completed, we watched each session recording and documented important quotes and insights. We also created video clips of some of the feedback.
We were happy to hear a lot of positive feedback from participants about the overall experience of Hubble.
“Great experience, I loved the website layout and how important things such as values are highlighted at the beginning of the page. I think the website is really informative and concentrates on resources that are frequent questions for people that just joined Tucows.”
“I really love the slack channel callout, they are almost like an extension of making your onboarding experience a little bit easier (which is also the goal of Hubble) Again, the fact that I can access all this information at any given time is really useful.”
“To me, I feel the most valuable aspect of the Hubble website is the general/introduction information about the team and the businesses within. I know with me onboarding it took me a bit to piece together my side of the business and also what other members of the design team are doing as well so I think that is very valuable.”
Some additional positive themes revealed in the user tests included:
- An appreciation for the illustrations and overall aesthetic of Hubble. Some keywords used to describe Hubble were "welcoming," "comforting," "helpful," "intuitive," and "fun."
- Showcasing the Slack channels was well received amongst our participants, many saying it was their favourite section on the home page.
Although we could have listened to the positive feedback all day, it was time to analyze the rest of the feedback to uncover potential themes and usability issues. We gathered the feedback on digital sticky notes and colour-coded them for each participant. Then we grouped them into common themes. It was a tedious process, but we uncovered valuable insights that could help guide our future decisions for the product.
The three most common themes from the user tests included:
1. HR-related tools felt out of place on the “Resources” page.
Many participants expressed that they felt that HR tools didn’t belong with the other items on the resources page. One participant noted that it “[feels] like there’s a mix of things here that maybe don’t fully make sense. I see the tools as things that they need to do their jobs.” It was clear that this page should house tools that relate to the design teams (such as Figma) and that some of these general HR tools may make more sense somewhere else.
2. There was a lack of emphasis on help/support
There were a lot of comments concerning the IT support callout at the bottom of the home page, and the overall sense of support that Hubble offered. One participant stated, “there might be a need for more help, general questions, technical help, especially when you’re onboarding at Tucows. Maybe if there’s a little help icon, or a bot if someone needs help, might be nice and reassuring. Rather than going [to the home page] and having to scroll all the way down.”
3. Resources seemed to lack some necessary information
Most of the participants expressed that they wanted more details when it came to the resources page. Some more specific suggestions included log-in information, how to start using a tool, and tips and tricks to know when using a tool. Overall, it seems that individuals want more guidance around the resources provided to ensure they are set up for success.
Next steps
These themes brought to light useful information that we had not anticipated. Our research has helped us further validate the value of Hubble, while giving us some opportunities and guidance on how we can continue to improve future iterations of the experience.
The next milestone for Hubble will be for our talented Design Engineers Kay Evans-Stocks and Karen Evans to begin developing the MVP (most viable product) within Webflow. Based on the positive feedback we received from the design team, we’re confident that the launch of the MVP will achieve the goals we established from our initial research.
Conclusion
We hope this case study inspires you in some way, whether that’s taking initiative to improve your own internal products and resources, incorporating regular collaboration into your design process with different roles, or to simply have fun with the people you’re working with.
We truly felt that we enjoyed every step of creating Hubble, even at times when things felt unclear. It’s very difficult to build a platform and brand from scratch, but we felt so grateful to have the people that we had by our sides throughout the journey.
Hubble would not not be what it is if it weren’t for the “dream team.”
Credits
