Innotech had recently restructured its business objectives to nurture its B2B client base. A website redesign would contribute to the restructuring process. The project was to help build a website that would consider the diversification of new users and industry partners. The goal was to increase awareness, generate sales leads, and make a seamless and explorative experience navigating the site.

Innotech Alberta is a subsidiary of Alberta Innovates, which serves Canada's most respected applied research organizations. Innotech supports innovations, Alberta-based research, and technologies through the provision of scientific engineering, and technological services. They provide their clients and partners access to research, state-of-the-art facilities, and industry-leading experts.

InnoTech leads the forefront of technology and innovation for commercial developments by providing access to world-class experts and industrial-scale facilities.

Alberta Innotech Website

I was the lead designer on the project working from user research, user experience design, interaction design, visual design, and product quality assurance testing.

The InnoTech Alberta website has launched - Serving its industry partners and informing Albertans about the organization's impact across the various sectors.

The focus for how the product would help Innotech were as follows:

Increase and attract new leads - This would be measured through interaction triggers to emails, phone numbers, and contact form submissions.

Enhance navigation and call to action through defined user journeys - Increased time on page and decreased bounce rates.

Navigation was hard to scan and overwhelming.

Subject matter and navigation links were too specific.

Optimization for a better B2B experience for industry partners.

The content was fragmented making findability and discoverability difficult.

I conducted user interviews with five InnoTech partners to gather qualitative data about the pain points and values of their partnership experience with InnoTech. I asked questions about what they found useful and their perspectives on usability for the old InnoTech website.

The clients put great value towards working with experts from Innotech. 

The interviewees also found that the navigation of the old site and certain structured content was too specific for non-subject matter experts.

The old site was not representing Innotech's role and benefits clearly enough for its users to understand.

Access to local expertise was extremely useful.

Face-to-face collaboration and timely communication were important.

Subsidized research and development costs were a great benefit.

Access to facilities supported a higher level of service.

User personas we’re created based on qualitative data extracted from the user interviews. It was important to create a reference to represent the target audience segment and have an understanding of stakeholder motivations, pain points, and goals.

Assessing the user and admin pain points gave us the information needed to ideate solutions and features that would help solve the current problems they encountered. I worked on a user story and acceptance criteria document along with the project developer to define what functionality and components were needed for the project. It was important to prioritize certain features that were vital to the MVP model of the product. Lower priority items were added to a roadmap and documented as "later phase" items.

I worked cross-functionally with the developers to ideate a post-type relationship feature that would connect taxonomies between the navigational divisions. This would result in:

A more efficient back-end content entry experience by setting the relationship of posts on initial entry and mitigating any duplication of content input by admins.

End-users would benefit from a more explorative experience engaging from one content section to another.

I designed the navigation based on the page flow and post-type diagrams. Following those outputs, it was essential to provide a proper hand-off to the devs for an online prototype. Once the prototype was created, I conducted 5 usability tests with randomly selected testers, to gather qualitative data about the new navigation experience.

Users found the related links component (related post types) very simple to understand

Most users found the organization of the navigation easier to use compared to the previous state.

The biggest challenge for the users was understanding the language, especially if they did not have much context about the certain subject matter.

Almost all users relied on keywords to find the information or experts they were looking for.

The final delivery was a custom WordPress website with an optimized navigation structure and a post-type relationship feature for automated taxonomy association.

The feature sets in this project could not have been done without the initiation of collaborative discussions and workshops with both the Paperleaf team and the client. Communicating effectively between all parties was necessary to have the alignment on the vision through the project timeline. We were also lucky to have such responsive and engaging clients who were willingly able to collaborate on all aspects of the project.

Features such as the navigation were run through two-week sprints. This gave way to iterate and test the product until we solidified the best solution. This gave us the opportunity to validate assumptions and work hyper collaboratively as a team.

Innotech's internal team stated the content-entry experience was a night and day difference and stated it was a much better experience than the previous site.

The site is currently recording usage through GTM to validate data against the site's key performance indicators. A survey will be sent to a sample of users to gather more qualitative data about the experience post-launch.

This provides a more initiative experience for users that identify with one of the topics. Once they engage with the navigation, they are shown a dropdown with four divisions: Services, Experts, Projects, and Facilities, to make the discoverability of content more efficient and accessible.

After working closely with the client and having collaborative discussions about how the content could be structured, we created four categories for the main navigation bucket:

The lack of content organization throughout the site made it confusing to navigate the old site. There were inconsistencies of different UI elements and no design system set in place to help users understand the intentions of the brand. Content entry was a pain point for the internal team at CAA which proved to be time-consuming and frustrating for the admins.

The Canadian Automobile Association is a federation of eight regional non-for-profit automobile associations. The organization was founded in 1913 and continues to advocate for road safety, new vehicle technologies, the environment, mobility, and consumer rights. They are known to provide Canadians with a breadth of services and comprehensive insurance offerings.

CAA National is a well-known organization in Canada known for its representation on transportation safety and advocacy.

CAA National Website

I was the product design lead for The CAA National website project. I worked on discovery, design and build, quality assurance, all the way through to the launch of the product.

We met with the client to learn about the organization, its pain points with the old site, discuss expectations, and outline the scope of work. We then introduced an exercise to help document the user needs using user stories and acceptance criteria. This helped us identify what was required to meet the user's needs and to prioritize features for the MVP of the project.

The Bounce rate seemed high, sitting at 58% for English users and 71% for French users.

The low returning rate for users was at 30%, considering that users were looking for more specific information specific to their region.

High engagement with service dropdown items and Roadside Assitance call to action.

Users seemed to find interest in information about electric vehicles.

Defining our acceptance criteria helped us prioritize features that were essential for the launch of the revamped CAA website.

Our initial Treejacking study was run through Optimal Workshop, where users were prompted to navigate to a specific page or section. We focused on quantitative data to identify causation and replicable problems across a broad number of testers in the study. We received 57 English completions and 8 French completions.

Users tried looking for memberships in the About and Contact pages. This gave us reason to think that there was not one location that was obvious enough for users to look for this information.

Car Cost Calculator took the user a while to find. This resource-type tool needed to be found somewhere higher in the navigational hierarchy.

Users were highly interested in information about electric vehicles and future transportation innovations.

I utilized the research data to formulate and iterate on the information architecture.

It was important that the CAA National website needed to follow Ontario’s online requirements for accessibility. At minimum that site had to be WCAG 2.0 and AODA compliant. We utilized tools such as contrast checker plugins, spreadsheets, and an audit process to make sure these requirements were met. We also had included features to make sure we were equitable in our approach to accessibility by considering users beyond our definition of “the average user”. Some features included are:

Alt-text and accessibility best practices for imagery

As the designer on the team, It was critical for me to be hyper-collaborative with developers and the project manager to create feasible solutions for the core functions. We utilized jam board, whimsical, and Figma to run our whiteboard sessions remotely. We workshopped the following features:

page builder components (Modular custom post types)

CAA National's website is a starting pad for users to eventually reach their region's club website. Aside from the product being a large content base, there was some dynamic functionality that needed collaborative efforts to solve. One important functionality process is the club selection flow. This was an essential feature that would easily connect users to their regional club.

The CAA National website is the winner of an Ember Award for Best Web Solution - Budget over 30k by Digital Alberta. I'm proud that I had the opportunity and ability to design and build an impactful and award-winning product with my team. Hitting a milestone for my design career.

See more about the award for this project

It was important for me to workshop the club selection process as there were technical elements that had to be considered from the developer's perspective. The ideation and iteration process was one that was done by converging our findings and collaborating on a proper solution. 

Projects built around content are a challenge, especially when you have to consider users that comprehend information in a different language. It was important that we based our user research and testing on both English and French users.

A complete restructure and redesign of the CAA National website. A seamless content management system on the backend with a refactored front-end to align with CAA's current branding. Today many Canadians use the new website to learn about transportation safety information, transportation innovations, and to inquire about the reliable services provided by their regional associations.

Restructured navigation - The content hierarchy was deep so I designed tertiary navigation to show the different child pages that existed under each parent link in the main navigation dropdown. This helped users see what content sections they could further explore.

We conducted a total of 6 user testing interviews. Users were instructed through a series of scenarios to see how the initial prototype's navigation performed. We would guide users through scenarios and observe how they interacted with the navigational functions of the interface.

Roadside assistance was more accessible and easy to find considering it was one of the most used features.

I created multiple entry points for users to engage with the club selection flow. This made it easy for motivated users to funnel their way to regional club content. I iterated on the placement of these entry points and was able to do some A/B testing by staggering multiple interviews into separate weeks.

UX writing was an important factor for understanding the content structure. This was more notable for french users as certain words were considered for a different context.

The previously existing site had become a collection of separate parts, and the intention was no longer there to serve its primary audience — women looking for sustainable careers. Content entry was a cumbersome task for staff as they mentioned the difficulties of navigating the backend. Lastly, Women Building Futures needed a revamped website that would better reflect its current brand identity and its execution.

Women Building Futures is a non-profit organization that offers programs, workshops, and support services to help underemployed and unemployed women explore career opportunities and remove barriers to financial independence. Women Building Futures strives to inspire women and help foster economic security for women facing barriers to entry in workforces where they are underrepresented.

Women Building is an impactful non-for-profit organization helping women who seek employment and financial support.

Women Building Futures

I was the UX/UI designer on this project. I worked cross-functionally with a ux researcher, developers, and project managers to create a polished and efficiently interactive website for Women Building Futures. 

We conducted a number of stakeholder meetings to understand the goals of the new website redesign.

Increased number of program registrations

Modernization of brand and incorporation of client's new imagery

Prioritizing usability and simplicity for users who might have lower digital literacy.

Based on old site usage and data collected through the provided programs and intakes, we were able to pull valuable data about our primary users. The list consists of demographics, psychographics, and behaviors.

Socio-Economic barriers and Accessibility limitations 

Some of the women who utilize the website may have post-secondary experience, but many will have little or no formal education.

Most likely to have been out of school for a long period of time.

Facing multiple systemic barriers, or may lack confidence.

We can't assume prior knowledge of admissions processes, and technology access may have been difficult or inconsistent - users are more likely to have access to mobile phones than desktops or printers.

62% of users are on mobile (67% including tablets), and this number is expected to continue to grow.


Women Building Futures' business goals were to increase conversion for users to successfully apply to programs or workshops. Several factors need to be considered through the design of these features:

Socio-economic barriers for users that did not have access to high-end mobile devices, computers, and printers.

Providing enough affordance in the user interface to guide users through the application funnel.

Informing and guiding users with enough information to encourage the application to be submitted.

Creating an impactful product in the non-profit space is always rewarding. Thinking inclusively about the user and creating a seamless application process directly impacts the user and gets them to the next step that can change their lives. I love that I can make a positive change for these users.

The ideation process required all-hands on deck

Working remotely is a challenge. Working with a team cross-functionally and with a third party involved presents an even more demanding requirement of context and time. Communicating frequently and ideating earlier in the development helped us traverse such a short turnaround time.

Dynamic features that require empathy and critical thinking about how a user interacts with the interface and content structure is what keep me wide-eyed on these type of projects. The fact that I get to design the user experience, interface, and build it from conception to completion is just super cool.

Revised Mockups for development feasibility

With my experience and understanding of the non-profit pace, I was able to move head-on against the challenges of redesigning the Women Building Futures website. We delivered a WordPress site with an optimized program application flow and a seamless navigation experience. The site was fully responsive with the addition of modular-based components to provide flexibility with content strategy.

I was tasked to design a mobile app and desktop dashboard application for drivers and stakeholders to help increase safety, efficiency, and transparency for CayCan (parent company). The mobile app is intended to help track and initiate pre-trip inspections providing easily accessible guidelines and communicating real-time feedback as drivers complete a thorough step-by-step checklist process.

Compliance Box serves the transportation compliance business with tools to improve road safety and roadside inspection processes. The brand is founded by the team at CayCan Safety Consulting Ltd. has been in the transportation compliance business for over 20 years and is certified by Alberta Transportation to conduct Assessment of Regulatory Compliance/ National Safety Code (NSC) Audits as well as New Carrier Compliance Reviews.

I developed the UI/UX for a vehicle inspection app that has made a huge impact on the Canadian transportation industry.

Compliance Box 

My role in the project was to design the user interfaces for both the mobile app and the desktop app. I was tasked with creating a brand system for Compliance Box to create a seamless inspection and reporting process.

I created a brand and design system for the Compliance Box app that would extend through all the related products. For this project, the branding, UI design, and inspection process were areas that needed further optimizations and refactoring.

Compliance Box features and technical details

a cross-platform mobile app, built with React Native

Inspection process - Small changes create a big impact on mobile user interfaces so it was a challenge to iterate and test on small UI elements like validation prompts and post listings.

Truck drivers always found the manual process of roadside inspections to be cumbersome and difficult to perform. The inspection process was designed to break each inspection area of a vehicle into smaller and more manageable sections for the user.

Encouraging a user to complete a full inspection can be tricky. Simplifying the process and displaying a result or defect to show a response to the user input after a section was completed would provide the user with a sense of progress.

Defects and comments can be entered to create a more interactive and communicable experience by sending live data through the network to the admins' side.

Admins had access to reports and real-time data through the desktop application.

Compliance Box has made an impact on the Transportation industry by effectively improving the efficiency of vehicle inspections and safety compliance. Here are some statistics to display some of the product's successes upon launch.

The Compliance Box application is an ongoing project that seeks to continue on feature improvements. Since then, it has significantly and positively impacted drivers and users in the best way possible while being a first-of-its-kind product within the transportation industry. One piece of learning for me on this project was problem solving and creating sensible front-end interactions within a mobile application environment. I was able to evaluate the heuristics to identify areas of improvement, collaborate, and iterate on designs that ultimately contributed to the project's success.

PaperLeaf was in need of a survey-based application that could capture and measure employee morale. PaperLeaf previously used Google Forms to capture these inputs which then required a manual tallying process. This method to calculate morale was inefficient and not future-proof for scaling with a growing company. 

The Kisby app was an internal project created by Paperleaf. The purpose of the tool was to easily measure morale and feedback over time in order to build a better workplace and to improve employee-manager relationships. Apart from its internal purpose, our leadership intended for the product to be sold as a survey/morale measuring tool for small businesses and parties of interest.

The concept of measuring employee morale was to ensure that managers were getting a transparent view of our feelings, thoughts, and stress levels at work. This qualitative data would improve, support, and open dialogue between production-level employees and the leadership team.

I designed a survey-based application used for measuring employee satisfaction and generating reports for the leadership team.

Kisby Web Application

I worked as a product designer on the project. My duties included research, application architecture planning, interaction design, UI design, and quality assurance. I also created the visual brand for Kisby.

Product Design, Laravel Web App, Branding

The Kisby App is meant for forward-thinking businesses that value employee satisfaction with an understanding of what's critical to employee performance and retention.

I created a simple design system that consisted of a logo mark, colour palette, typography scale, component library, and documented use cases.

This was the first Laravel-based application my team had worked on. It wasn’t a complete stray away from the usual technical stack, but understanding the constraints was a challenge in creating a design system for the application.

It was cool to work on a project that directly impacts my co-workers shop-wide. Being able to create a tool that makes reporting and morale tracking for our management team more efficient is quite a rewarding task.


Since Kisby was an internal project, A lot of the research process was based on defined expectations rather than traditional UX research data. This still leaves questions about how this tool can be useful for those externally. If the product ever comes to that point it would be a great opportunity to run a fully fleshed-out discovery phase for the project.

Venue to capture and feedback and act on quickly through 1:1s

Ability to see trending data for employees and departments in terms of morale/satisfaction

Survey results by user, department, manager, the entire company.

Survey results by most recent, weekly, monthly views.

Hello I'm Kristian — a product designer based in London, UK. Currently, I am working at Vodafone.

Have a question or idea? Reach out!

You can also find me on