Website Redesign
Revamping the Webgility Website for Enhanced Branding and User Experience
My Role
UX/UI Design, Prototyping, User Research, Content Strategy
Length
2 months
Team
Head of UX, Lead Product Manager, CEO, Project Managers, Marketing, Front-End Engineers, QA team
Introduction
Overview
This project involved a comprehensive redesign of the Webgility website, including a new navigation structure, homepage redesign, four new automation pages, updated integration and pricing pages, and a new landing page with a product demo.
PROJECT HIGHLIGHTS
CONTEXT
Repositioning the brand through messaging and content
The redesign of the Webgility website aimed to better communicate the software’s functionalities and value through an enhanced user interface and updated branding. The goal was to make the site more navigable and content more readable, aligning the design with Webgility’s advanced technological capabilities. This project supported the brand's strategy to clarify its offerings and benefits, boosting user satisfaction and business growth.
Problem space
Confusing language, navigation, and disconnected images
The old Webgility website was difficult to navigate, had outdated designs, and didn't support our new marketing initiative to position the company as an integration/connector software rather than just an accounting automation tool.
This caused user confusion and failed to effectively showcase our client base and the product's capabilities. The challenge was to transform the site into a visually appealing, user-friendly platform to enhance the user experience and improve onboarding and retention. This required a strategic redesign of the navigation and content layout to better reflect Webgility's goals and technology.
RESEARCH AND INSIGHTS
Research Methods
Key Findings
After analyzing all of our data we can to these conclusions aboutcurrent issues our users were facing.
Navigation Challenges
Users frequently reported challenges in navigation the site, often struggling to locate crucial information quickly.
Visual Appeal
The website's appearance did not align with modern design standards negatively affecting the perception of Webgility as a leader in tech innovation.
Content Clarity
The content layout was cluttered and often overwhelming, diluting important messaging and calls to action.
brainstorming and ideation
Information Architecture
In the beginning we felt it was best to determine the best way to organize the website that fit our internal goal of promoting our value props and allowing easier navigation for potential clients. By updating our informational pages to the users perceived use cases of automation we were able to balance out and rename the pages to help better fit the customer and their ability to learn about the product while browsing through the website.
Design Discovery
Content vs Design, what comes first.
This is the age old questions, what comes first, content or design. In this situation we started iterating on design first as we felt it would be helpful to determine design patterns early on. In addition, our CMS platform at the time (Hubspot) allowed us to create and reuse component modules and so it was important to audit what we currently had live on the website and what could be repurposed to save time on development.
Design Discovery
Creating an illustrative style
We wanted to represent our users through the hybrid approach of showing images with people that fit our customer personas and also add a touch of visuals that represented the software and its capabilities.
Final designs
Homepage, Automation, and Integration landing pages
Completing the homepage was our top priority, setting the standard for the subsequent development of four new automation pages and the integration pages.
This foundational page required the most time due to meticulous refinement of copy and images to ensure high-quality presentation and functionality. Additionally, we focused on designing reusable components that could be effectively applied across the homepage, automation, and integration pages, streamlining the development process for the entire website.
Final designs - Pricing page
The new pricing page design adopts a cleaner, more modern aesthetic that improves readability and visual appeal. The use of space and typographic hierarchy helps in making the page look less cluttered.
CONCLUSION AND RESULTS
Design Meets Strategy: A Design Journey to Enhance User Engagement
We successfully revamped the Webgility website, enhancing both its visual appeal and functionality. Our focus was primarily on the homepage, automation, and integration pages, ensuring a seamless and intuitive user experience. The introduction of reusable components not only accelerated the development process but also maintained a consistent design ethos across the site.
Key Metrics Demonstrating Improvement:
User Engagement: Session duration increased by 25%, reflecting the enhanced engagement with our new design.
Conversion Rates: Clearer calls to action contributed to a 15% increase in trial sign-ups, indicating more effective user conversion.
Bounce Rate: The bounce rate decreased by 20%, showing that users are staying on the site longer, exploring more of what we offer.
Reflections
Reflecting on this project, we gained several valuable insights:
User-Centric Design: Regular user feedback was crucial in refining the user interface. This approach will continue to be a cornerstone of our design strategy.
Flexibility in Components: The success of our reusable components underlined the importance of adaptability in web design, allowing for quick modifications without compromising quality.
Cross-Department Collaboration: Strong collaboration among the design, development, and marketing teams was key to ensuring the website's performance across various metrics.
This project reaffirmed the importance of integrating aesthetic, user experience, and functionality to drive better business outcomes. The lessons learned here, especially the value of continuous user feedback and data-driven adjustments, will guide our future projects.
