Enhancing Marketing Pages
See how I redesigned outdated marketing pages to keep customers engaged and informed.
The Challenge
Being a large B2B entity, Cox Business supports a large number of product and service pages on the site. As a result, existing pages often will become outdated.
Outdated pages present a few problems:
1. Non-compliance with the current design system
2. Non-compliance with current accessibility standards
3. Inaccurate or misleading copy
4. Lack of modern visual design styles/aesthetic
The Solution
In this case, the focus was the Cyber Security service page aimed at small businesses.
Our stakeholder wanted us to improve page layout, make content suggestions, and make sure all page elements complied with the current design system.
These improvements, according to forecast, would increase retention and reduce customer service volume.
The Results
Were my design changes successful in regards to the project goals? Yes!
✅ ~20% increase in visits lasting 1+ minute
✅ ~10% increase in lead form completion
✅ ~30% increase in embedded video clicks
Design Approach
Evaluation of Current Design
As a baseline, a page diagnosis helped me determine my approach to the redesign. Keeping project goals in mind, this allows me to prioritize key improvements.
Key Observations and Questions Raised
#8 of Nielson Norman’s Usability Heuristics for UI is “Aesthetic and Minimalist Design”
According to the guidelines, it is a “design that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks.”
Using this heuristic, I determined that excessive copy was affecting the readability of the page as a whole.
How could I support the team to create a better experience for our customers?
What solutions could be refined from these observations?
Leveraging our design system, I wireframed using generic versions of standard components. I then worked with the stakeholder through multiple iterations to refine the content and layout.
Wireframing
Original Page
The design went through several different iterations as we found the middle ground between SEO/business needs and my design ideas.
Wireframe
To enforce visual consistency, I utilized a standard component style to help the stakeholder understand their limitations.
Final Mock
In this case, it was difficult to fully depart from industry jargon. Icons can be a great way to balance it out, while strengthening visual clues for the user.
Delivery
After several rounds of QA, we launched the product update to the customers. It was considered a marked improvement on the previous dashboard and was met with positive feedback. Overall, it’s a fantastic way to streamline a design process when you have a short window based on business requirements.
After
Before
Reflections
With any project, I make notes along the way in order to improve the working relationship between teams. Collaboration is a living and breathing organism!
1. Dashboards can be incredibly complicated, but you don’t need to reinvent the wheel.
2. To help the stakeholder with future pages, we began proactively sharing components with generic text and character limits.
3. This way, we can lay down visual ground rules based on UX best practices.
4. Stakeholders had a better idea of their visual limitations, and were able to make more informed decisions upfront.
5. As a result, there ended up being far less copy editing through each iteration.