Graphic design of the website for the SaaS product – HCM Deck
The SaaS product homepage is extremely important, since it is where the user often makes their purchasing decision. How to present the value that HCM Deck offers its clients in a clear and transparent way? How to best portray the “soul” of HCM Deck? What information does the target group seek? How to stand out in the alternative solutions market? … in short: how to build a website that will present the HCM Deck solution and support the sales process? We answer these questions in the case study below – explore the process of creating a website graphic design for the SaaS product of HCM Deck.
At the end of 2019, we were approached by the HCM Deck team concerning the graphic design of their product’s website – a platform sold in Software as a Service model. The platform is used primarily to support employee development and HR process management
As part of the cooperation, our tasks were:
- to refresh the image of HCM Deck website in accordance with the creative line of other materials,
- to reflect the needs of users on the website to support the sales process,
- …and to develop a distinctive user experience so that their first reaction is “we have to try this!”
And furthermore, make sure that the website is not just a website, but a part of the whole experience that future and current users get from HCM Deck.
Sprint 1: Define – where we are and where our challenge is
Each website graphic design begins with a workshop in order to diagnose problems, needs and challenges, determine the values important to the team and plan further actions. During the workshop, we use several well-known and reliable tools as well as original modifications and solutions, such as… Team canvas or Lean Canvas. The whole HCM Deck team responsible for creating the website and people involved in the project on our side participated in the workshops.
We used Team Canvas to set individual and group goals, get to know each other and to define shared routines and important regular activities for the project. We established, for example, the following:
- Main goal:
- Increasing website conversion
- Creating a website with an appropriate new message of the Company
- Extra goals:
- Increase website conversion
- Matching website communication to the current Product Guide
- Attracting the attention of corporate customers (with 1000+ employees).
Lean Canvas, meanwhile, served to structure the business knowledge of HCM Deck. We discussed the current target group and its specificity. We focused on small and large competitors. We discussed the channels of reaching out and, in particular, the form of marketing used for promotion and customer acquisition. Moreover, we realized how HCM Deck really solves problems within the organization. 🙂
Analysis of existing data
After the kick-off workshop we begin with an analysis of the company’s current customers. First, we analyze their websites in order to find familiar patterns for the target group.
We started the analysis by checking the company’s customers’ websites. It turned out that the segment most interested in HCM Deck has similar patterns.
Clients from the enterprise (corporate) segment had websites of similar structure. They based on large images, simple uncomplicated pages with a clear CTA (main call to action)
- Each website is extremely simple and based on photos
- Moreover, even the scheme of their pages is relatively similar, the first section is CTA, the next one is a presentation of services, with 3 or 4-column.
Then we decided to analyze the websites of HCM Deck’s competitors, especially those big players, namely the tools offered by the corporate giants.
- The websites of the big competition are built based on slightly more fashionable and attractive trends,
- The message of corporate solutions is primarily “change” and digitalization
- Most enterprise solutions are communicated in “Jobs to be done” language, the main CTA is a 1:1 conversation
- Each of the big players has a user case, stories on the home page to visualize better what the tool can be useful for
Analysis of reports and data from the network
Since conversion is the overriding goal of the new website, we decided to look for industry reports on SaaS in order to explore the issue further. Based on various sources, blog articles and publications, we learned that limiting elements in the menu is crucial. It is worth focusing on constantly visible and interactive CTAs, changing in relation to the website. This information only confirmed the hypotheses we had, while the shocking fact was that almost 73% of websites that convert Enterprise services well used pictures of people.
Based on the research, we’ve made the following decisions:
- To abandon the illustrations (partially) and definitely add the “people’ faces”
- To add vivid colors, currently the page is quite monotonous in color
- To introduce an interactive and dynamic CTA that matches the situation
On the basis of the analysis of competitors’ sites, clients and reports, we’ve created a moodboard, that is, examples of directions that would match the decisions made. A good example for us were services like Typeform, Mailchimp, Grammarly or Uber.
Sprint 2: Interviews with the team
The goal of the second sprint was to provide the Information Architecture of the new website. We have listed a number of things to do in order to deliver the expected result:
- Analysis of the website structure
- Analysis of Hotjar and Google Analytics
- Interviews with the UX department, where we wanted to know the user path in the application
- In-depth interviews within the organisation, especially with Growth and Customer Success Team
- Analysis of Deck HCM implementations
We should emphasize here that the second sprint was based mainly on interviews with various team members and on completing the analytical data.
Google Analytics & Hotjar
Based on Google Analytics, we managed to clarify the target group.
- These are people working in the corporation, mainly women.
- The most common resolution is 1366×768 px, which indicates typical corporate devices
- Their activity was mainly during working hours, between 9am and 5pm.
- Mobile traffic was relatively low.
Of course, the previous version of the website was not mobile-oriented, there were no active campaigns targeting the mobile version. However, this shows very strongly the basic values according to which we have to create screens. In the later phases, this directly affected the construction of the website grid.
We managed to draw interesting conclusions by observing users through the HotJar tool. It is a tool that enables us to track the user’s session and their interaction on the website. Thus, we found a few errors that we would like to avoid.
- In the target group, the top illustration takes 90% of the screen “above the fold” (ATF), users scroll immediately, hiding CTA. After entering the website, the users did not get fundamental information about where they are and what is the subpage they are on.
- The main Call to Action was below the first screen after the website was visited.
- Cookie information covers CTA – we have learned from Analytics that only 25% of users close this message. This means that the user hasn’t seen the main CTA.
- On the product subpage that describes functionality, users did not see the inside of the platform and clicked ” Test the tool” to see how it looks.
- One of the most frequently viewed sections was a photo of customers with testimonials. This confirms our thesis that it is worth to focus on pictures in communication.
Interviews with the team
HCM Deck is a company employing about 55 specialists in various forms. The structure is so complex that there are separate units within the company that work on specific elements. These are the most important:
- Product department responsible for the development of HCM Deck platform
- Customer Success department responsible for current customer service
- Marketing Department, with whom we worked directly on the website
- Growth department responsible for customer acquisition
It was crucial to understand functioning of individual departments, considering that the website is supposed to support the activities of each department more or less :). So first of all we wanted to clarify what are the relations between individual departments and what is the information flow or customer service path.
As the next step we contacted each of the departments and tried to understand and extract the maximum amount of information. Thus, through a very thorough research from the Product Department we had access to:
- the general customer profile,
- the next person provided us with a Company Product Guide, in which he wrote down all the elements concerning the company’s communication,
- Product Owner showed a comprehensive view of the product and its customers’ perspective.
- led us through the complete implementation scheme of the new graphic design of the website and shared insights from work.
- showed us a big company’s distinguishing feature, which is a relatively fast implementation of corporate clients.
With the Growth department:
- we’ve determined how they use the site in their daily work and what can be useful from their perspective.
- we learned the outline of the sales process and, based on our notes, we tried to use it
However, most of the time we had contact with the Marketing Department. This was due to the fact that they coordinated the whole project. They were the ones with whom we analyzed a very precise marketing funnel.
Current user flow vs. new user flow
The result of the second sprint was to be a complete architecture and information flow. So we checked how the previous structure of the site looked like
There is a simple pattern: the page structure was very flat. Individual subpages lacked redirection to other services. That was reflected in data from Analytics, saying that a single user rarely went to a different subpage.
The new structure suggested for the website was to reflect everything we have learnt so far. It was based on the “Jobs to be done” methodology, where the products were divided into individual categories according to the task they perform (Learning, Communicate, Feedback). Furthermore, a “solutions” tab has been added, which aims to present specific use cases, that is, the ways of using particular products in the organization.
This way we could go to the 3rd and 4th sprint.
Sprint 3 & 4: Mock-up
Once we had gathered enough information, we could begin the mock-up phase. The main goal of this phase was to structure the screens on the site and complete them with content. However, we do not focus on design here.
This phase is crucial because:
- The proper mapping of space and content on mock-ups allows to check how users will interpret it.
- It makes it possible to plan the space for the text creation stage.
- Enables organizing key information.
- Highlights gaps.
- Shows elements that are clicked and interactive for the user.
We began with creating product pages based on the information gathered in the Product Guide. After the approval of the first subpages, the copywriting process took place simultaneously. Next, the texts were put on mock-ups.
The use case subpages, based on which we were supposed to develop the content and structure, were a bigger challenge. Depending on the context, we met at small workshops, where for a few hours, together with individual company departments, we worked on the structure of the website. In this way, we discussed for example the aspect of onboarding with the product department, with the marketing department we discussed websites dedicated to webinars or ebooks, and with Customer Success a subpage dedicated to their services.
We have created over 50 screens in total. This stage is very important because it allows to really consider what should be on the site and to eliminate the stage of corrections related to the redistribution of content when we design the Design immediately. Moreover, each team had their own iteration, where we verified their needs
We have also applied the content distribution on the mock-ups, as it eventually appeared during the implementation. As a result, we had real feedback on how the content looks like for the target users.
After finishing the mock-ups we could move on to the last two sprints.
Sprint 5 & 6: Design
The last part of our services is of course Design. Based on the decisions from previous stages we were supposed to provide a modern look of the website. We relied on the moodboard created within Sprint 1. We started to work out the style in which the graphic design of the website was being developed. This was the focus of the first sprint.
The graphic style was quite obvious and we quickly found a common direction. The biggest debate was about the details that form the whole nature of the final project. In the first version we worked out several versions:
The approval took place during the meeting, where we made changes live and made the final decision. The final project was approved along with the marketing department, management and HCM Deck designers. Of course, during the design of subsequent subpages the design was slightly modified.
In the next stages we started designing the rest of HCM Deck products and pages. Together with the marketing department we selected the colours for specific categories to make it easier for the user to navigate the complex structure of the project. However, everything was picked in a similar tone.
After finishing the desktop views, we have, of course, developed the rules of mobile functionality:
The complex structure caused development of implementation rules in the Style Guide formula. It is a file that significantly simplifies and enhances the implementation according to the project.
First of all, we defined the gaps between the elements and colours used in the project:
We have also written down the principles of functioning of the most typical forms that appear in the project.
An important element was to consider also different statuses of buttons and inputs and any interactions in this document.
We also anticipated the form’s functioning, its errors, and considered how the elements should behave when touched by the cursor.
The files prepared in this way were handed over for implementation during a meeting with the programmers. We discussed the implementation rules and forms of cooperation. We used Zeplin here. In the initial stage, we had quick statuses or consultations 1-2 times a day, which allowed us to implement the elements efficiently.
You can see the result at: https://hcmdeck.com
Overview of our work – in numbers and more
Person team including the client
Currently, the website is under continuous implementation, in a while we will publish extra statistics concerning website traffic. At the moment, within 6 weeks we have managed to create a website that represents the top level in design. How will this affect the business? We will find out in the next 6-9 months :). Then we will try to update the case study with more complex data.
And that’s how the client valued this cooperation:
Project: People has demonstrated great commitment to the ordered website redesign project. As a company, they offer a very fresh approach to project management, focusing on understanding the client’s needs and goals. The cooperation with Tomek Osowski has been very enjoyable – his support, professional approach and the knowledge he has about design and latest trends deserves recognition. We are satisfied with the cooperation.
Case study isn't enough?
Would you like to learn about the whole process and how we could carry it out in your organization?