Case study
Hubspot Agency Website Redesign
Project Overview
Role
Product Designer
UX Designer
Duration
Sep 2022 – Dec 2022 (MVP)
client
Buldok Marketing s.r.o.
Software
Figma
Client, Challenge & Solution
Who is the client
Buldok Marketing is a leading marketing agency specializing in generating new business opportunities for companies in the fields of technology, production, and industrial automation. Buldok Marketing provides powerful marketing solutions aimed at increasing efficiency and growth in the digital world, providing a wide range of services:
- Inbound Marketing
- PPC
- SEO
- Content Marketing
- Web Design
- HubSpot tools
- Social Media
UX Challenge
The Buldok Marketing business has evolved gradually, as has their website. Additional services and the Hubspot offering were added to their existing website, in which the agency began to specialize over time. In 2022, the agency decided to completely redesign the website; optimizeing the architecture in order to achieve a logical sequence of information of each part of the website, with an emphasis on comprehensibility, usability, good user experience and getting leads in the context of their target group.
Visualization of the original website to be redesigned
Solution
Based on the business analysis and the specialized area of Hubspot solutions in marketing, I designed a complex solution that was unified in terms of Information Architecture and optimized graphic design, but also cost-optimized for early launch. We planned an MVP version and the gradual addition of subsequent pages up to the complete product. This initial version is currently live, and we are working on expanding the website and planning future optimization so that it meets not only user expectations, but also the strategy and business goals.
Information Architecture
MVP to full-scope website
The information architecture of the site was devised for the entire site and subsequently modified for the MVP version, which should contain key information for users.
Infomation Architecture visualization for the redesign, both MVP and full web (blurred to respect the client)
Wireframes
To ensure the site’s goals, high conversion rates and user friendliness, I created wireframes for the entire site, including a well-thought-out concept for the initial MVP version. This strategy allowed me to be flexible while streamlining the entire process of completing the site on schedule. The advantage is also the ability to quickly modify the remaining pages according to the analytics and performance results of the MVP version.
Lo-fi wireframes, full website
Lo-fi wireframes, some screens of the MVP
High fidelity wireframes
After the approval of the wireframes for the entire website, I focused on the graphic design of the MVP version. I created color schemes and a typography design that reflected the personality of the business and stood out from the competition.
The first step was to create a light theme version for MVP. After review, it was decided to design a dark theme as well, especially to increase accessibility and deliver an even greater level of charisma to the website, that is usually associated with sophistication, boldness, strength and luxuriousness. This dark theme was chosen for launch of the MVP.
Screens after redesign, light theme version
Screens after redesign, dark theme version
Takeaways
Impact
The website redesign modernized the information architecture. improved the look of the website and strengthened the agency’s brand thanks to modern design, captivating copy and a focus on user needs rather than service presentation. Feedback from clients is very positive even at the MVP level.
What I learned
It was very interesting for me to understand the structure of HubSpot services and the implementation into the Buldok Marketing business, which, in addition to HubSpot itself, also offers its own services. Creating a website for this portfolio of services focusing on the needs of B2B users, and also having two themed versions was exciting from a UI point of view.
Next steps
What I recommend to do in the future
Usability test I
Implement a simplified usability test to verify the comprehensibility and usefulness of the new structure and look of the new website.
Website extension
Based on further improvments to the wireframes, complete the design of the remaining pages of the site to achieve a complete presentation and optimal performance.
Mobile optimization
Review and further optimize the website for tablets and mobile phones (design, copy, structure).
Data analysis
After verifying the usability of the site, analyze the statistics and performance of the site and improve the wireframes.
Usability Test II
During the completion of the website and after its completion, verify the design with users and customers.
COntinuous improvement
Continuously monitor the metrics and performance of the website, verify usability tests, especially after adding new features or revisions.