A Window Into a Company Looking to Make Their Mark
A Window Into a Company Looking to Make Their Mark
A Window Into a Company Looking to Make Their Mark
Date and Duration:
April 2021, 4 weeks
Team:
Sole UX/UI Designer and Writer
Platform:
Web, Mobile
Tools:
Figma, Adoble Illustrator, Photoshop, Lightroom, Google Analytics
Client:
TriMax Windows
TriMax Windows is a window and door supplier looking to establish itself as a serious contender in Canada’s residential and commercial construction market. To do so they require a professional online presence where new clients can quickly gauge the company’s expertise, product offering and conveniently connect with a company representative. As a sole UX designer and UX writer, I was responsible for developing company branding and online presence via a desktop and mobile friendly website.
Date and Duration:
April 2021, 4 weeks
Team:
Sole UX/UI Designer and Writer
Platform:
Web, Mobile
Tools:
Figma, Adoble Illustrator, Photoshop, Lightroom, Google Analytics
Client:
TriMax Windows
TriMax Windows is a window and door supplier looking to establish itself as a serious contender in Canada’s residential and commercial construction market. To do so they require a professional online presence where new clients can quickly gauge the company’s expertise, product offering and conveniently connect with a company representative. As a sole UX designer and UX writer, I was responsible for developing company branding and online presence via a desktop and mobile friendly website.
Date and Duration:
April 2021, 4 weeks
Team:
Sole UX/UI Designer and Writer
Platform:
Web, Mobile
Tools:
Figma, Adoble Illustrator, Photoshop, Lightroom, Google Analytics
Client:
TriMax Windows
TriMax Windows is a window and door supplier looking to establish itself as a serious contender in Canada’s residential and commercial construction market. To do so they require a professional online presence where new clients can quickly gauge the company’s expertise, product offering and conveniently connect with a company representative. As a sole UX designer and UX writer, I was responsible for developing company branding and online presence via a desktop and mobile friendly website.
My Role
User research, concept development, product strategy, aligning stakeholders with product goals, information architecture, designing user flows, visual design, interaction design, prototyping, user testing, and iterative design.
What is the Problem
TriMax Windows has a limited online presence. The company website is going to be the ‘virtual’ handshake. Primary objective will be to provide basic company information and showcase their products and services to the client. Secondly, the opportunity to establish contact.
What Are the Goals
To design a TriMax Windows website I needed to find out a few key aspects.
My Role
User research, concept development, product strategy, aligning stakeholders with product goals, information architecture, designing user flows, visual design, interaction design, prototyping, user testing, and iterative design.
What is the Problem
TriMax Windows has a limited online presence. The company website is going to be the ‘virtual’ handshake. Primary objective will be to provide basic company information and showcase their products and services to the client. Secondly, the opportunity to establish contact.
What Are the Goals
To design a TriMax Windows website I needed to find out a few key aspects.
Who is TriMax Windows?
To properly represent the company and their values I had to get to know them. I conducted stakeholder interviews to develop a clear picture of who TriMax Windows is.
What does their closest competition look like?
Competitive Research helped shine light on what other businesses are doing right. It also revealed their shortcomings, providing TriMax Windows with an opportunity to have an edge over over their competitors.
Who is their target clientele?
Speaking directly to customers during User Research helped me recognize important patterns. These in turn were used to formulate Personas and refined the company Branding.
How do we fulfill their needs?
As the different elements revealed themselves I applied Information Architecture to create all the sections necessary for a positive user journey. I created a high fidelity Prototype for User Testing to determine how effective my design was. To conclude, I made the necessary revisions during Design Iterations according to user feedback.
Who is TriMax Windows?
To properly represent the company and their values I had to get to know them. I conducted stakeholder interviews to develop a clear picture of who TriMax Windows is.
What does their closest competition look like?
Competitive Research helped shine light on what other businesses are doing right. It also revealed their shortcomings, providing TriMax Windows with an opportunity to have an edge over over their competitors.
Who is their target clientele?
Speaking directly to customers during User Research helped me recognize important patterns. These in turn were used to formulate Personas and refined the company Branding.
How do we fulfill their needs?
As the different elements revealed themselves I applied Information Architecture to create all the sections necessary for a positive user journey. I created a high fidelity Prototype for User Testing to determine how effective my design was. To conclude, I made the necessary revisions during Design Iterations according to user feedback.
Who Are We Designing For
Interviewing the stakeholders helped me understand our target demographic, but even more importantly I was able to acquire a few of their customer’s contacts. I knew they would be the perfect subjects for my user research! In the interest of keeping the data unbiased I also interviewed subjects without any association with TriMax but that shared the same requirements. I conducted 1-on-1 user interviews to see how TriMax’s website could aid their customers in their quest for new windows and doors. The users would walk me through their typical process, and discuss their joys and struggles.
Who Are We Designing For
Interviewing the stakeholders helped me understand our target demographic, but even more importantly I was able to acquire a few of their customer’s contacts. I knew they would be the perfect subjects for my user research! In the interest of keeping the data unbiased I also interviewed subjects without any association with TriMax but that shared the same requirements. I conducted 1-on-1 user interviews to see how TriMax’s website could aid their customers in their quest for new windows and doors. The users would walk me through their typical process, and discuss their joys and struggles.
Insights
83% of users remarked on the difficulty of finding sufficient data on products. 100% of the industry professionals fell under this statistic.
66% wanted a clear and easy way to get in touch with the company to either inquire about the product and service pricing or book an appointment with a customer service representative. This number was evenly split between the two groups
Analysis revealed two key struggles for our users. Not only did we have to provide a concise and resourceful website, we also had to make sure the experience was intuitive enough for the average homeowner so they could easily get in touch with a company representative.
Insights
83% of users remarked on the difficulty of finding sufficient data on products. 100% of the industry professionals fell under this statistic.
66% wanted a clear and easy way to get in touch with the company to either inquire about the product and service pricing or book an appointment with a customer service representative. This number was evenly split between the two groups
Analysis revealed two key struggles for our users. Not only did we have to provide a concise and resourceful website, we also had to make sure the experience was intuitive enough for the average homeowner so they could easily get in touch with a company representative.
Insights
83% of users remarked on the difficulty of finding sufficient data on products. 100% of the industry professionals fell under this statistic.
66% wanted a clear and easy way to get in touch with the company to either inquire about the product and service pricing or book an appointment with a customer service representative. This number was evenly split between the two groups
Analysis revealed two key struggles for our users. Not only did we have to provide a concise and resourceful website, we also had to make sure the experience was intuitive enough for the average homeowner so they could easily get in touch with a company representative.
Competitive Analysis - “Custom Window Designs”
Cons:
(UX) pop-up intake form appears blocking rest of the page, but doesn’t provide a clear affordance or button for closing the pop-up
(UI) off-centre text; creates a disjointed and unprofessional look, poor use of screen space
(UI) dated look
Pros:
(UX) Contact/quote form is clearly visible and convenient to use
Competitive Analysis - “Custom Window Designs”
Cons:
(UX) pop-up intake form appears blocking rest of the page, but doesn’t provide a clear affordance or button for closing the pop-up
(UI) off-centre text; creates a disjointed and unprofessional look, poor use of screen space
(UI) dated look
Pros:
(UX) Contact/quote form is clearly visible and convenient to use
Competitive Analysis - “Strassburger”
Cons:
(UI) dated look
(UI) poor accessibility due to small and compact text for body and headers
(UX) poor use of space, everything is crammed in the centre
(UX) poorly functioning toggles for accessibility (font size doesn’t change adequately)
Pros:
(UX) conveniently located 'find a dealer' CTA that is displayed in a consistent location
(UX) plenty of imagery and product information
(UI) variety of certifications in footer present a professional brand
(UI) branding color selection gives a powerful image
Competitive Analysis - “Strassburger”
Cons:
(UI) dated look
(UI) poor accessibility due to small and compact text for body and headers
(UX) poor use of space, everything is crammed in the centre
(UX) poorly functioning toggles for accessibility (font size doesn’t change adequately)
Pros:
(UX) conveniently located 'find a dealer' CTA that is displayed in a consistent location
(UX) plenty of imagery and product information
(UI) variety of certifications in footer present a professional brand
(UI) branding color selection gives a powerful image
Competitive Analysis - “KV Custom Windows”
Cons:
There were no notable cons present on this company's website
Pros:
(UI) modern, simple and bright style
(UX) conveniently located contact CTAs with consistent location throughout all pages
(UX) intuitive buttons and predictable behavior
Competitive Analysis - “KV Custom Windows”
Cons:
There were no notable cons present on this company's website
Pros:
(UI) modern, simple and bright style
(UX) conveniently located contact CTAs with consistent location throughout all pages
(UX) intuitive buttons and predictable behavior
Summary of Competitive Analysis
“Custom Window Designs”
If including the pop-up intake form, improve by adding a clear and prominent close button. Center the text and utilize the screen space effectively. Use more modern and visually appealing style.
“Strassburger”
Ensure accessibility by increasing the font size for body and headers. Utilize the space more effectively by organizing content and aligning it properly. If implementing feature, fix the toggles for accessibility to ensure the font size changes adequately.
“KV Custom Windows”
Maintain a modern, simple, and bright style throughout all pages. Provide conveniently located contact CTAs on all pages. Ensure all buttons have clear labels and perform expected actions.
Summary of Competitive Analysis
“Custom Window Designs”
If including the pop-up intake form, improve by adding a clear and prominent close button. Center the text and utilize the screen space effectively. Use more modern and visually appealing style.
“Strassburger”
Ensure accessibility by increasing the font size for body and headers. Utilize the space more effectively by organizing content and aligning it properly. If implementing feature, fix the toggles for accessibility to ensure the font size changes adequately.
“KV Custom Windows”
Maintain a modern, simple, and bright style throughout all pages. Provide conveniently located contact CTAs on all pages. Ensure all buttons have clear labels and perform expected actions.
Insights
What worked? - Design that is predictable and intuitive creates an easy-to-navigate page. Consistent contact CTA placement, button behavior, consistent design, accessible text and imagery, all help reduce the toll on the user.
What did not work? - Pop-up windows for contact forms without clear affordances create unnecessary distractions and take the user out of the ‘flow’. Small text forces the user to slow down and causes undue strain. Cramped layouts that stuff too much information in a small space play chaos on our eyes, forcing them to hunt for pertinent information.
Insights
What worked? - Design that is predictable and intuitive creates an easy-to-navigate page. Consistent contact CTA placement, button behavior, consistent design, accessible text and imagery, all help reduce the toll on the user.
What did not work? - Pop-up windows for contact forms without clear affordances create unnecessary distractions and take the user out of the ‘flow’. Small text forces the user to slow down and causes undue strain. Cramped layouts that stuff too much information in a small space play chaos on our eyes, forcing them to hunt for pertinent information.
Insights
What worked? - Design that is predictable and intuitive creates an easy-to-navigate page. Consistent contact CTA placement, button behavior, consistent design, accessible text and imagery, all help reduce the toll on the user.
What did not work? - Pop-up windows for contact forms without clear affordances create unnecessary distractions and take the user out of the ‘flow’. Small text forces the user to slow down and causes undue strain. Cramped layouts that stuff too much information in a small space play chaos on our eyes, forcing them to hunt for pertinent information.
Persona
Number of participants:
6
Ages:
32 - 60
Distribution > Gender:
4 male, 2 female
Distribution > Affiliation:
3 were TriMax customers, 3 had no affiliation
Distribution > Industry:
3 were industry professionals (architect, or contractor), 3 were property owners looking to buy products for DIY
Persona
Number of participants:
6
Ages:
32 - 60
Distribution > Gender:
4 male, 2 female
Distribution > Affiliation:
3 were TriMax customers, 3 had no affiliation
Distribution > Industry:
3 were industry professionals (architect, or contractor), 3 were property owners looking to buy products for DIY
Persona
Number of participants:
6
Ages:
32 - 60
Distribution > Gender:
4 male, 2 female
Distribution > Affiliation:
3 were TriMax customers, 3 had no affiliation
Distribution > Industry:
3 were industry professionals (architect, or contractor), 3 were property owners looking to buy products for DIY
"My biggest challenge was finding the right amount of information when doing research."
"My biggest challenge was finding the right amount of information when doing research."
"My biggest challenge was finding the right amount of information when doing research."
Goals:
1. Home renovation 2. Looking to replace old windows and doors 3. Looking to improve energy efficiency and sound insulation 4. Professional, looking for better product
Needs:
1. Longevity / life span 2. Quality / technology 3. Aesthetics / visual presentation / good selection of product (stylish or matching existing windows) 4. To see distinct/strong advantages over competition
Frustrations:
1. Lack of knowledge among contractors 2. Lackluster presentation of product 3. Inadequate technical data / product literature
Motivations:
1. Homeowner wants to have a comfortable home 2. Professional wants a durable product for less
Goals:
1. Home renovation 2. Looking to replace old windows and doors 3. Looking to improve energy efficiency and sound insulation 4. Professional, looking for better product
Needs:
1. Longevity / life span 2. Quality / technology 3. Aesthetics / visual presentation / good selection of product (stylish or matching existing windows) 4. To see distinct/strong advantages over competition
Frustrations:
1. Lack of knowledge among contractors 2. Lackluster presentation of product 3. Inadequate technical data / product literature
Motivations:
1. Homeowner wants to have a comfortable home 2. Professional wants a durable product for less
Goals:
1. Home renovation 2. Looking to replace old windows and doors 3. Looking to improve energy efficiency and sound insulation 4. Professional, looking for better product
Needs:
1. Longevity / life span 2. Quality / technology 3. Aesthetics / visual presentation / good selection of product (stylish or matching existing windows) 4. To see distinct/strong advantages over competition
Frustrations:
1. Lack of knowledge among contractors 2. Lackluster presentation of product 3. Inadequate technical data / product literature
Motivations:
1. Homeowner wants to have a comfortable home 2. Professional wants a durable product for less
Requirements
Top concern having been voiced by both industry professionals as well as homeowners was the need for durable long-lasting products. Industry standards and certifications along with product warranties were enough evidence to help the customers feel confident about their potential purchase and installation of windows and doors. Product quality and features was the second highest concern. This would also need to be backed with appropriate technical documents. Third biggest need for a positive shopping experience was a visually appealing an easy to use website. Aesthetics play an important part in providing customers with trust and confidence as well as an inspiration to pursue their shopping plans with a supplier.
Frustrations
Users noted their primary frustrations or reasons for choosing a different company was inexperienced staff or lack of supporting documents. A poor selection of colour and hardware choices or inadequate technical documents showing how the products achieve some of the promised capabilities made the users weary of continuing business with the supplier. Another frustration – albeit more applicable to the industry demographic – was inexperienced installation crews or under-educated company representatives that couldn’t prove their thorough understanding of the products they were supplying. Oftentimes architects and builders will have to implement windows or doors that meet a higher level of thermal or sound insulation and finding products for such projects can prove challenging.
Requirements
Top concern having been voiced by both industry professionals as well as homeowners was the need for durable long-lasting products. Industry standards and certifications along with product warranties were enough evidence to help the customers feel confident about their potential purchase and installation of windows and doors. Product quality and features was the second highest concern. This would also need to be backed with appropriate technical documents. Third biggest need for a positive shopping experience was a visually appealing an easy to use website. Aesthetics play an important part in providing customers with trust and confidence as well as an inspiration to pursue their shopping plans with a supplier.
Frustrations
Users noted their primary frustrations or reasons for choosing a different company was inexperienced staff or lack of supporting documents. A poor selection of colour and hardware choices or inadequate technical documents showing how the products achieve some of the promised capabilities made the users weary of continuing business with the supplier. Another frustration – albeit more applicable to the industry demographic – was inexperienced installation crews or under-educated company representatives that couldn’t prove their thorough understanding of the products they were supplying. Oftentimes architects and builders will have to implement windows or doors that meet a higher level of thermal or sound insulation and finding products for such projects can prove challenging.
What Are We Creating
I knew my key users were looking for windows and doors but I needed to find out what made them choose one company over another. User research revealed some patterns shared by both the pros and the DIYs of windows shoppers. Buyers wanted three things; 1. Quality product 2. Trusted and knowledgeable supplier 3. Presented on a simple and concise website
What Are We Creating
I knew my key users were looking for windows and doors but I needed to find out what made them choose one company over another. User research revealed some patterns shared by both the pros and the DIYs of windows shoppers. Buyers wanted three things; 1. Quality product 2. Trusted and knowledgeable supplier 3. Presented on a simple and concise website
Sitemap
Sitemap
How Do We Get There
After thorough analysis of competitor research and data from user interviews I created a list of elements that I wanted to incorporate in my design. By grouping some of the similar topics such as products, or installation warranties and certifications I was able to streamline the website while keeping the experience intuitive and informative. It is vital for users to easily reach out to our client. I’ve made convenient and strategically placed call-to-actions on every page allowing the visitors to contact TriMax Windows. CTA placement is consistent and easy to find on each page reducing user excise and thus creating a fluid experience. As part of the company branding I created, a style tile was necessary to provide visual consistency. I kept the overall design modern and minimal to allow the company’s portfolio and product to speak for itself. Selected colours provide a strong professional image that won’t fade with time. They also allow for an accessible design that is more inclusive and which can be adapted further regardless if user goes with a light or dark theme.
How Do We Get There
After thorough analysis of competitor research and data from user interviews I created a list of elements that I wanted to incorporate in my design. By grouping some of the similar topics such as products, or installation warranties and certifications I was able to streamline the website while keeping the experience intuitive and informative. It is vital for users to easily reach out to our client. I’ve made convenient and strategically placed call-to-actions on every page allowing the visitors to contact TriMax Windows. CTA placement is consistent and easy to find on each page reducing user excise and thus creating a fluid experience. As part of the company branding I created, a style tile was necessary to provide visual consistency. I kept the overall design modern and minimal to allow the company’s portfolio and product to speak for itself. Selected colours provide a strong professional image that won’t fade with time. They also allow for an accessible design that is more inclusive and which can be adapted further regardless if user goes with a light or dark theme.
Style Tile
Style Tile
Refinement Through Iteration
I created a prototype and a testing script to take the users through a couple of key tasks. I appointed three users with two objectives during usability testing; 1. Gauge whether or not TriMax Windows is a good candidate to purchase products from, and 2. Get in touch with a representative to book an appointment. Overall the test went well with all users completing their tasks in a timely and efficient manner with zero confusion or getting lost. Feedback regarding design and user interface was positive with few minor tweaks needed.
Improvements
1. Header needed refinement to provide a more legible look so the user could glance at the options and make a selection without too much searching. 2. Product choices were reduced to 3 models of each line. If a custom or more specific design was needed this could be discussed with a company representative, as is the industry standard. 3. A comparison between different brands of suppliers would help shoppers make a more informed decision.
Refinement Through Iteration
I created a prototype and a testing script to take the users through a couple of key tasks. I appointed three users with two objectives during usability testing; 1. Gauge whether or not TriMax Windows is a good candidate to purchase products from, and 2. Get in touch with a representative to book an appointment. Overall the test went well with all users completing their tasks in a timely and efficient manner with zero confusion or getting lost. Feedback regarding design and user interface was positive with few minor tweaks needed.
Improvements
1. Header needed refinement to provide a more legible look so the user could glance at the options and make a selection without too much searching. 2. Product choices were reduced to 3 models of each line. If a custom or more specific design was needed this could be discussed with a company representative, as is the industry standard. 3. A comparison between different brands of suppliers would help shoppers make a more informed decision.
Home Page - Current Design and Future Revision
(Click to enlarge)
Home Page - Current Design and Future Revision
(Click to enlarge)
Product Pages - Products and Technical Documents
(Click to enlarge)
Product Pages - Products and Technical Documents
(Click to enlarge)
Takeaway
The final design of TriMax Windows’ website delivers an elegant, minimalist presentation that perfectly reflects the client’s vision. The company’s identity, product catalogue, and services are clearly defined and supported by detailed literature and technical documents. Navigation is seamless and intuitive, allowing both architects and do-it-yourself homeowners to easily explore the site and find the information they need to upgrade their spaces.
Since the website serves as one of TriMax Windows’ primary channels for connecting with customers, I emphasized features that make communication effortless. Strategically placed calls-to-action guide users toward booking appointments or requesting contact from a company representative. During stakeholder interviews, I encouraged the owners to take an active role in the process—contributing written content and offering feedback during prototyping. This collaboration not only enriched the design but also helped them feel more personally invested in the final outcome.
Takeaway
The final design of TriMax Windows’ website delivers an elegant, minimalist presentation that perfectly reflects the client’s vision. The company’s identity, product catalogue, and services are clearly defined and supported by detailed literature and technical documents. Navigation is seamless and intuitive, allowing both architects and do-it-yourself homeowners to easily explore the site and find the information they need to upgrade their spaces.
Since the website serves as one of TriMax Windows’ primary channels for connecting with customers, I emphasized features that make communication effortless. Strategically placed calls-to-action guide users toward booking appointments or requesting contact from a company representative. During stakeholder interviews, I encouraged the owners to take an active role in the process—contributing written content and offering feedback during prototyping. This collaboration not only enriched the design but also helped them feel more personally invested in the final outcome.
Takeaway
The final design of TriMax Windows’ website delivers an elegant, minimalist presentation that perfectly reflects the client’s vision. The company’s identity, product catalogue, and services are clearly defined and supported by detailed literature and technical documents. Navigation is seamless and intuitive, allowing both architects and do-it-yourself homeowners to easily explore the site and find the information they need to upgrade their spaces.
Since the website serves as one of TriMax Windows’ primary channels for connecting with customers, I emphasized features that make communication effortless. Strategically placed calls-to-action guide users toward booking appointments or requesting contact from a company representative. During stakeholder interviews, I encouraged the owners to take an active role in the process—contributing written content and offering feedback during prototyping. This collaboration not only enriched the design but also helped them feel more personally invested in the final outcome.