Markley Navigation & Blog
Role: UX Developer
Tools: UX Research, HTML/CSS, JavaScript, HubSpot CMS, Semrush, Figma, Google Docs
Team: Sage Allott (Digital Marketing Coordinator), Iryna Hlushakova (Marketing Manager)
Overview
Markley Group is a premier provider of mission-critical data center facilities, networking and cloud computing services. The company owns and operates nearly 1.5 million square feet of highly secure space and multiple, strategically located cloud point-of-deliveries covering all regions and time zones.
The Markley website serves as a comprehensive hub for their offerings, featuring a range of colocation, connectivity, and cloud solutions, as well as valuable resources such as customer case studies from Warner Music Group, Boston Ballet, and Bridgewater State University. Given the breadth of content, ensuring seamless and user-friendly navigation is essential to help potential customers efficiently locate the information they need.
As the sole UX Developer, I worked alongside the Marketing team in an agile environment to update website pages based on the newly revised style guide. My responsibilities included designing and developing Markley’s secondary pages, implementing a new navigation system, contributing to and maintaining the UI component library, creating a blog platform, and applying updates across both web and mobile platforms.
To see the new navigation and blog live, please visit the Markley website.
Context
The Markley website and blog are hosted on HubSpot. Prior to my arrival, most of the site was built using HubSpot's content management system (CMS). While the CMS enabled users to easily create, manage, and modify content without much technical expertise, it also had its drawbacks:
HubSpot’s CMS had limited design flexibility.
SEO monitoring tools, such as Semrush, flagged thousands of technical site errors.
🔎 Define
Problem Statement
How might we redesign the Markley website navigation so that users can easily locate information and navigate seamlessly across pages?
💬 Discover
Heuristic Evaluation of Markley’s Website Navigation
1 . User Control and Freedom
Issues: Aside from the browser's back button, users have no direct way to return to a previously visited page without navigating through multiple pages.
Recommendations: Implementing a breadcrumb menu will allow users to quickly return to previous pages, streamlining the navigation process.
2 . Recognition Rather Than Recall
Issues: The navigation bar contains 8 primary links: Data Center, Cloud, Connectivity, HPC, About, Blog, Login, and Contact Us. Each primary link leads to a landing page with additional links displayed in red section menus. For instance, the section menu on the Colocation page includes up to 7 extra links.
Recommendations: Limit the number of primary navigation links to 7, based on Miller's law on short-term memory capacity (7 ± 2 items). Combining main navigation and section menu links into a unified system will reduce the need for users to recall information across different parts of the interface, thereby lowering cognitive load.
3 . Flexibility and Efficiency of Use
Issues: The navigation bar scrolls along with the content, making it inaccessible on longer pages and requiring users to return to the top of the page to access it.
Recommendations: Make the navigation bar fixed to improve accessibility and enhance the overall user experience.
Simplifying Markley’s Navigation
📐 Information Architecture
I collaborated with the Marketing team to combine the main navigation and section menu links into a unified, cohesive menu. The new sitemap visually outlines the updated navigation structure, providing a more streamlined and intuitive user experience.
💡 Ideation
Exploring Mega Menus
I chose a mega menu design for its strong performance in usability studies. Mega menus prioritize recognition over recall, allowing users to see all available options at a glance rather than remembering links hidden in traditional dropdown menus. They also visually emphasize the relationships among items, improving navigation clarity.
Iterating Prototypes
I presented three iterations of the mega menu design to Marketing and stakeholders. After multiple discussions and feedback revisions, the prototype was approved.
The mega menu has shipped and is now live on Markley’s website 🥳
The accompanying breadcrumb menu, footer, and mobile navigation designs are also live! 😉
Markley Blog
Before: The Markley blog used to look like this.
Markley’s blog originally relied on HubSpot's built-in blogging feature, which resulted in thousands of technical errors flagged by SEO monitoring tools. To resolve this issue, I had to develop a new system that allowed Markley to upload and manage blog posts independently, eliminating the reliance on the built-in blog.
The new blog system needed to meet the following requirements:
A featured/trending section
Individual pages for each blog tag, displaying relevant posts
Blog titles displayed prominently in a hero banner/image
Tags shown above each blog preview
Consistent styling with the rest of the website
I conducted a competitive analysis of blogs on other websites.
After further research, Marketing and I concluded that hosting the blog outside of HubSpot wasn’t feasible. Instead, I leveraged HubSpot’s HubDB to build the new blog system. This involved coding a multilevel dynamic page structure using HubDB:
Level 1: The main blog landing page
Level 2: Pages displaying a list of blog previews, including multiple tag-based pages
Level 3: Pages displaying full blog articles
One of the primary goals was to ensure that future blog updates could be done without any coding knowledge. All content—blog posts, categories, and pages—is managed through simple modifications to databases, similar to using an Excel sheet. To facilitate this, I also created several instructional guides, covering tasks such as adding or removing a blog post and creating a new blog tag.
After: I developed the new Markley blog using HubL.
Results
Since the launch of the blog platform, we've seen immediate success:
Increased website traffic by 40% the month following the rollout of the new blog platform.
Resolved 10,000+ existing technical site errors flagged by SEO monitoring tools.
Reflection
Here are some of my key takeaways:
Document everything throughout the design process.
Present stakeholders with 2-3 design options rather than overwhelming them with every iteration.
It’s more than okay to ask for help—trying to do everything on your own can sometimes be counterproductive.
You don’t always need to reinvent the wheel—sometimes, existing solutions are the best.
