Connect Microsite Partial Refresh
UX Design
Client:
McGraw Hill
ROLE:
UX Lead
DURATION:
1 Month
To build on recent work to improve full course learning platform Connect's interface for higher ed students and instructors, the higher ed and web/ecom teams collaborated on a refresh of the learning platform's marketing microsite, with specific attention paid to the homepage's design, the microsite's content structure and its feature pages' heroes.
Our Goals:
Understand key instructor attitudes towards a learning platform purchase
Tailor presented content on microsite according to research findings
Measure an improvement in product comprehension
Research
To kick off the effort, our UX Researcher conducted 15 moderated research conversations with higher ed instructors teaching 1st and 2nd year courses. Within that segment, we pulled four professors from each of the following subjects: business/econ, science and humanities. Additionally, we filtered our selected users to 8 non-Connect users and 4 current customers.
As an overview, UX Researcher collected impressions from these users across four competitors before showing them the Connect microsite:
Out of these efforts, we discovered that Connect performed quite well against competitors based on the the factors they named to be most important when considering a learning platform. Even so, we had opportunities to enhance our content, so we summarized our discovered action items and handed these off to design the design phase.
Content Review
To pair with our research findings, we did an assessment of the microsites existing content structure and reviewed each page's respective heatmaps for the last year to get an understanding of which pages had the most engagement and visits.
User-Story-Based Content Architecture
Before considering aesthetics, we leveraged our research findings to form a content hierarchy based on the steps of identified purchase considerations. Below is an outline overviewing these steps and the related content:
As a potential instructor customer, I want to know what Connect is at a high-level.
Product Overview - "A complete course platform that enhances student learning experiences and automates busywork so you can do what you do best: teach."
High-Level Benefits
As a potential instructor customer who knows what Connect generally is, I want to know if my specific problems/use cases will be served with this tool.
*We discovered that instructors were notably concerned with understanding a student's experience of Connect, which is why this persona is included even though its members would not convert via the site
Persona-Specific Features
Instructors
Tailored instructor resources (guides, presentations, media, etc.) backed by data
Flexible course building so you can teach your way
Remote proctoring & browser locking for virtual test facilitation
Auto-grading
Assignment & test templates for faster course prep
Class performance analytics - hardest concepts, avg time spent on assignments
Students
Adaptive Learning - Smartbook 2.0
Ebook Access - ReadAnywhere App
Performance insights to inform study plans
Engaging lesson formats with appeal to various learning styles
As a potential instructor customer who is convinced that Connect can serve my specific needs, I want to have a clear path to trial or purchase.
At present, interested customers deep in the funnel would need to reach out to a sales rep, meaning that this action needed to be readily available at any time a web visitor decides they're ready to convert.
As an existing Connect customer, I want to know how to get help when I need it.
The other important route that needed to be accounted for was support, meaning that a path to our support actions also needed to be readily available to the user while inside the microsite.
Cross-Industry Heuristic Comparison
To further confirm our direction, we decided to look outside of our direct competitor circle to review best practices in other industries that use product microsites within a larger web experience, and/or products that presented themselves to a variety of personas. The sites we looked at included:
Adobe
Asana
Webflow
Across each of these examples, we saw recurring patterns regarding the treatment of content and content organization:
Navigation was organized by features and/or by personas/use cases
Imagery was predominantly of the product experience itself rather than generic marketing or lifestyle photos
Credible clients were often featured in a logo list
Breadcrumbs always accompany navigation
Important sales CTAs were always fixed and easy to spot
Wireframing
Our wireframing process involved a cross-reference of the existing page's heatmap against the content identified to be important in the mind of the customer. Based on this process, we were able to cut low-engagement sections and feature new content that we had basis to prioritize up higher on the page.
In the screenshot below, we have a heatmap on the left and the corresponding page's proposed wireframe on the right. Yellow boxes in the heatmap indicate imagery that could be replaced with in-product visuals. Red boxes indicate sections of content that could be removed due to low engagement/prioritization.
To view all heatmaps & wireframes, follow this link.
Style Direction
While the higher ed team worked to produce copy based on the new wireframes, the web/ecomm design team consulted with higher ed's creative team to align on interface decisions.
Out of a light, dark and mixed approach, we went with the latter in order to avoid an abrupt departure from the interface of the rest of the higher ed website.
Design Testing
Before committing to the final style and content direction, we included a round of user tests to ensure improvement from the original microsite to the new design. We setup 9 unmoderated feedback sessions with current higher ed instructors.
88% preferred the new design to the old
33% mentioned appreciation for data-driven success metrics at the top of the page
22% mentioned that student features were important and appreciated these views
Criticisms and opportunities to address in the future are mainly around video content-- users wanted to see more demos and the ability to open an expanded view of embedded screenshots.
Final Prototype for Authoring
An annotated and prototyped design was delivered to authoring for all pages involved in the redesign. To view these prototypes, click on the image below:
These updates went live on Tuesday, January 17th. The web/ecomm team will be tracking performance until the next design refresh opportunity slated for mid-year 2023.
DESIGNS
The length of the design process is always variable, depending on the needs of the customer. In most cases, I strive to iterate off of real user feedback, setting up moderated or unmoderated tasks to test partial prototypes for usability and comprehension.
BEFORE/AFTERS
Before
Before
PROTOTYPES
At the prototyping stage, I'm working closely with devs to ensure that expected behavior isn't only shown through the design, but annotated and documented for their reference as they bring the design to life.