Bluesource
My Role
Project Date
UX Researcher & Designer
March 2022
Type
Project Length
Freelance
1 Month Client Sprint
Overview
Bluesource is a B2B operation that assists its clients in both reducing their emissions and offsetting unavoidable emissions with carbon credits.
The Bluesource marketing department brought on a team of 4 UXers to discover why their bounce rate was so high and conversion rate seemingly low. In the end, our team developed design recommendations based on user research insights.
Understanding the Problem
Low Conversion Rate
Bluesource is a key player within their industry. Because of this, many of their clients hear about them through mutual connections. However, Bluesource is interested in expanding its client base and hopes users will find them and convert to clients more organically. Unfortunately, the current site is not helping Bluesource reach its conversion goals.
.. Original Site ..
High Bounce Rate
Google Analytics showed that the site currently had a high bounce rate of 60%. We surmised that most users opened the website's homepage and then left immediately. Most users were not looking further into provided services or navigating to the contact page.
Top Viewed Pages
Analytics also displayed the average user journey. Through this, we discovered that the top viewed pages were "About," "Project Map," and "Contact." This insight helped us understand what pages we should prioritize while redesigning.
Poor SEO
Lastly, most users discovered the homepage with the search term "Bluesource." Many users only discover this website because they search for it precisely instead of finding it organically via related searches.
Heuristic Evaluation & Content Analysis
We then took a much closer look at the Bluesource Site. We performed a Heuristic Evaluation where we highlighted areas we suspected might be causing issues for users, as well as areas that may be working fine. We also generated a report laying out all of the content on Bluesources site. During this content analysis, we were able to identify specific broken links, inconsistent visuals, and repetitive information.
1 Consistency - Poor
-
Maps are inconsistent throughout the site.
-
Project type naming conventions are inconsistent on various maps.
2 Efficiency - Poor
-
Connect Page - Users are unsure of which contact to connect with.
-
Project type naming conventions are inconsistent on various maps.
3 Match to World - Poor
-
Terminology / Vernacular was too high level for some users - especially terms used in the global navigation.
Competitive Analysis
How Competitors Prioritize Content
No one does it quite like Bluesource. Unlike their top competitors, rather than primarily selling carbon credits to companies, the Bluesource team takes the time to analyze business practices and work to change them for the better; sometimes, with innovative technology, they develop themselves.
Regardless, there was still plenty of top competitors in the carbon credit market. During our analysis of these competitors, we saw how they prioritized digestible content and organized information in a way that wasn't overwhelming.
In addition, we found that many competitors had useful visualizations and infographics to help users quickly understand the services and products. On the other hand, some competitors had misleading or vague visuals attached to their infographics.
Comparing Competitor's Project Maps
Competitors also consistently use a map visualization/feature when displaying their project case studies. We eventually tested a few of these map experiences with users within our contextual inquiry phase.
Guiding Users with Calls-To-Action
Lastly, we built out sitemaps for significant competitors. We noticed that many competitors were using call-to-action buttons rather than depending on their global navigation to guide their users during this exercise.
Bluesource's Unique Advantage
Looking at all these competitors in-depth, we learned more about the industry, but we could also better understand Bluesource's unique competitive advantage. Bluesource offers a more holistic service to companies that want to put in the work to reduce their impact. We want to make sure that we are emphasizing this in our design.
User Research
Discovering User Motivations
To find a pool of users for testing, we posted a digital survey on Bluesource's LinkedIn, asking followers if they would be available for a 30-minute interview. We were able to gather 24 responses. After screening respondents for relevancy, we interviewed eight users.
For the first 15–20 minutes, we asked users a series of questions to discover their main motivations when visiting a website like Bluesource. We wanted to hear what kind of information was essential to them and what they were looking to learn.
Afterward, we asked users to interact with the Bluesource website. We asked their thoughts on specific pages and had them navigate through tasks. We also asked users to interact with a competitor's website.
Interview Trends
After performing interviews with actual Bluesource users and potential users, we mapped important statements made by participants to organize insights and highlight standout data. We then distilled a few key insights that would eventually guide our design.​
Contextual Inquiry Trends
After each interview, we asked participants to interact with Bluesource's site and a competitor's site. We did this to discover possible pain points and what elements might already be acceptable to users.
-
Users liked the simplicity and imagery on the landing page.
-
Most were overwhelmed with the amount of information presented to them.
-
Often viewed only one page on the dropdown menu in the global navigation.
-
Users liked using the map to view Bluesource's projects, although glitches were present when interacting with the map.
Narrowing the Scope
Distiling a Persona
At the onset of our time with Bluesource, we discussed that we would find several possible personas based on Bluesource's current client base. Unfortunately, we felt that our user base available to us for research limited our view into several types of Bluesource's users.
For example, significant segments of Bluesource's client base include Landowners, Farmers, County Governments, Indigenous Populations, large Corporations, and their advisors.
Based on the users we were able to speak with, we synthesized enough data to form one solid persona that we could look to throughout our design process.
Meet Louis!
User Problem
Louis needs to navigate and digest information related to Bluesource easily to truly understand their services and decide if this company meets his needs.
How Can We
​With our research and persona defined, we can create a solution to our users' problems. First, we plan to condense the amount of information on the website and present it more digestibly. We will also implement strategically placed call-to-action buttons to help steer users to information relevant to them.
​
So, How can we...​
-
Present important content in a digestible manner?
-
Steer users to relevant information?
-
Steer the users to the appropriate contact at Bluesource?
Designing the Solution
Ideal User Flow
We then created a simple wire flow based on our persona, Louis, demonstrating his ideal user flow.
Based on user insights, we figured Louis would likely investigate a product or service relevant to him, then navigate to the project map to view relevant projects near him. He would then possibly view a specific case study near him before navigating to the Bluesource 'Contact' page.
​We will deliver a new sitemap and design recommendations illustrating how we have prioritized information and how our calls-to-action guide the user through the website.
Imagining the Ideal User Experience
Using the content analysis that we had performed previously, we began deciding how to edit and prioritize Bluesources content. We used this information to aid us in crafting a revised sitemap. While designing this site map, we imagined ways for users to navigate the site without being overwhelmed by dropdown menus in the global navigation. We planned to use call-to-action buttons to lead users to pages relevant to their user journey.
Optimizing Information Architecture
We then went into FIGMA and created a low fidelity prototype to illustrate our proposed Information Architecture and site organization. The prototype shows content prioritized based on insights discovered during our research.
Clarifying Products and Services
While conducting our contextual inquiries, we found that most users had difficulty fully comprehending Bluesource's products and services. The current organization of the site requires users to navigate to a multitude of individual pages, each giving details about one product or service.
Our subsequent design aimed to make the breadth of products and services more digestible and allowed users to find services relevant to them more easily.
Increasing Project Map Usability
Our team discussed the project map frequently. Our contextual inquiry of Bluesources current site showed us that users really appreciated the ability to view case studies on a map; but we also saw them struggling with the glitchy feature. We also looked back to Bluesource's competitors for inspiration and considered the pros and cons of different map experiences as seen through our contextual inquiries.
​
We developed a solution that proved intuitive and valuable to users. Our proposed project map design made information more easily accessible to users while still allowing them to filter results by interacting with a map.
Original Site
Proposed Design
Steering Users to Appropriate Representitive
Another focus within our design was steering users to the appropriate contact at Bluesource in the hopes of positively affecting the sites conversion rate. During our user interviews, we heard that users felt frustrated when prompted to communicate with generic emails like info@bluesource.
​
To relieve this pain point, we sorted representatives into clearly labeled categories that would guide users to the most appropriate point of contact. We also included photos of representatives to boost user confidence that someone would return their call.
Testing the Solution
Once we had designed our prototype, our next steps were to test it. Our primary goal in testing the low-fiedelity prototype was to make sure that users could navigate through our ideal user flow.
Usability Testing Results
-
All users were able to easily and efficiently navigate through given tasks.
-
Users expressed feeling that the design, especially of the project map, was intuitive.
-
Users seemed to naturally follow the ideal user flow we had anticipated.
-
Users did not navigate to the connect page via the global navigation. Instead, they arrived there through our strategically placed call-to-action buttons.
-
Some users got confused when asked to find information about carbon credits; they saw the word "purchase" and thought they could buy credits off of the website (a feature that Bluesources is currently structured to provide.)
Iteraterating the Design
Rasing Fidelity of the Prototype
At this point, we had fulfilled the objective of our scope.
​
We had given insight into what might be causing Blusource's high bounce rate and subsequent low conversion and provided design recommendations based on our user research discoveries.
​
Before delivering our design recommendations, we increased our prototype's fidelity slightly to convey our message better. This fidelity version has not been tested but is ready to be used in the next usability testing phase if Bluesource desires.
Earning Stakeholder Buy-in
Our Research and Design team first presented our findings and solution proposals to the Bluesource marketing team. The team was pleased to have evidence that could be used as leverage as to why Bluesource should invest in their user experience.
After presenting to a larger segment of the Bluesource team, including more senior stakeholders, the team expressed excitement for the changes these designs could bring to the business.
The same day, the marketing team began immediately implementing some of our design suggestions on their homepage. The team is currently expanding on the research that we provided them with while they improve the usability of their site piece by piece.
Next Steps
Before concluding our time with the Bluesource team. We gave them further recommendations for how to pick up where we left off.
-
Due to our time constraints, we could not speak to as many users as we would have liked. Before adding specific content to the prototype, we recommend our client go back and interview more users.
​
-
Due to the amount of necessary content on the website, we suggested Bluesource hire a content strategist. A person in this position would be helpful in managing how content is organized and prioritized.
​
-
We also recommend moving certain content, such as blog posts, off the website. Blogs could be moved onto Medium, for example, or the Newsletter could be archived on Mailchimp instead of their website.
​
-
Lastly, looking to Google Analytics, we recommend improving SEO with keywords we obtained during our user interviews. We also recommend calculating a more accurate conversion rate that would allow them to measure success.