To create a UI kit that will ensure consistency between the UI components of two entities: Hubble (internal knowledge base) and d@t (external website).
The team for this project included Product Designers Meredith House, Janelle Leung, and myself; Design Engineers Kay Evans-Stocks and Karen Evans; UX Writer Nancy Webb; Design Operations Manager Keven Lupien; and Director of Product Design and UX Brigitte Kovacs.
This case study was written in collaboration with Meredith House.
This project was completed with Simrit Dhillion.
This project was completed with Anna Kang, Product Design Lead, and overseen by Brigitte Kovacs, Director of Product Design & UX at Tucows.
This project was completed with Hannah Jor, Product Design Lead at Tucows, and overseen by Brigitte Kovacs, Director or Product Design at Tucows.
The team for this project included Product Designers Meredith House, Janelle Leung, and myself; DesignOps Manager Keven Lupien; Design Engineers Kay Evans-Stocks and Karen Evans; and Director of Product Design and UX Brigitte Kovacs.
In the summer of 2022, I had the opportunity to contribute to the creation of a UI kit that would be used for two entities: Hubble, an internal knowledge base, and d@t, an external website for the Tucows design team. The goal of this initiative was to keep all of the UI elements consistent and organized throughout the two projects. I was very interested in working on this project because it was my first time creating a UI kit.
Before I started working at Tucows, the general look and feel of the Hubble and d@t brand was already developed by the team. This included elements such as the font, colours, buttons, and illustrations. However, there was still a need to refine these elements and assemble them in one place. There were also additional UI elements that still needed to be created for the kit.
To learn more about UI kits before diving in, Meredith House, Janelle Leung, and I met with Keven Lupien, DesignOps Manager at Tucows. Keven provided us with a UI kit template he created in Figma that was extremely helpful. He also taught us some tips and tricks for creating and publishing components with Figma. Keven’s guidance throughout this project was crucial for success.
To begin the process, we gathered the UI elements in our Figma files for Hubble and d@t and transferred them into our new UI kit file. Our kit included colour pallets with contrast ratios, typography guidelines, and layout grids.
It also included many components such as buttons, forms, filters, dividers, dropdowns, illustrations, spacers, and more.
Additionally, the UI kit housed unique section designs for the different pages of Hubble and d@t.
Accessibility was an important consideration while creating the UI kit. We didn’t want the UI elements to only look nice; they also had to function well and be accessible! We paid attention to contrast ratios when selecting colours for the brand and elements. We also made sure that clickable elements had distinct hover and selected states.
To match our brand and the other UI components, it was necessary to simplify the illustrations in the UI kit. The original illustrations that were purchased contained many gradients and colours. We decided to reduce the amount of colours that the illustrations used and remove unnecessary details.
Since the original pack contained over 150 illustrations, it was unrealistic to adjust each and everyone, so we decided on approximately 30 illustrations to move forward with. I experimented with various treatments for the illustrations before settling on one the team liked. I then went through and eliminated extra nodes and minor details from each of the illustrations.
I created three versions of each illustration for different background colours: white, black, and purple.
Migrating all of the components into the kit was a time-consuming and challenging task. We had to be careful not to disrupt any file-connections and publish our changes regularly. In a few cases, we were forced to create a new component because we were unable to migrate an existing component. This posed a challenge because we had to manually insert the new components into each design file, which was tedious. Despite this issue, we were ultimately able to create a well-built UI kit that has been integrated into our designs for both Hubble and d@t.
As our designs for Hubble and d@t evolved, so did the UI kit. We consistently updated the UI kit over several months as new sections and elements were needed.
The following are some of my key takeaways from this initiative:
Creating a UI kit is not a one-off process. A UI kit needs to be updated regularly and evolve as requirements change.
Working on the UI kit for Hubble and d@t has been a very valuable experience. I was able to learn more about the importance and creation of UI kits and improve my skills with Figma. I am thankful to have gotten to work with such an incredible group of people on one of my first projects as a Product Design Intern at Tucows.
To begin, secondary research was conducted to learn more about sustainability and the problems associated with it. This method of research was important because we were able to learn from a variety of sustainability experts. Through the research, it was discovered that online shopping is a popular contributor to carbon emissions.
My partner and I created an 18 question survey and had 24 participants aged 19 to 52 fill it out. The survey consisted of short answer questions, multiple-choice, and multi-select questions. This survey was important for understanding if and how people shop online and think about sustainability. One main insight from the survey was that the majority of participants consider sustainability to be important, but only 25% consider sustainability when online shopping.
At this point, a question was chosen to focus on: How might we encourage online shoppers to purchase sustainable products in a convenient and accessible way?
We built a persona to help build empathy with our users. We also created an empathy map based on our persona.
We used Notion to come up with many possible solutions and then narrowed our idea down to a plugin or Google chrome extension that assists shoppers in understanding the impact of their shopping habits and suggests eco-friendly product alternatives.
My partner and I created sketches of our solution to develop the basic layout of our design. We created a wireframe and mockup of our design based on the sketches. The home page of the plugin has information about the sustainability of the product that the user is currently looking at, and it suggests more sustainable alternatives. The favourites page allows a user to save products for later, and the profile page is for the user's account and settings.
Usability testing was conducted with three participants in order to find ways to improve our prototype. Participants were asked questions regarding the functionality, use, appearance, and overall content of the prototype. We uncovered multiple insights that would help us improve our design further.
My partner and I visually separated the sections on the home page, added prices, took out the search bar on the profile page, and added a logout button. We also created a mockup of our design in a landscape format, which accommodates one of the pieces of feedback we received from our participants.
Overall, we created a product that offers substantial benefits to the planet and towards helping everyday people build sustainable habits. The Juniper eco-shopping solution encourages users to shop sustainably online in a convenient and effective way. With the insights from our research and user testing, we believe that Juniper can gain attraction and make an important impact on people’s online shopping habits.
As a team, we conducted interviews to see whether or not the process of registering for courses was confusing for students. We gathered qualitative data regarding which specific aspects were the most challenging. We observed participants registering for courses to identify challenges, and had them rate their emotional state during each step. Finding unrestricted elective courses was generally the step that caused the most frustration. The majority of students in all years of study expressed that registering for courses was a confusing and unpleasant task for them. Many students were unaware of the resources available to them to help with the registration process.
During the ideation phase, we mapped out the process of the existing registration process. We created a journey map to visualize users' emotions during the process. We began to brainstorm possible solutions individually and then compare and group them as a team. We narrowed down our possible solutions to those that were the most impactful and reasonable:
We built a persona to help build empathy with our users. We also created an empathy map based on our persona.
We met with our clients multiple times after ideating possible solutions. Our clients were excited about the information we had gathered from students and our solutions. They also brought some technical financial restrictions to our attention.
Our group created sketches, wireframes, and mock-ups. We created an interactive prototype with Adobe XD.
The clients were happy with our research and design proposals. Some of our ideas were implemented by Wilfrid Laurier University the following spring.
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.
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:
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.
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.
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.
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.
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:
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.
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.”
Some additional positive themes revealed in the user tests included:
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.
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.
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.”
In preparation for the presentation, I gathered information about safety-minded design from articles, videos, podcasts, and a book called Designing for Safety by Eva PenzeyMoog. Anna Kang and I combined our individual research and created an outline for our presentation.
We used Figma to create an engaging slide deck. Using Figma for this task was challenging at times because Figma does not have the same capabilities as most power-point creation programs. However, Figma allowed us to have more control over the visual style of the slide deck, and we were able to connect our slides to a UI kit to keep our branding consistent.
In order to learn about sustainability and product design, I read articles, watched videos, listened to podcasts, and read a book titled Sustainable Web Design by Tom Greenwood. Hannah Jor and I put together an outline for our presentation based on our combined research.
We created a slide deck for our presentation using Figma. We incorporated informative content and interactive activities. We included sustainable practices for design teams, development teams, and remote workers. We used some elements from a UI kit that I helped build for the Design at Tucows website.
After weeks of preparation and promoting the event via Slack, Anna Kang and I were excited to present our work to employees at Tucows. We hosted a “Lunch and Learn” that consisted of a 40 minute presentation followed by a 20 minute interactive activity. Through this presentation, I was able to practice my public speaking skills and spread awareness about safety-minded designs to my co-workers.
To summarize what we had learned through our research and presentation, Anna Kang and I wrote a blog post called "Designing for Safety" that was posted on Medium and shared on LinkedIn.
Through this research project, I became more aware of how products can be misused for harm. I learned that even products that were designed with the best intentions can be weaponized by abusers. In the future, I want to spend more time thinking about the safety of the users I design for.
On July 27, 2022, Hannah and I presented to a group of employees at Tucows that were interested in learning more about sustainability and design.
To summarize our research, we wrote two blog articles. The goal of these articles was to inspire more designers to think about sustainability in their day to day work and provide them with helpful tips that they could start implementing right away. These articles, "Best Practices to Make Product Design More Sustainable" and "10 Ways to Make Remote Work More Eco-Friendly," were posted on Medium and shared on LinkedIn.
Through this project, I was able to expand my knowledge about sustainability and design. I was previously unaware of how much digital products can impact the environment. I hope to take what I have learned and apply it to the products I design in the future.