YOOV Official Website Revamp
Overview
YOOV is a growing B2B SaaS company that assists clients with digital transformation. They have developed a management system for cross-functional collaboration and intelligent corporate management. They were excited to launch their new branding with a set of advertisements and a new website.
Role
UI/UX Designer
Project Manager
Year
2021
Tools
Figma, Jira
Mockups (3 breakpoints)
Components
Bounce rate
Form submission
Whatsapp enquiry
Context & Problems
YOOV collaborated with an outsourced design agency to complete its rebranding. As the only product designer, I joined the team and participated throughout the entire process, sharing my ideas and opinions during critique and review sessions.
Although the rebranding was almost finished, we needed to begin revamping the website to align it with the new branding. With a series of new online and TV commercials set to launch soon, management expected the new website to be launched in the same quarter.
We outsourced the development to another agency because we didn't have enough in-house resources at the time. To increase flexibility and transparency, we decided to implement a sprint-based project management approach.
User Problem
Due to the cluttered UI and web responsiveness issues, the legacy website is hard to navigate, making it difficult for users to find the information they need.
Business Problem
It's difficult for users to complete the conversion flow and become a lead, especially on mobile devices. The significant friction in the flow results in a low conversion rate, causing the company to lose many potential customers.
Team
I served as both the designer and project manager for this project. I collaborated closely with our in-house growth and QA teams. The growth team was responsible for the website's content, while the QA team was tasked with testing it. The agency's development manager was responsible for overseeing development progress and communicating with developers. He also acted as the main point of contact between YOOV and the agency. Other management stakeholders did not participate in the development process but provided feedback during critique and review sessions.
Limitation
Due to a tight timeline, management did not expect major changes to the website's structure and content. As a result, I had to work with the existing content to design the website. This may limit the ways in which we can present stories and benefits about our products.
Audit legacy website
Before beginning any research or sketching, I conducted a UX audit on the legacy website. My goal was to identify pain points experienced by our audience, as well as factors contributing to low conversion rates and high bounce rates.
Unfortunately, the website experience was poor. There weren't many components that could be reused, and a complete revamp of the website is necessary.
Major issues
Lack of consistency
The website lacks consistency in terms of icon styles, images, font styles, spacing, colors, and other design elements. This can confuse users and make it difficult for them to navigate the site. Additionally, it can make the website look unprofessional and unpolished, which can negatively impact user experience and lead to a higher bounce rate.
Lengthy and clumsy content
Lengthy and clumsy text can increase cognitive load, as users may need to expend more mental effort to understand and process the information. Even if users are willing to spend time on the content, it can be difficult to read and digest, leading to lower engagement and potential frustration.
Broken responsiveness
The website's responsiveness did not function well across different breakpoints. When switching to another breakpoint, some components and layouts broke. The worst part was that users could not interact with the broken components, which prevented them from completing their journey. Since most of our website traffic comes from mobile devices, this likely caused a high bounce rate.
Review the new brand guidelines
To gain a better understanding of a brand's personality, tone, and aesthetic, I reviewed the brand guidelines. The core brand colors, illustration style, and graphic elements were well-defined in the guidelines. The guidelines provided a good source of reference for me to revamp the website.
Research on B2B websites
I analyzed the structure of several landing pages from top-edge B2B tech companies to determine if they share common design patterns or layout structures. Most of them have clear value propositions and communicate their message simply and directly to their target audience. They also use high-quality images, including product interface mock-ups that demonstrate features, and photos that help illustrate use cases and scenarios. The use cases section is quite common among these references, and it helps their audience understand how to make good use of their product or service and determine if it's suitable for their existing needs.
Define goals
Through the discovery phase, I identified the following problems with the existing website and shared them with the stakeholders:
- The current website does not align with the company's new branding.
- The website's responsiveness is poorly designed, causing usability issues.
- The website has a high bounce rate and a low conversion rate.
Once the problems are clear, the project's direction can be framed by the following 'how might we' questions:
- How might we better align the website with the company's new branding?
- How might we improve the website's responsiveness to enhance usability?
- How might we reduce the website's bounce rate?
- How might we increase the website's conversion rate?
- How might we better communicate the value proposition of the company's products or services?
Solution
My focus was to combine functionality with YOOV's refreshed brand aesthetic. I designed a set of icons that embody and reflect the revamped brand image. I also used a grid-based layout to make the content easy to navigate and visually appealing, encouraging exploration without overwhelming the user.
I further highlighted the design by using YOOV's brand colors. The use of gradients and accent colors are key elements to portray the brand's high-tech prowess and foresight.
Marcus Kung