Designing an e-learning system
“Education is the kindling of a flame, not the filling of a vessel.” –Socrates
The problem. The why. The scope:
The first and second quarter of 2020 saw a 32% increase in the market for digital learning and training, but leaders in architecture, engineering, and construction management (AEC) firms cited difficulty with finding instruction specific to their industry. Further, they desired a “learn-as-you-go” solution that is “focused on projects and software” and “keeps employees billable.” How do we make online continuing education and training more accessible and focused for architects, engineers, construction managers, manufacturers, and their associates and employees?
My client had a lot of ideas for services, but needed direction to bring the digital product to market in a way that appeals to their ideal clients. Enter Gabrielle, the untangler.
I was the sole user experience designer and copywriter for this project. It was full-time work, and, as a start up, it involved wearing a lot of hats. When not deeply entrenched in user research, card sorts, usability testing, wireframing, or prototyping, I was attending Board of Directors meetings, working on business strategy, and assisting other department leads with strategy execution. I earned my weekends, that’s for sure!
The Solution:
Create an online learning site with two main goals:
Explore online learning programs for the AEC industry
Enable users to enroll in online learning or live mentoring programs
The Method:
Conduct thorough user research to develop typical user personas
Create iterative low-fidelity prototypes to test usability
Design medium- and high-fidelity prototypes in Sketch that include:
An overall layout and global navigation
Information about training services
Information about typical training process
Ability to contact sales team
Ability to read reviews
The Research:
I was given a brief by the client indicating a target market and industry trends. However, I supplemented this data with additional user research to understand where my client’s product could differentiate from, and better serve, the market. It was clear that there were five distinct target user groups: architects, engineers, construction managers, manufacturers, and multidisciplinary professionals, each having their own set of delights, pain points, and concerns. I conducted interviews and focus groups to further understand these divergent needs and plotted this data in an empathy map. Once mapped, I was able to translate this data into distinct personas and devise potential solutions to test with my users.
The Empathy Map:
Architects:
Architects prefer to have all the information available before making a decision about online learning. Likewise, they are slower to adopt new software and would prefer to learn with a live instructor. They fear the inability to maintain their quality of work and meet their deadlines while they learn. For the architect, trusted working relationships are essential.
Engineers, Construction Managers, and Manufacturers:
Engineers required trusted relationships as well, but prefer a solutions-first-methodology-later approach. They are more likely to buy when they are presented with the outcome first, with the learning path secondary. Construction managers (CMs) and manufacturers operate by a done-once-done-right approach and prefer to learn what they need to know quickly and without hassle. They will appreciate a simplified user interface that is easily accessible across multiple devices.
None of the competitors within the market addressed the relationship attributes desired by the architects and engineers and few offered the streamlined multi-device solutions that the CMs and manufacturer’s requested. We’ve found our opportunity!
The Design Process:
I approached the design process in an iterative fashion knowing that, as a business-to-business solution, I needed to create an interface that solved both businesses’ goals and fostered a strong partnership in the process. At first, I started with a very lean model and, through several rounds of usability testing, slowly introduced more nice-to-have features into the design. Even process-minded engineers like nice things, right? Here’s what that looked like:
Started with an open card sort including participants from each of the three target user groups to understand the terminology and site interface the users would anticipate.
Inputted the results of the card sort into a story map to prioritize user needs over wants and nice-to-haves.
Created a bare-bones site map that started with a solid landing page and allowed users to self-classify in order to access content targeted to their user group (i.e. construction managers vs. multidisciplinary teams).
Developed hand-sketched wireframes (see at right).
Tested the wireframes with a small panel of target users.
Noted complications, unintended results, unmet desires, and unused extras.
Developed low-fidelity wireframes in Sketch and began mapping the website flow.
Collaborated with the web developer to ensure the design-in-process was able to be accomplished within the client’s budget.
Usability tested the wireframes and implemented feedback, adding in missing high-priority wants and trimming out unused items.
Refined the wireframes into a clickable prototype.
Created copy and content for the entire website as well as related marketing copy.
Presented my prototype and user flows to the client.
The one-page landing design started with this medium-fidelity prototype where users self-categorized to find sales copy specific to their industry’s pains, wants, and needs.
As a user scrolled through the page, their concerns were addressed in the order that they were typically arising during usability testing.
This included carefully walking them through the process, as a partner would, to ensure confidence.
Finally incorporating testimonials for social proof and concluding with the client’s desired call to action.
The Result?
At this point, I wish I could say the world was forever changed for the good and all architects, engineers, manufacturers, construction managers, and multidisciplinary teams were learning happily on my client’s program. However, the initial release indicated that there was one flow in particular that wasn’t intuitive to the target market and was creating a new pain point. I love a good learning moment, so I dove in! During round two:
Since my initial testing was primarily qualitative, I developed an online survey to gather more quantitative data to implement.
Drawing on the quantitative data and customer feedback quotes from the client, I developed a new set of low-fidelity wireframes with flows to address the challenge with the current website.
I retooled the web copy to increase clarity and incorporate user feedback.
I implemented this data and developed an updated prototype, this time to rave reviews.
Further, the email newsletter copy I created as a bonus boosted my client’s open rate from minimal to 50% in just over a month. Business goals…exceeded!
A moment of reflection:
I wish I had gathered both quantitative and qualitative user feedback in my initial design. I’m grateful for a client that appreciated the agile workflow and willingness to revise and revisit numerous times throughout the design process. I’m someone who readily learns from my mistakes, so if you’re reading this, you can be assured that I’ll never let that happen again!