Emily Egan
How I redesigned STACK's
SaaS App and
Marketing Site
How I redesigned STACK's SaaS App
and Marketing Site
How I redesigned STACK's
SaaS App and Marketing Site
Overview
Cloud Takeoff was rebranding to Stack to better represent their B2B SaaS offerings. Stack is a startup that provides takeoff and estimating software for the construction industry.
This was my first introduction into the world of user experience and how researching and testing could create better products. Over the course of a year we rebranded, redesigned the marketing site and SaaS application, improved conversion rates, and increased traffic to both domains.
Role
In house Designer and Developer, working alongside a Senior UX Designer.
Tools
Adobe Suite, Mouseflow, Google Analytics, HTML & CSS, AngularJS
Timeframe
2016 - 2017
Overview
Cloud Takeoff was rebranding to Stack to better represent their B2B SaaS offerings. Stack is a startup that provides takeoff and estimating software for the construction industry.
This was my first introduction into the world of user experience and how researching and testing could create better products. Over the course of a year we rebranded, redesigned the marketing site and SaaS application, improved conversion rates, and increased traffic to both domains.
Role
In house Designer and Developer, working alongside a Senior UX Designer.
Tools
Adobe Suite, Mouseflow, Google Analytics, HTML & CSS, AngularJS
Timeframe
2016 - 2017
Overview
Cloud Takeoff was rebranding to Stack to better represent their B2B SaaS offerings. Stack is a startup that provides takeoff and estimating software for the construction industry.
This was my first introduction into the world of user experience and how researching and testing could create better products. Over the course of a year we rebranded, redesigned the marketing site and SaaS application, improved conversion rates, and increased traffic to both domains.
Role
In house Designer and Developer, working alongside a Senior UX Designer.
Tools
Adobe Suite, Mouseflow, Google Analytics, HTML & CSS, AngularJS
Timeframe
2016 - 2017
Discovery
Discovery
Discovery
The Challenge
In order to meet the needs of the users the SaaS app needed to be refactored. The existing platform was developed using Silverlight which was depreciated and hard to maintain. Since the platform could no longer be supported long term and users wouldn’t be able to use the product, the business decided to move forward with refactoring the application to remove Silverlight and rebrand entirely. By using newer technologies, particularly JavaScript libraries like Konva, we could add additional features users requested and products the legacy platform couldn’t support.
Who are the Users?
The users were estimators within small to medium sized construction businesses and Independent contractors.
The Challenge
In order to meet the needs of the users the SaaS app needed to be refactored. The existing platform was developed using Silverlight which was depreciated and hard to maintain. Since the platform could no longer be supported long term and users wouldn’t be able to use the product, the business decided to move forward with refactoring the application to remove Silverlight and rebrand entirely. By using newer technologies, particularly JavaScript libraries like Konva, we could add additional features users requested and products the legacy platform couldn’t support.
Who are the Users?
The users were estimators within small to medium sized construction businesses and Independent contractors.
The Challenge
In order to meet the needs of the users the SaaS app needed to be refactored. The existing platform was developed using Silverlight which was depreciated and hard to maintain. Since the platform could no longer be supported long term and users wouldn’t be able to use the product, the business decided to move forward with refactoring the application to remove Silverlight and rebrand entirely. By using newer technologies, particularly JavaScript libraries like Konva, we could add additional features users requested and products the legacy platform couldn’t support.
Who are the Users?
The users were estimators within small to medium sized construction businesses and Independent contractors.
Problem
Users requested new estimating and takeoff features. In order to do that, the company needed to create an entirely new app to showcase these new offerings.
Problem
Users requested new estimating and takeoff features. In order to do that, the company needed to create an entirely new app to showcase these new offerings.
Problem
Users requested new estimating and takeoff features. In order to do that, the company needed to create an entirely new app to showcase these new offerings.
Competitive Analysis
Who are the major competitors? Were their websites modern and robust? Did their products have good reviews? What sort of copywritting and content did they use?
I performed a competitor analysis to better understand the product options for the construction industry, available features, and design feel. Overall they had three main competitors which had a similar look and feel to each other. All of them had strengths and weaknesses which we utilized to create a good starting point for the layout of the site. The data below is a summary of our findings.
Competitive Analysis
Who are the major competitors? Were their websites modern and robust? Did their products have good reviews? What sort of copywritting and content did they use?
I performed a competitor analysis to better understand the product options for the construction industry, available features, and design feel. Overall they had three main competitors which had a similar look and feel to each other. All of them had strengths and weaknesses which we utilized to create a good starting point for the layout of the site. The data below is a summary of our findings.
Competitive Analysis
Who are the major competitors? Were their websites modern and robust? Did their products have good reviews? What sort of copywritting and content did they use?
I performed a competitor analysis to better understand the product options for the construction industry, available features, and design feel. Overall they had three main competitors which had a similar look and feel to each other. All of them had strengths and weaknesses which we utilized to create a good starting point for the layout of the site. The data below is a summary of our findings.
Competitor One
• Desktop takeoff software that comes with a trial download.
• Strengths: A lot of content on the site that drove traffic.
• Weaknesses: UI Design. Crowded, and less aesthetically pleasing, which in turn can cause less credibility. Non semantic code, which led to poor usability and accessibility.
• Opportunities: With better content, semantic code, and UI design we could increase organic traffic.
Competitor Two
• Started to offer cloud based takeoff services.
• Strengths: Better UI, has authority in the industry.
• Weaknesses: UI Design. Confusing interactive graphics with popups. Little content and isn’t easily consumable. Poor information architecture.
• Opportunities: Has a similar color theme and design to ours.
Competitor Three
• Desktop software that comes with a trial download.
• Strengths: Modern interface, clear information architecture, responsive, great clear content throughout site.
• Weaknesses: Doesn’t offer cloud based services, poor text contrast against dark backgrounds--bad accessibility.
• Opportunities: With better content, semantic code, and UI design we could increase organic traffic.
Competitive Analysis Takeaways
The competitors offered different features and tools, and most were desktop based applications. All of the competitors used blue, so in order to stand apart from them we went with green instead as our main color. Since “STACK” was the chosen name, it made sense to provide multiple colors for the various product offerings. We incorporated more modern design trends, responsive design, and went with a mainly flat design.
Competitive Analysis Takeaways
The competitors offered different features and tools, and most were desktop based applications. All of the competitors used blue, so in order to stand apart from them we went with green instead as our main color. Since “STACK” was the chosen name, it made sense to provide multiple colors for the various product offerings. We incorporated more modern design trends, responsive design, and went with a mainly flat design.
Competitive Analysis Takeaways
The competitors offered different features and tools, and most were desktop based applications. All of the competitors used blue, so in order to stand apart from them we went with green instead as our main color. Since “STACK” was the chosen name, it made sense to provide multiple colors for the various product offerings. We incorporated more modern design trends, responsive design, and went with a mainly flat design.
Ideation
Ideation
Ideation
Logo creation and color themes
After the company decided on a new name, we were tasked to create a new logo and provide color themes for the new software. Since we already completed an in-depth competitor analysis we knew what colors we wanted to work with. We worked side-by-side(literally) to provide various logo ideas, color options, and presented them to the stakeholders for review. It took a few attempts to get the logo where we wanted it.
Logo creation and color themes
After the company decided on a new name, we were tasked to create a new logo and provide color themes for the new software. Since we already completed an in-depth competitor analysis we knew what colors we wanted to work with. We worked side-by-side(literally) to provide various logo ideas, color options, and presented them to the stakeholders for review. It took a few attempts to get the logo where we wanted it.
Logo creation and color themes
After the company decided on a new name, we were tasked to create a new logo and provide color themes for the new software. Since we already completed an in-depth competitor analysis we knew what colors we wanted to work with. We worked side-by-side(literally) to provide various logo ideas, color options, and presented them to the stakeholders for review. It took a few attempts to get the logo where we wanted it.
Mockups and Iteration
Mockups and Iteration
Mockups and Iteration
High-fidelity Mockups
Once the logo and colors were decided, mockups were iterated on with business and marketing stakeholders until an overall theme emerged. Each product offering had its own color, and the plan you purchased would define the base color theme within the application. The final mockups were signed off on, and the front end implementation of the marketing site and the changes to the SaaS app began.
High-fidelity Mockups
Once the logo and colors were decided, mockups were iterated on with business and marketing stakeholders until an overall theme emerged. Each product offering had its own color, and the plan you purchased would define the base color theme within the application. The final mockups were signed off on, and the front end implementation of the marketing site and the changes to the SaaS app began.
High-fidelity Mockups
Once the logo and colors were decided, mockups were iterated on with business and marketing stakeholders until an overall theme emerged. Each product offering had its own color, and the plan you purchased would define the base color theme within the application. The final mockups were signed off on, and the front end implementation of the marketing site and the changes to the SaaS app began.
Build
Build
Build
Building both Applications
Building both Applications
Mouseflow, Google Analytics, and other marketing and testing tools were installed. The UI changes on the app were done at the same time as the Marketing site. We were able to deliver different things each sprint based on what other developers were able to complete in that timeframe.
The end result of the refactored SaaS app removed Silverlight and it was replaced with the latest JavaScript libraries Angular and Konva. With Konva users could now “takeoff” uploaded plans, and were able to create shapes and measure areas based on a defined scale. The UI was also completely redone to showcase the new brand colors and new product features–takeoff, estimating, and plan viewing.
Mouseflow, Google Analytics, and other marketing and testing tools were installed. The UI changes on the app were done at the same time as the Marketing site. We were able to deliver different things each sprint based on what other developers were able to complete in that timeframe.
The end result of the refactored SaaS app removed Silverlight and it was replaced with the latest JavaScript libraries Angular and Konva. With Konva users could now “takeoff” uploaded plans, and were able to create shapes and measure areas based on a defined scale. The UI was also completely redone to showcase the new brand colors and new product features–takeoff, estimating, and plan viewing.
Ongoing Testing and Research
Testing on the marketing site was an ongoing process, and we used a few methods to improve conversions. We used the embedded Mouseflow and Google Analytics to do usability testing and gather data to make improvements on the site over time. With Mouseflow we were able to watch recordings of users on the site to see where they clicked, where they got frustrated, and where they stopped reading. Mouseflow also allowed us to calculate how many users clicked primary command buttons versus how many users dropped off entirely.
Our goals were to improve organic traffic, improve click rates, increase trial rates, increase feature use, and increase sales conversions.
We also pursued A/B Testing regularly by using different versions of the same page. We sent out emails with links that featured these pages to see who started new trials, signed up for monthly plans, and which users exited without interacting.
Ongoing Testing and Research
Testing on the marketing site was an ongoing process, and we used a few methods to improve conversions. We used the embedded Mouseflow and Google Analytics to do usability testing and gather data to make improvements on the site over time. With Mouseflow we were able to watch recordings of users on the site to see where they clicked, where they got frustrated, and where they stopped reading. Mouseflow also allowed us to calculate how many users clicked primary command buttons versus how many users dropped off entirely.
Our goals were to improve organic traffic, improve click rates, increase trial rates, increase feature use, and increase sales conversions.
We also pursued A/B Testing regularly by using different versions of the same page. We sent out emails with links that featured these pages to see who started new trials, signed up for monthly plans, and which users exited without interacting.
Ongoing Testing and Research
Testing on the marketing site was an ongoing process, and we used a few methods to improve conversions. We used the embedded Mouseflow and Google Analytics to do usability testing and gather data to make improvements on the site over time. With Mouseflow we were able to watch recordings of users on the site to see where they clicked, where they got frustrated, and where they stopped reading. Mouseflow also allowed us to calculate how many users clicked primary command buttons versus how many users dropped off entirely.
Our goals were to improve organic traffic, improve click rates, increase trial rates, increase feature use, and increase sales conversions.
We also pursued A/B Testing regularly by using different versions of the same page. We sent out emails with links that featured these pages to see who started new trials, signed up for monthly plans, and which users exited without interacting.
End Result and Reflection
End Result and Reflection
End Result and Reflection
Reflection
Even though we met all business goals, improved site traffic, and increased conversion rates, looking back I would have pushed to do more user testing and research. We relied heavily on internal stakeholders who were previously in the industry. That said, this was one of my first major projects that had a solid design process, and I learned a lot from the Senior UX Designer on my team. Even though the users weren't easily accessible to us, rebranding the application was a significant improvement from the previous version.
Reflection
Even though we met all business goals, improved site traffic, and increased conversion rates, looking back I would have pushed to do more user testing and research. We relied heavily on internal stakeholders who were previously in the industry. That said, this was one of my first major projects that had a solid design process, and I learned a lot from the Senior UX Designer on my team. Even though the users weren't easily accessible to us, rebranding the application was a significant improvement from the previous version.