One company, many brands – redesign of the heron.holding website
A professional website is a real showcase of the company. Moreover, it’s often the core of the business – it supports sales, helps in acquiring new customers, and provides necessary information about the brand. The way the website is designed, what it looks like, what its exact content is – these are all elements crucial to fulfill its task. Read about how we, at Project: People, work on redesigning websites and about how we structured heron sub-brands.
We started conversations with Heron Holding in November 2019. The original intention of the owners was to prepare a new branding for the brand, redesign the website and design other subpages based on all currently (or planned in the future) branches of the Heron brand. We took this challenge! 🙂
First Sprint Kick-off workshops & Research
We usually start our process with a kick-off workshop. (learn more about our kick-off workshops here). This time, our first task was to get acquainted with the current website, materials provided by the customer and a preliminary analysis of available data. The next stage was the organization and conduct of a workshop attended by members of the management board of Heron and members of our team. Moreover, we invited Kamil Kozieł from the Maise graphic studio to the meeting. On this project, he was responsible for preparing new branding – based on it, our goal was to create a design for the website.
When organizing this kind of workshop, we always define the goals we want to achieve – not only us, but also our client. So, we wanted to learn the business purpose of the new website. Moreover, the owners’ expectations about the project and our cooperation were an important aspect for us. By knowing them, knowing the construction of the company, we could better understand the way it functions and support the owners in the process of structuring the entire brand and all services.
During the workshop, we were able to structure all currently offered and planned in the near future services for individual sub-brands.
From now on, there are five brands under the heron. brand name:
We have also pre-defined the graphic style in which the brand wants to go. It was the starting point for Kamil when designing new branding.
After the workshop, a special document was created, which presented the entire project. It contained the things we’ve worked out so far and plans for the next sprints.
The next step was the transition to the research phase. At this stage, we focused on meticulous analysis of competition in terms of websites and branding. While working with the client, we’ve mapped where their website appears in the sales funnel. Its main task was to confirm the credibility of the brand already when the company received the heron. company offer and visits the site to learn more about it. This was essential since Heron mainly sales through its own contact network and active participation in trade fairs and conferences, and the website itself should be primarily a neat and transparent showcase of the company. We conducted competition analysis separately for each sub-brand we defined. This allowed us to familiarize ourselves in a fairly detailed way with each industry in which Heron offers (or intends to offer) its services. Moreover, we were able to more precisely specify the elements that must be on the site to make it reliable enough and provide the necessary information.
The final stage in this sprint was the preparation of the moodboard. During the workshop, we’ve only developed a direction, but now, we had to translate it into a specific style that would suit the target group and one that would simultaneously suit the owners. It’s important that it properly corresponds with completely new branding as well.
Second Sprint: UX Research & Information Architecture
Due to the fact that Heron is divided into several diverse, but complementary brands, each of them has its own separate target group. We have mapped these groups with the heron. team based on existing customer data. We’ve supplemented information about them it with the conclusions from our desk research. At this point, we already had enough information, which allowed us to prepare an initial information architecture. To ensure proper data structuring, the first website we took up was the home page of the entire brand. Its content was to focus primarily on presenting heron. as a “one stop company” – a company that’s able to provide complementary services, due to which it’s able to manage all aspects necessary for customers related to their business.
Before we went to the other sub-brands, we consulted the prepared architecture with the heron. team to confirm whether the content we suggested coincides with their expectations. After making some suggested corrections, we started working on architecture for heron.custom, a brand that’s at the heart of Heron’s business at the moment. It was also to be a starting point for the other ones. One of our goals when designing it was to maintain consistency between content for all pages that were to be based on the same sections with minor modifications. At a later stage, this was expected to have a positive impact on the work of developers when implementing next pages.
The final effect of this sprint was an extensive but, above all, consistent information architecture for the entire brand. In the sheet prepared by us, each page has been broken down into individual sections that has to appear. Moreover, we have completed everything with a brief description of what exactly should be included in each of them, along with an explanation.
Third Sprint: UX Design
The whole sprint was entirely dedicated to the mock-up project. At Project: People, we care about making the user experience as natural as it gets, which is when creating mockups we try to design it in such a way that it looks much more like the final design, than just a sketch. Hi-fi mockups give a positive effect during the presentation of our work – that affects the user experience related to the redesign of the website.
Based on the designed information architecture and moodboard designs indicated by the client, a preliminary mock-up of the home page was created. Thanks to the materials provided by the client, we could also add pictures that came directly from heron, which also had an impact on the perception of the redesign prepared by us.
Fourth and Fifth Sprint: UI Design and implementation control
Starting the last part of the project, we were able to fully focus on preparing the final redesign of the website at the highest possible level. Hi-fi mockups, extensive information architecture and materials provided by the client were everything we needed to translate our work into visible effects.
Exceptionally, in this project we used a new tool to design – Figma. It’s a user interface design tool that, due to its specificity, allows to work in a faster and more orderly way.
- Access from any platform regardless of the operating system.
- The possibility of using through the browser.
- Work “live” – all changes in the file are visible live, which gives many possibilities, while there are more than just one designer in the project.
- A pleasant system of sharing and commenting, due to which giving feedback becomes even easier, since it doesn’t require learning about another tool.
- Plugins – quite a fresh feature, but at the moment their library is really substantial.
- Available for free!
After designing and polishing the design of the home page and subpages for the heron.steel and heron.custom brands, we started preparing the mobile version. And at that stage our work has been also supported by Figma and its mobile application, which showed live changes in the artboard we selected (the space in the program on which we were currently working).
At this point, we were able to pass the materials prepared by us to the developers so that they could start implementing the design. To ensure that our project was implemented as planned, we had several conversations to best adapt the project to the client’s requirements, but also to very limited implementation time. After minor changes in the content and determination of appropriate solutions, the project could go to the coding phase. We stayed in touch with the developers and the client so that we could react and support the project if necessary.
Extra Sprints: Branding and copywriting
In addition to the standard sprints of our website redesign process, this time the project had 3 extra sprints. The first two of them took place just after the start of our cooperation. It was then that Kamil developed a new logo for the brand and heron sub-brand, and created the entire brandbook too. Due to this, we had very solid foundations when designing.
Moreover, to increase the credibility of the website and its content, the Heron company owners decided on an extra sprint, during which Katarzyna Golonka took up the preparation of content for the main brand and for heron.custom and heron.steel. They were created based on the current content of the website and cooperation offer, which was being used during contact with potential customers, as well as interviews with people associated with the brand.
Summary of our work in numbers and more
For many, it seems that a simple WordPress template is enough to prepare a website redesign, and suddenly – the whole process becomes much shorter and, above all, cheaper. However, the truth is that if we want to have a website that’s well suited to the needs of our customers, we can’t choose a shortcut path.
Good websites are unique and result from a longer and more complicated process than using and customizing an already existing template.
What happens next with the brand? At the moment, developers are working to introduce the last functionalities necessary for the client. In the future, the website will be expanded with new sub-brands, but for now – we invite you to watch the implementation, prepared by developers from Kotorys Media.
5 mapped sub-brands
15 analyzed websites of other companies from the industry
60 elements of information architecture described
Analyzed websites of other companies from the industry
Elements of information architecture described
Case study isn't enough?
Would you like to learn about the whole process and how we could carry it out in your organization?