Creating a UI Kit in Figma

Process

Discovery

When I arrived at Tucows in May of 2022, I was given the opportunity to work on a project called Hubble to address challenges with onboarding and a lack of team connection. As I had just been through onboarding myself, I was eager to take on this challenge of improving the process for others.

Understanding the problem

Prior to my start at Tucows, Meredith House had conducted research to better understand the struggles surrounding onboarding for new design employees. She surveyed 10 design employees and analyzed the responses. The three most prevalent themes were as follows:

• Unorganized onboarding process
  The majority of the responses reflected on an onboarding process that was unorganized, disjointed, and chaotic.
• 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.

From this research a mission statement was defined for the project: 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.

Ideation

After uncovering the challenges with onboarding, the team was ready to venture into the ideation phase. It was decided that designing a website would be the most effective and feasible way to address challenges with onboarding in a remote working environment.

This is the point where I joined the “herd,” as we call it at Tucows. Meredith and I worked on wireframes for the experience. We met with the rest of the team on a bi-weekly basis to receive feedback on the wireframes.

Designing for our goals

There were three main goals that we sought to achieve with our designs. As a team, we were able to craft solutions that we felt met each of these goals. 

Goal 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.

Goal 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:

Goal 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.

Prototyping

Using Figma, we turned our hi-fidelity designs into a prototype. It was challenging to create this prototype because of the amount of interactive content we needed to set up. However, once we successfully created the prototype, it was rewarding to see the designs in action!

Note: Some content is censored in the video below for privacy reasons, but participants of the user tests were shown the uncensored version.

Creating a research plan

Once we had finalized our prototype for Hubble, we wanted to test it with our primary user base: our teammates.

Once we had finalized our prototype for Hubble, we wanted to test it with our primary user base: our teammates. We developed a research plan with guidance from 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.

Participants were instructed to “think aloud” while they completed a series of tasks and questions as they explored the Hubble prototype.

Analyzing the feedback

After all the tests had been completed, we watched each session 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.”

“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.”

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 the following:

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.”