After research and prototyping, I designed a new way for ConnectWise customers to discover and filter through the dozens of monthly learning events hosted by our trainers, consultants, and SMEs.
Background Info
I was given an opportunity to think about how the University Calendar could be improved. We had an upcoming tech conference where I'd have a chance to talk with some of our customers and users. The stakeholder suggested that I conduct some research about the calendar, but could name no desired business outcome nor a problem that needed to be solved through a redesign. However, after a heuristic evaluation, I worked with the stakeholder to come to a shared understanding of market research, usability testing, and their potential to solve business problems.
The Original Calendar
The current system is a grid (containing between approximately 28 - 31 squares) lists the company's upcoming training events. The current month shows by default. Each square is marked with a numeral date and lists anywhere from zero to four events. There is a dropdown featuring event types by which users could filter events. Additionally, the UI features a left-facing and right-facing arrow that allows users to skip forward or backward by month.
Original Calendar Design
Some Business Problems
After a heuristic review, I discovered that:
The calendar never scaled well, so as the number of training events increased and training event types diversified, the UI appeared more and more cluttered and confusing.
The standard “28-day calendar view” was no longer effective. It was difficult for mobile and desktop users to find and register for events.
Filtering tools were somewhat hidden in the UI and not self-explanatory. Some filters didn't work at all.
Key company training events were missing from the calendar (e.g. conferences, workshops, and community meetups).
UX Challenges
The calendar was off-brand and needed an update to the look and feel.
The main filtering options didn't reflect the number of events or event-types.
There is not a clear picture of who the primary users are or what their goals are in using the calendar.
There was a lack of clarity of who the stakeholders are and who I answered to as the designer, as well as who would make the final design decisions.
Quantitative data reveals that people use the page however they don't report bugs or usability issues.
UX Challenges, Continued
The org is very focused on deliverables, not on understanding market fit or solving business problems through design.
One primary stakeholder concern was to "appear busy" at the company's upcoming tech conference.
I would be forced to conduct recruitment at the annual tech conference, limiting how well I could find proper recruits. Moreover, our core users may not typically attend this annual conference, and thus may not be represented in the attendees.
Competitive Analysis
Fig. 1
UX Solutions & Approach
Since there were so many uncertainties and no clear goals, I decided that some exploratory research could help us come up with a direction to go in.
After a heuristic review, I figured that applying some classic design principles as well as universal design principles to the layout might help solve potential usability issues.
A (competitive) analysis helped me come up with some ideas for a redesign. I looked to places like Ted Talks and Eventbrite for inspiration. (Fig. 1)
I quickly cobbled together a working prototype that moved away from the grid layout and single filtering tool. I adopted a layout similar to what I had designed for our video library and service blueprint library. I focused on conciseness in microcopy, laying out these details in a way that hopefully wouldn’t overwhelm the user.
I did guerrilla research, including recruitment, on the conference floor. I did both in between conference sessions and at my dedicated booth.
After recruiting real users, I iterated on the design in my hotel room and updated the usability study for a batch of new users.
Iterative Design
Version 1
The first version featured a four-image carousel as the page hero. When tasked with finding a training event, users quickly scanned the above the fold elements page, but frequently went to the search bar at top of the page. They ignored the image carousel as well as the event filters.
Did users not see the “Find A Learning Event heading? Did they not see the event filters? Should I make the event page’s search tools more prominent?
Furthermore, users reported that having only two events per row was too little. At most, they could only see about four events at a time before having to scroll. The page was scroll-heavy for users who were prone to scan first.
Fullscreen View: Filtering for Training Events
Version 2
I had more information to make some educated decisions on improving the UI. In the second iteration,
I swapped the carousel for a static hero and decreased its height.
I pulled the search and filtering tools upward (to somewhat overlap the hero image) in the visual hierarchy.
I increased the font size and changed the color of the main heading.
I added a large search field to the filtering tools as a way to filter by location.
Getting closer
I still had some work to do. To simplify the UI even more:
I added a bold headline, better conveying the page’s purpose up-front.
I removed the event summary. I suspected the users would rely on the titles and filters to self-educate the intent of each event. Click-throughs might also help.
I made the layout more scannable by adding a descriptive image, helping to break up of the space.
On hover, the event category is revealed instead of being displayed by default.
I decreased the size of each tile, allowing for many (anywhere from 2 - 6) to show per row.
In the meantime, I had completed other designs in this product ecosystem, so I was able to pull in UI components from other projects or build new ones based on this new context.
Final Design
What's next?
Going Live, Ongoing Iterations, and Learnings
Time, as always, was of the essence. I would have to test and iterate over time. The long term strategy was to push this new design live, measuring engagement, conducting usability research, and collecting market feedback over the medium and long-term.
Additionally, I had previously instrumented a feedback channel where users could always send their insights to us. I would add this tool to the page.
In doing initial exploratory research, I (and my organization) learned that we need to conduct more foundational research to better understand the user mental models and pain points.
Some of the data gathered in this project became evidence that the organization needed to have a better understanding of its customers and end-users and their journey throughout our learning ecosystem.
