K

University Homepage Redesign

Company

ConnectWise

My Role

  • UX Design
  • Research
  • Content Strategy
  • Art Direction
  • UI Design
  • Interaction Design
  • HTML/CSS Development
  • Bootstrap Development

Summary

I led the design and direction for ConnectWise University’s homepage redesign, working closely with the Learning and Development Manager.

Other Team Members

  • Learning and Development Manager
  • Director of Education(Stakeholder, my boss)
  • Developer from the internal dev team
laptop featuring University Homepage Redesign

Background Info

The sole stakeholder and product owner on this project believed that the existing homepage's “look and feel” had grown stale and needed a modern take. Unconcerned with the content, broken widgets, or user goals, he had little interest in or experience with Lean UX or other agile methodologies.

ConnectWise University: The Product, The Ecosystem

ConnectWise makes software that helps Managed Service Providers run their businesses, and the University is its educational platform. Over many years, the University has become an operational catch-all for ConnectWise, losing its focus on learning. With no discernible content strategy or information organization, each part of the University represented the organizational silo that owned it.

Users

ConnectWise University has a diverse and growing user base. More foundational research was needed to fully understand those users, but generally, many University users are SMB owners, software administrators, and smart technical IT professionals like System Engineers.

Prior research (card sorting, tree testing, field interviews) revealed many use cases and user mental models. In terms of user scenarios, generally, users could be broken down into 3 groups:

  1. New users looking for software onboarding and implementation info.
  2. Users looking to overcome an urgent tech support issue right now.
  3. Users looking for teaching tools on improving operations and running their business.

UX Challenges

  1. I'd mostly work as a "UX team of one".
  2. Time was limited, but the timing was uncertain.
  3. Requirements weren't born of user needs or desired business outcomes.
  4. There was no content strategy.
  5. The business' silos, shifting leadership, and political climate could derail progress.
  6. The opportunity for scope creep was high.

UX Solutions & Approach

  1. I conducted stakeholder interviews to gain shared understanding.
  2. I gathered user and technical insights from prior foundational research projects.
  3. I gathered new user insights from web-based intercept surveys, heatmaps, confetti maps, and scroll maps in Crazy Egg, and Google Analytics.
  4. I analyzed this data and formed hypotheses and created speculative wireframes and design sketches.
  5. I created a content workbook as a foundation for the experience.
  6. I created an MVP and then tested usability with real users.

Execution Guidelines

Time was limited. We knew we could iterate down the line. We aimed to plan, write, and design with these guidelines in mind:

  1. Create a content strategy that prioritizes learning and then support and community.
  2. Prioritize clarity and brevity.
  3. Create brand messaging that establishes authority/credibility for the Education Department as a center of business success.
  4. Create a visual hierarchy that enables users to scan and easily find their way.
  5. Use progressive disclosure to reduce clutter and cognitive workload.
  6. Consider the first-time user as well as long-time users.
  7. Prototype with real code where possible.

Final Design

Full View of Homepage Redesign

UI Breakdown: Upcoming Training Events

Details and Micro-interactions

Progressive disclosure was key to keeping the UI light and airy. On hover, the tiles reveal event info and robust tools.

Users dictate what displays based on the settings they chose.

Hidden Superpowers

Users are empowered to do much without leaving this screen.

  1. See details for this event and then register for it in one click/tap.
  2. Save this event to My Stuff.
  3. Share this with colleagues in the same ecosystem.

Programmatic Features

Specific upcoming events are displayed based on the users' preferences/interests that were set up during their onboarding into the University. Initially, we had to do this manually, as it required help from the dev team who wasn't available at the time.

Visual Cues

And Hidden Visual Hierarchy

Reducing cognitive load was one guideline. On hover, a hidden visual hierarchy is revealed, showing a prominent call-to-action.

Learnings

Much of what we learned came from the research conducted at the start of the project. We were able to make some evidence-based design decisions that went beyond simply improving the homepage’s look and feel. Moreover, we could anticipate potential fallout from making sudden and drastic changes to the experience.

Key takeaways - many are reinforcements of truths we had previously uncovered - include:

  1. Users gain access to the University long before they learn a homepage even exists. Their introduction typically happens during touch-points outside of the Education Department. We have to do a better job of orienting new users to the University.
  2. We could change much of the homepage and not many users would notice.
  3. This was a great opportunity to re-market the homepage and re-educate internally and externally.
  4. Understanding users' mental models and organizing things sensibly (e.g. information architecture) is paramount to a helpful experience.
  5. Documenting and addressing technical issues helps provide a blueprint for fixing your product.

More Learnings

During the discovery and ideation phases, I uncovered the need for a University Dashboard, a place where learners could manage their University account, GPAs, degrees, and other administrative sundries. After some early marketing testing, we decided to add this to our Education Product Roadmap. Explore the University Dashboard project.

Contact Me

email kmbutlerx [at] gmail.com

KM Butler Copyright 2013 - 2025

chevron_right