Overview
This case study showcases the introduction of a new initiative for AIChE, the global hub for Chemical Engineering expertise and resources. At its core, AIChE serves as an educational hub, offering a multitude of communities, activities and knowledge sharing.
In collaboration with AIChE, my mission was to bring to the forefront AIChE's trailblazing initiative to their current website, the "Institute for Learning and Innovation" (referred in this case study as the "ILI"), a pivotal shift in the organization's trajectory.
This project took place from June 2021 - December 2021.
Roles & Responsibilities
UI/UX Design
- Competitive Analysis
- Stakeholder Interviews
- User Journeys and Task Flows
- Low Fidelity Wireframes
- High Fidelity Page Mockups
- Usability Testing and Reporting
Development
- Front-end development
- Pattern Library (using Fractal)
The Challenge
Mobilizing a transformation within AIChE, this case study reveals several hurdles in introducing new material and integrating it into an existing system.
Problems to Solve:
- Elevating the program to a prominent position as the face of the company.
- Expanding the program's information from a temporary one-page format to a comprehensive resource.
- Reaching and engaging a diverse audience and efficiently directing them to relevant resources.
- Introducing and establishing recognition for the four "areas of advancement" associated with the ILI, making them commonly known terms within the organization and beyond.
Business Requirements:
- Adhere to the existing design system, with limited flexibility to propose new layout ideas.
- Integrate the new section seamlessly within the larger website.
- Operate within the established Drupal environment.
- Utilize the CMS system to create new pages efficiently.
Research & Discovery
Following initial stakeholder interviews, extensive workshops with the AIChE team, and a thorough analysis of the client’s documentation, I was able to focus on the critical priorities that required the greatest attention.
Purpose & Goals
Firstly, it was important to identify what AIChE’s objectives were and how they proposed to make it happen. Below is a Why/How/What exercise I performed to simplify needs.
Why
Discover the Company Purpose and Belief
- Believe that success in chemical engineering is more than a typical straight path of taking classes, graduating and starting a job.
- The ILI vision is to guide users in understanding how to fit in this new way of thinking and how it can be used as an advantage to succeed in this field.
How
Understand the Unique Value Proposition
- Proposing four areas of advancement opportunities that are important to acknowledge at ANY point in your career:
- Career Discovery
- Academy
- Practice
- Credentials
What
Identify Services to support Why & How
- Offer personalized skill analysis and identify aptitudes and abilities to reach full potential.
- Wide range of courses that will deliver training and skill development opportunities.
- Select curricula that is certified by AIChE credentials (which helps verify proficiency to current and potential employers.
- Align learners with industry internships and co-ops.
How is Success Measured?
Though it was clear that there were many complicated paths, the ultimate company goals broke down quite simply:
- An increase in membership
- More courses being purchased
Areas of Advancement
The core of the ILI initiative lay within AIChE's proposed areas of advancement. It was crucial to thoroughly analyze each of these categories in order to fully comprehend the motivations behind each one.
Career Discovery
A program that offers a personalized skill analysis and helps identify aptitudes and abilities needed in order to achieve full potential at any career stage.
Practice+
Aligns users with opportunities to apply newly learned skills into practical experiences. This could include internships, competitions and more.
Credentials
Credential programs let users demonstrate their competencies by granting certifications in critical areas such as process safety and sustainability.
Academy
Provides a definitive resource to engineers to sharpen their professional skills. This includes courses, webinars and e-learning that cover a variety of essential topics to enhance careers.
Foundations of Design Clarity
Ensuring a cohesive understanding of the final design required addressing several key considerations:
- It was crucial for users to clearly understand that the areas of advancement were not structured in any specific order.
- The design needed to convey that these advancements could occur at any stage and in any sequence throughout an individual's career.
- As the concept was entirely new, it needed to perform for all audiences, easing their initial understanding of these advancements and stressing their importance.
Target Audiences
The users could be broken down into three main categories but would still maintain the ultimate goal of going through the areas of advancements to find the right path and skills.
Primary Audience
Learners
Individuals that could be at any stage of their career (ranging from undergrad all the way to leadership positions).
Primary Audience
Employers
Companies (specifically HR or managers) who are looking to upskill their employees and teams.
Primary Audience
Educators
Professors who are looking to add classes or additional curriculum to make sure they are up to date and industry relevant.
Target Paths
After discovering the high level idea of who the users were, it was important to breakdown the audiences even further to better understand how to create user paths.
User Mapping
After gaining a clear understanding of the target users, the next step was to strategize how to guide them effectively from the ILI landing page to their respective destinations. The following chart outlines the potential user journeys across various pages, ensuring they are seamlessly directed to their intended destinations.
Navigating the User Journey
Leveraging the pre-existing global design system, I began crafting the navigation and user flow. The client's established framework, featuring distinct sub headers for various sections, provided a solid foundation upon which I built to enhance the ILI experience.
ILI Sub Header
Key Takeaways:
Multiple User Paths
At this stage, it became evident that accommodating various user types and their diverse navigation preferences was crucial.
Inclusive Design
As a result, I determined that the navigation should encompass all three primary audiences: Learners, Employers, and Educators, alongside the Areas of Advancement.
Leveraging Established Components
To maintain visual consistency and prevent header overcrowding, I decided to integrate the "Areas of Advancement" category into AIChE's existing mega menu component.
Streamlined Accessibility
This approach ensured that the header was well-optimized with appropriate keywords, offering a quick and efficient route for users who preferred a direct path rather than delving into the ILI landing page.
Crafting the ILI Landing Page
In this section, I'll explain the UX design process behind the ILI Landing Page, illustrating how it was meticulously structured to guide users through a compelling narrative of the Institute for Learning and Innovation's offerings.
Building the Narrative:
- To engage users effectively, I aimed to construct a compelling narrative on the ILI landing page.
- The idea was to start with a captivating opening heading designed to pique users’ curiosity and entice them to explore further.
A Refined Focus on Advancements
Initially, my wireframe suggested directing users to the Learners page in the hero section. The idea was to assist them in pinpointing the most suitable starting point in their career journey.
However, following discussions with the client, I realized the primary focus should revolve around the "Areas of Advancement." This concept transcended all audience types, making it a more strategic starting point.
Introduction to Key Concepts
An integral part of the wireframe strategy was to introduce the new terms promptly, including "Credentials," "Career Discovery," "Academy," and "Practice+." This approach helped users familiarize themselves with these terms and their meanings from the outset.
Audience-Centric Approach
After establishing the "Areas of Advancement," my wireframe shifted to a user-centric approach, with Learners taking the forefront. Understanding the advancements allowed users to better contextualize their own role as a learner, educator, or employer.
Testimonials & Media
To conclude the narrative, I incorporated testimonials as proof of the program's efficacy. Additionally, I provided supplementary information on "Career Discovery," a critical topic to help users navigate their educational journey effectively.
Guiding Career Growth
For each audience—Learners, Employers, and Educators—I tailored dedicated pages to address their specific needs. Each page opens with a compelling introduction on how AIChE's resources can benefit them directly. Further exploration delves into the vast array of offerings that cater to their distinct requirements.
Learners
- Pages cater to diverse audience segments, including secondary school students, recent graduates, and professionals at various career stages.
- Emphasizes that career success extends beyond education.
- Highlights AIChE's key areas of advancement.
- Specific learner type pages, like "Undergraduate" or "Mid Career," offer specialized resources.
Employers
- Emphasizes how employers can enhance their workforce and foster well-rounded, skilled employees.
- Presents various options, including courses, career strategies, hands-on learning, and certification opportunities—all core components of the Areas of Advancement.
Educators
- Focuses on helping educators develop their students' strengths.
- Discusses opportunities for educators to upskill themselves, ensuring they impart the most up-to-date knowledge.
Advancement Pages
Within the ILI, specific advancement-focused pages—Practice+, Credentials, Academy, and Career Discovery—guide users toward their goals.
Practice+ and Credentials
These pages provide straightforward pathways to resources for certifications, internships, and hands-on experience, supporting users in their pursuit of excellence.
Academy
One noteworthy aspect of the ILI project involved the existing Academy, a robust cornerstone of AIChE's educational offerings.
During the initial phase of ILI creation, a concise marketing page was created to lead users to the established Academy. While the Academy continued to thrive as a vital component of AIChE's educational initiatives, the potential for deeper integration with the ILI was identified for future exploration.
Career Discovery
A unique and dedicated resource to the ILI, the Career Discovery page assists individuals seeking direction in their careers, regardless of experience.
The goal of this page was to not only provide a comprehensive guide with multiple tools but also to ultimately empower users to advance their careers with confidence.
Offerings Meant to Entice the User:
- Workshops
- Job Listings
- Skill-enhanced resources
- Videos for newcomers to the field
- Access to appropriate webinars and conferences
Design & Develop
In this section, I'll describe the design aspects of the ILI, including the utilization of AIChE's existing design system and the creation of the impactful Areas of Advancement infographic on the landing page.
Current Design System
Working within the confines of the established design system was a key consideration (as per the business requirements). Because of the design limitations, my approach involved creatively assembling these existing elements to create a cohesive and engaging ILI experience.
Advancement Infographic
To visually represent the Areas of Advancement on the landing page, I had the opportunity to craft a unique infographic.
Goal
Convey Non-Hierarchical Advancements
- I designed a circular-shaped infographic, symbolizing the endless possibilities within the field.
- Each advancement was granted equal prominence with the same level of boldness. The intention was to guide the user’s eye to appreciate the entirety rather than fixating on individual parts.
Goal
Introduce New Terminology to not only the ILI but AIChE as Whole
- As part of the infographic, each advancement included a brief one-sentence explanation to provide immediate context.
- To manage overcrowding in the design, I incorporated subtle animations by introducing the advancement logos first, followed by their individual descriptions.
Development
In terms of development, AIChE had a dedicated team managing their Drupal content management system, although they lacked front-end developers.
My Role
Deliver the final design in a pattern library format, allowing AIChE's developers to easily access and integrate the flat code.
Make some minor enhancements to their existing design system.
Solutions
To achieve these goals, I utilized Fractal to create a comprehensive pattern library. I included detailed instructions aimed at assisting the developers in effectively extracting the necessary information. Additionally, I conducted several training sessions with the AIChE team, ensuring they were proficient in utilizing the system.
User Testing
Due to the ILI being a new program, we made a strategic decision to conduct a soft launch with user testing prior to the full-scale marketing launch. This approach allowed us to identify any potential gaps or areas for improvement that might have been missed during the project's development phase.
Getting Started
- Collaboration with the AIChE team enabled us to identify five individuals representing different audience types. To incentivize their participation, we offered gift cards as a token of appreciation.
- Ultimately, we successfully recruited four participants, consisting of two mid-career professionals, one graduate student, and one early career individual.
Testing Preparation
To conduct cost-effective user testing, we utilized Zoom for screen sharing, scripted uniform questions for consistency, and informed participants about the 25-minute time commitment through clear email communication.
Together with the AIChE team, we carefully crafted questions that were unbiased and non-leading, aiming to gather genuine responses, such as:
After scanning the ILI landing page, what is the first thing you are inclined to click on?
The goal was to ascertain whether users gravitated towards a particular area of advancement or delved deeper into the Audience section (Learners/Employers/Educators).
Live Testing
- I led each session with the support of a team member who took detailed notes, while two AIChE team members observed.
- A courteous introduction was made, expressing gratitude for their participation and ongoing feedback.
- Throughout the sessions, I closely monitored participants' screen interactions, mouse movements, and click patterns. Encouraging them to vocalize their thoughts in detail provided invaluable insights into their decision-making process.
User Testing Results
The user testing sessions yielded highly positive outcomes. Participants provided valuable feedback, suggesting a few changes that could significantly enhance the user experience.
I compiled a comprehensive report, and shared the findings with the broader AIChE team. This report served as a resource for them to decide which improvements to implement.
Project Results
In crafting the Institute for Learning and Innovation (ILI) for AIChE, my mission was clear: create a platform to serve diverse audiences and highlight AIChE's commitment to advancement in chemical engineering. Despite significant challenges like aligning design systems and crafting intuitive user pathways, our collaborative effort yielded impressive results.
Next Steps
Our success in this collaboration paved the way for an expanded partnership. Shortly after the ILI project, AIChE extended their trust once more, inviting my team to embark on a comprehensive redesign of their Academy—an integral component of their business. This extension highlights the strength of our teamwork and the tangible results achieved through the ILI initiative.
Throughout our engagement, the AIChE team proved to be not only collaborative but also a pleasure to work with. Their commitment to excellence and innovative spirit mirrored my own values and reinforced the success of the ILI initiative.
Amanda's expertise in UX design, from discovery to testing, ensured the successful launch of AIChE's new career and education portal. Amanda is a people person with a keen ability to explain design decisions to stakeholders in a collaborative way and I highly recommend working with her. John Vasko Director of Communications & Content, AIChE
In closing, the Institute for Learning and Innovation stands as a testament to the power of collaboration, design excellence, and user-centric development. It was a privilege to partner with AIChE in bringing their vision to life.
Launch Website