Website Re-Design
CPI Daylighting
CLIENT
CPI Daylighting is a manufacturer of translucent skylights and translucent walls for commercial building applications. The company specializes in B2B, catering specifically to architects, general contractors and building owners.
MY ROLE
IA, Sitemap Design,
User Research, User Testing
PROJECT DURATION
2 years
BACKGROUND
Why the new site?
The current site was not designed for mobile.
​
There were several factors that led to the need for a redesign of the CPI Daylighting website, the driving force being that the old site (from 2011) was not designed as a mobile friendly responsive website. Since Google gives priority to mobile friendly sites, this was hurting the site's SEO.
​
The current sitemap and navigation left users confused, unsure, and unable to find what they needed.
​
The redesign also offered the opportunity to address additional issues that I knew users were struggling with based on conversations I had with architects and our sales team while I was consulting on building design projects. One issue in particular was the site's organization. Users complained about not being able to find what they needed, or weren't sure if what they found actually corresponded to the correct product for their building project. I also took this as an opportunity to explore potential features that might help simplify the product research process for the user.
​
DISCOVER
Problem
Confusing terminology, duplication and nondescript trade names make it difficult for users to efficiently navigate the site and quickly find the product or product application that they are looking for.
Goal
Minimize cognitive load and remove friction points from the decision making process by creating a more intuitive organizational logic for CPI Daylighting's products that more closely aligns with how users, in this case architects and GC's, actually search for new products.
Advocating for human-centered design
​
While I knew that user testing was going to be crucial for creating a product that was effective, I was struggling to get the necessary stakeholders to buy into the UX design process. I was also working within the confines of a very tightly controlled budget, so I took it upon myself to be a user advocate and gather user insights through interviews and user testing, all on my own time. With the amount of time and money that would be invested in this project, it only made sense to validate the design decisions to ensure that the resulting product would have value to our users.
DISCOVER
User Research
3 user interviews
13 questions
Average time - 45 minutes
Users interviewed - architects and contractors
Goal:
To better understand the process by which architects and contractors, CPI Daylighting's primary users, perform product research. The questions ranged from search practices to what type of information they typically search for, as well as what impacts their ability to conduct product research efficiently and effectively.
​
"What type of information would you consider most important and why?"
​
"How do proprietary product names influence or impact your product research process?"
​
"Can you describe the biggest challenges you encounter when conducting product research?"
​
Affinity mapping helped to identify patterns in the issues that different users were experiencing, and also determine key motivations and user needs to accomplish their search goals
DEFINE
Research Findings
Pain Points
-
Lack of organizational system for available products
-
Searching by trial and error
-
Non-descript proprietary product names
-
Searching through non-relevant info to find what is needed
Needs & Motivators
-
Simplicity and efficiency because of tight deadlines
-
Well organized and intuitive navigation
-
Familiarity and trust - value referrals and examples of how others have used the product
-
Easily accessible technical info
-
“Photos are absolutely critical”
Opportunities & Insights
-
Firms are upgrading to digital libraries - offer ability to save product info
-
Users value referrals and case studies showcasing product usage, especially by well-known firms
-
Research happens in steps - initial search for basic info, then deeper dive as needed
“Proprietary product names only help if I know what I am looking for. Most don't provide an understanding of what the product is”
- Chad
“These [product] names mean nothing to me. I have no idea what they are”
- Brandon
Key Takeaways
Users need a well-organized and intuitive sitemap that results in a more streamlined research process, in order to meet tight deadlines.
Non-descript proprietary product names often cause friction in the the research process because they do not provide users with an indication of what the product is used for.
Duplication and redundancies in product offerings and product info result in lack of clarity and often confuse the user.
DEFINE
The Architectural Buyer
Based on the results of the user interviews, initial user testing and subsequent affinity mapping, I developed a user persona to outline the key characteristics of our user to help guide the design process . I reviewed the profile with our sales team, to see if their customer interactions could provide additional insights into any goals or needs that had not been accounted for. The completed personas was then used to help guide the design process moving forward.
Brandon | Architect
“I want to see that this is a product used for a particular kind of situation, what makes it different from some of your other products, and I want to see that stuff quickly.”
Goals:
-
Find information quickly and efficiently because of limited time and deadlines
-
Easily acquire all technical product information to present to peers and clients
Needs:
-
Simplicity - the site must be well organized and have intuitive navigation
-
Technical details must be easily accessible
-
See the product at multiple scales, including final product potential for inspiration
Frustrations:
-
Confusing or nondescript product names
-
Having to search/filter through info that is not relevant or needed
-
Having to go back and forth between pages to find or compare information
-
Searching by trial and error - hunting through and clicking a ton of links
DISCOVER
Evaluating The Current Website
Card Sorting
Goal:
To evaluate the IA of the current website by determining how users, who were new to the current website, organized the data with a very limited understanding of the products and nomenclature.
Process:
Five users were asked to perform an open card sort using the online resource OptimalSort, because individual schedules made it difficult to perform the activity in person.
A digital card was created for each product listed in the current sitemap. Users were instructed to organize the cards into groups as they saw fit, and I explained that there were no right or wrong answers. The resulting card sorts were then compared to the IA of the current website to see how well the two aligned. From this comparison I then identified any discrepancies that needed to be further examined and addressed.
​
Results:
The similarity matrix below shows what percentage of the 5 participants grouped the cards (products) together. The results of the card sorts were pretty mixed, and I had expected more instances where all 5 users paired the same cards. While this exercise did not pinpoint the exact problem, it did validate the current IA needed some improvement to make it more intuitive.
​
Two key examples (Product pairings and % indicated in green):
-
IntelaSun is the over-arching brand that all SolaQuad products fall under, yet only 1 of 5 participants grouped SolaQuad Skylights with IntelaSun - Intelligent Controlled Daylighting
​
-
Quadwall Wall-Lights are a type of Translucent Wall System, yet those cards were only paired by 2 of 5 participants
ROUND 1
User Testing
Task-based and think-aloud testing of the current website:
3 Users
5 Tasks
Goal:
-
Observe how the users navigate through the current IA, and gain insights into the "Why?" behind their decision making process.
-
Validate my initial hypothesis and assumptions about the current site's functionality.
​
Process:
Task-based user testing​ - 3 users were asked to complete 5 tasks, and were instructed to think-aloud moved through the site and narrate their decision making process.​ The tasks were designed to have the user simulate the typical product research process that architects and GC's might go through.
​
Results:
-
All users began their search by looking for the type of building application that the product would be used for (ie. walls, skylights, canopies, etc.).
-
Users seemed confused by product names and were not sure of the differences, resulting in them guessing and having to search by trial and error
​
Key Design Principles
1
Application based navigation
2
Reduced emphasis on proprietary product names
3
Consolidation of redundancies
After compiling all of the information gained during the user research and user testing activities, I took the insights gained and bucketed them into three high-level design principles that would be used to guide the design process of the sitemap moving forward.
DEFINE
Preliminary Sitemaps
Based on the insights gained from the user research process (interviews, card sorting, and testing of current site) a new information architecture was created, which is represented in the preliminary sitemap seen below. One of the major friction points that repeatedly gave the user trouble throughout the evaluation process of the current site's IA was the use of proprietary trade names for our products. Users had trouble differentiating between the various products listed unless there was a description.
Our "Controlled Daylighting" products were a perfect example of this. During the card sorting activity, all 5 users grouped IntelaSun under Controlled Daylighting, but only 40% of users placed IntelaGlas under Controlled Daylighting and 20% of users grouped SolaQuad Skylight under Controlled Daylighting. The results identified an issue with the product branding scheme, because there is no difference between IntelaSun and SolaQuad. When the product was developed a decade ago, SolaQuad was the branded product and IntelaSun was created as the overarching brand for all SolaQuad products. My revised sitemap eliminates the redundancy, but because the name IntelaSun hints more at the intelligent and dynamic nature of the system, the stakeholders agreed that the SolaQuad brand name would be removed.
​
Old Website - Example
Home
-
Products
-
Controlled Daylighting
-
IntelaSun - Intelligent Controlled Daylighting
-
SolaQuad Skylights
-
SolaQuad Unit Skylights
-
SolaQuad Wall-Lights
-
ControLite Systems
-
-
IntelaGlas - Intelligent Glass Skylights
-
IntelaGlas - Intelligent Glass Skylights
-
-
New Website - Example
Home
-
Products
-
Dynamic Shading
-
IntelaSun Skylights​
-
IntelaSun Walls
-
IntelaGlas Skylights
-
-
Also, when users were talking through their steps while performing the given tasks on the old website, just about every user stated the type of system application before trying to find a product that would fall under that category. I also knew that from my time as the lead architectural design consult (and fielding the chat requests from our website) that architects would often be researching and downloading details for the wrong product, which could be problematic if the project was far along before the architect consulted CPI directly. As a result, I organized the products by application to provide the user with a more intuitive search funnel that would result in the user finding the most appropriate product to match the application needed for their building design. Under the new IA, finding the product that was most appropriate for their building application would not require any prior knowledge of the CPI product line.
​
Meeting with Stakeholders - Sitemap Proposal
After the initial preliminary sitemap was created, there were still additional details that needed to get further flushed out. Attempting to insert all of the products and product categories into the new sitemap structure had revealed some internal issues with CPI's branding and the taxonomies and hierarchy for organizing the overall product offerings. This required a meeting with stakeholders to convince them that some changes needed to be made, and to also determine if all the necessary product information was covered. The products presented a unique challenge because certain branded products were also components of other products. In some cases, more than one product could also be utilized for a certain type of building application depending on the design requirements, which was the case for Unit Skylights. I proposed that we seperate the Unit Skylights based on system performance which, based on the nature of each system, becomes product specific.
​
Below is an annotated sitmap that I created to communicate the key areas that needed to be resolved and to outline the various info sections that would be on each page.
DEFINE
Sitemap - New Website
Once the details were worked out from a business standpoint, I created a revised version of the sitemap that focused on the "Products" section. I began with a series of high-level product groups, and from there the user would navigate according to the building application they were designing for. The product used for that particular application would be the first item listed on the page, followed by and explanation of benefits and system components. This would be the user's first introduction to the proprietary product name.
ROUND 2
User Testing
User Testing was performed on the new site during development
Goal:
Observe how the user accomplished a series of tasks and identify additional areas (not MVP) to improve after initial launch date.
​
Process:
The same users were asked to complete three of the original tasks from the first round of user testing on the old site.
​
Results:
100% completion rate - all users were able to navigate the 3 tasks successfully
​
Next Steps:
-
During user testing it was revealed that users either didn’t notice the "My Projects" feature or weren’t quite sure how to use it.
-
All of the users seemed deterred when they encountered the form needed to download system details
​
Results
The new sitemap significantly reduced the number of product pages and simplified the search process for users utilizing the site for product research.
Original Sitemap
VS.
New Sitemap
Original Website
-
8 High-level product categories
-
13 Product sub-categories
-
45 Product pages
New Website
-
6 High-level product categories
-
20 Product sub-categories
-
0 Product pages - material was consolidated and integrated into the product sub-categorie pages