Case Study: VDCI Redesign with Magento 2

The Virtual Design & Construction Institute (VDCI; formerly known as cadteacher) was founded in 1997 by Al Whitley, MBA, AIA, to “teach architects, engineers and contractors in San Diego how to most effectively and appropriately use AutoCAD in their offices.” VDCI has grown significantly over the years — now offering high quality onsite and online educational training options for a variety of CAD and BIM programs.

In 2016, VDCI became the first and only nationally accredited institution of its kind in North America. While VDCI was gaining this impressive recognition as an institution, their website wasn’t quite keeping up.

PINT built VDCI a fresh, mobile-optimized, secure site using the Magento 2 ecommerce platform that has boosted enrollment by 15-20% and specifically increased the enrollment of course bundles (as opposed to single courses). The new VDCI site accurately reflects the prestige of the institution while making it easy for new and returning students to find relevant information and enroll in courses.

Client:Virtual Design & Construction Institute
Location: San Diego, CA
Industry: Education
PINT Services: Information architecture, design, image research, front-end development, quality assurance, hosting, security consulting, marketing
Technology: HTML, CSS, Javascript, Magento 2, Fully Managed Hosting

Challenge

VDCI’s founder, Al, had largely been maintaining the website himself when he came to PINT, and while functional, the site lacked the polish one might expect of an accredited educational institution, and came with many functional limitations. The ecommerce portion of the website was handled by a third party tool, for example, which resulted in a disjointed user experience when it came to actually enrolling in a course or purchasing course materials.

Together PINT and VDCI generated some high-level goals for the project:

• Improved user experience. – Users need to be able to more easily find the classes they’re interested in, what they’ll learn when they enroll, and how to register.
• Improved look and feel. – VDCI teaches students how to use cutting-edge architectural software, and the site needs to reflect their status as a modern (and nationally accredited) institution.
• Improved performance. – The site needs to function reliably to support growing student and organizational needs.

Solution

By conducting discovery phase research before building, PINT helped VDCI understand a) the needs of its students, and b) the value that VDCI has provided to the students who have enrolled in their courses, and c) the needs of the organization.

To gain insights into these areas we conducted:

• Stakeholder interviews
• Student (user) interviews
• Student survey design consulting
• Stakeholder working sessions

Once we understood these key elements of the project, we were able to ultimately design a site that accurately communicates VDCI’s value, and provides the right information in the right places for new and returning students…while also supporting and improving VDCI’s organizational processes.

Discovery

In order to understand VDCI and its users more thoroughly, we conducted a series of student (or user) interviews. VDCI generously compensated the participants with discounts on future courses in exchange for their candid feedback on their experiences with VDCI.

In these one-on-one sessions, we discussed their experiences during several points in the student experience lifecycle, including:

• Finding VDCI
• Deciding to enroll
• Enrolling
• Taking the VDCI course (or courses)
• Changing Careers

These sessions provided important qualitative data around student values, expectations, and preferences that we could later speak to, or leverage, via the design and messaging of the new site.

When possible, we also sat with these students as they walked through the existing site and highlighted usability issues they had encountered — to understand highlights and pain points to inform the new design.

We also worked with the VDCI team to generate a student survey for distribution — to gather insights from a wider audience about student experiences and preferences.

Gathering the major takeaways from both the student interviews and surveys, and viewing them in light of information collected from stakeholder sessions on the operations and goals of the organization, we were able to generate a list of actionable insights that would inform our initial design decisions.

UX/IA

Considering the insights and preferences gained from the discovery, we began to design the site structure and work on wireframes with the following insights in mind:

• Most students search by software program they need to learn
• Students preferred the short, accelerated classes offered by VDCI since they often had busy work and personal lives
• Students often had to communicate the value of a course to their employers who were funding the training
• The value of course bundles or certificates wasn’t clear on the existing site

Ultimately, we worked through several iterations of both the sitemap and the initial wireframes to ensure that the design was best supporting common user needs, while also accomplishing VDCI’s goals.

It was important that individual courses, as well as bundles and certificate programs were as easy to find as possible, and enrollment next steps needed to be clear and easy. Course detail pages needed to provide sufficient information about what would be learned, what materials or pre-requisites were required, while also maintaining a light and minimal appearance so that the information could be easily browsed.

Implementing ecommerce elements into the experience presented one unique challenge. While on one hand allowing a student to enroll and pay for a class in one simple swoop, the ecommerce elements threatened to make the site feel like just another ecommerce site — all about sales. The focus for VDCI needed to be on the educational value of its course offerings– making enrollment next steps clear and easy without being too pushy about sales and purchasing.

We accomplished this by downplaying elements like the shopping cart (removing the cart icon), and using educational language (e.g., ‘enroll’, or ‘register’, instead of ‘buy now’) throughout the experience.

Content

Because the VDCI team is so immersed in their business, we relied on their expertise to write the content for the site. To help guide the content, PINT performed keyword research and assigned a focus keyword on each page.

Once VDCI completed the content generation, PINT worked with VDCI to optimize their content for the web. Content on key pages were edited for length, clarity, browsability, and SEO impact.

Post-launch, the amount of keywords ranked has continued to increase, and VDCI has 200+ keywords ranked 1 – 10.

Design

The design of the site needed to accomplish a few different goals. It needed to look fresh, modern, and professional in order to accurately represent VDCI as a modern and reputable educational organization.

VDCI also had a branding challenge to overcome as part of the redesign effort. The school was initially called “cadteacher” as it started out as solely an instructional facility that taught CAD courses. Once the school started offering BIM, Revit, and other courses, the name was changed to “Virtual Design and Construction Institute,” however, students still colloquially referred to the school as “cadteacher.” But interestingly enough, students would use the name “Virtual Design and Construction Institute” on their resumes and LinkedIn. After several creative and research sessions, PINT determined dropping the “cadteacher” logo from the design would help convey a more professional and reputable aesthetic for prospective students evaluating the school.  

The design of the new website also needed to convey some of VDCI’s brand attributes – founded by an architect, VDCI is pragmatic and industrial. Using imagery of the VDCI campus helped lend authenticity to the site — communicating the classroom experience for both onsite and online participants.

UX standard practices like clear and consistent calls to action and a consistent use of color lended to the sense of reliability and trustworthiness that VDCI exhibits as an institution.

Development

The most suitable content management platform for VDCI’s new website was Magento Community Edition 2.1 as it offers a lot of core functionality from which a growing ecommerce business can benefit. Magento 2 has robust catalog and customer management tools in addition to their integration with payment vendors like Paypal and Authorize.net making ecommerce manageable for smaller organizations.

We chose Magento for VDCI because their catalog and requirements called for a system that was advanced enough to handle their checkout requirements, yet simple enough for a few team members be able to edit.

VDCI’s enrollment process called for a unique checkout flow for users signing up for classes. We had to modify the existing core Magento checkout process to account for additional steps in selecting the appropriate enrollment dates, processing the students that would be enrolling in the class, and filling out an enrollment agreement form after checkout. We solved this by overriding Magento’s default checkout process to add additional steps and created a custom module to handle email enrollment signup forms for technology certificates.

Marketing

To better track how users are interacting with the site, PINT implemented two separate analytics tools for VDCI: Google Analytics and FullStory.

Google Analytics

Through Google Analytics we are able to track ecommerce transactions, as well as set up custom conversions for when a user submits the contact form or creates an account.

Though Magento has a full reporting system for sales, having ecommerce set up in Google Analytics gives VDCI a fuller picture of the user’s journey by providing referral sources, time on page, pages/session, etc.

FullStory

FullStory provides playback on user sessions which lets VDCI watch users interact with their site, as well as provides additional analytics data. This includes being able to see how the user interacts with each page, what other courses were considered, and which parts of the process caused errors or were unclear.

Together, these two analytics tools provide the data needed to make smart decisions on what site sections may need updates, judge how marketing campaigns perform, and more.

Results

Since launching in August 2017, the new site has already yielded impressive results for VDCI with a 15-20% increase in enrollment. Implementing standard UX best practices along with a true-to-brand modern design resulted in a site that reflects the quality of VDCI as an institution. A quality site, paired with an impressive curriculum seems to be a winner. With a marketing metrics plan in place, we are observing the success, and iterating to help VDCI continue to get even more enrollments and happy students.

Have an impressive business, and need a site to match? We can do that. Get in touch.