Reimagining a professional development
registration platform for educators
Education
Snapshot
Timeline
October 2023 - March 2024
Client
Public sector / Education
Industry
Education
Role
UX Designer
Team
1 Lead UX Designer
1 Solution Owner
3 Software Engineers
2 Quality Engineers
Overview
In October 2023, our team at Slalom Build was tasked with an ambitious undertaking of modernizing an educational service center's professional development event scheduling and registration platform. The goal was to transform the platform to provide a more efficient, intuitive, and highly configurable user and product experience that could result in higher customer retention and increased revenue.
During the 6 month timeline, I worked directly with one other designer, the UX lead, to deliver a "starter pack" MVP of the platform. I focused on delivering the participant side of the platform, while the UX lead focused on the admin side. This included the design of key features such as event browsing and registration, and continuous user research and requirement gathering sessions to fuel the user flows, wireframes, and high-fidelity prototypes of key features such as event browsing, registration, and checkout.
This was a collaborative engagement with the client stakeholders, and our Slalom Build team consisted of software engineers, quality engineers, a solution owner and daily communication.
Understanding the admin and participant problem space
Miro board from an experience mapping session, where we talked with users about the participant experience of using the product to map out key features, flows, and pain points.
A snippet of the pain point synthesis, where I captured all of the pain points documented during workshop sessions to find themes and experiences that need the most attention based on the number of grievances mentioned.
Once we completed these working sessions, we put together a service blueprint to document the full picture of the experience for all users and how it relates back-end systems and tools.
From there, I took on the tasks of mapping out tasks to identify key users and personas, and sorted through the sticky notes and meeting recordings to conduct a pain point analysis. These activities directly contributed to confirming our user problem statements and "North Star Design Principles" with the client prior to wireframing and prototyping in Figma.
Crafting the design system
Since we were modernizing the entire application, our team had the exciting opportunity of introducing a design system to the product and its development process. As we began the project's delivery phase, I was tasked with crafting the design system. Our team was working against a tight timeline, and we proceeded with leveraging MUI and selectively styling certain components.
The design system file was a living document, with new component additions as time went on and more features of the product were explored.
A sneak peak into the design system foundation & components.
Going with the flow
At the start of every sprint, I made user flow diagrams for the stories I had, based on the service diagram blueprint made from discovery sessions and assumptions about different nuances. Then, I validated this flow in requirement sessions with the client, where we further fleshed out happy and unhappy paths.
This part was always exciting, akin to digging for treasure and finding a new gold with each strike. For example, in the Event Details feature flow below, one could think the flow is straightforward: user lands on event details page, reads the description, clicks add to cart. But there were more layers:
Actions and information on the page depended on the type of event (instructor-led, on demand, self-paced, conferences). Then, was the event full or open?
If the event was full, how is the waitlist handled? If the event was open, what kind of account access does the user have?
Can they only register for themselves, or do they have group registration rights? If they register for a group, how do they go about selecting participants to register for?
These are the kinds of questions I asked and then brought back to the team to engineer and design the best solution given time and technical constraints.
A simplified user flow diagram for the Event Details page & its features
Ready, set, design
The very iterative, very fun part! Below is a glimpse into some of the features I transformed.
The Landing Page
Refreshed & modern visual interface with tasteful color and imagery
Streamlined search and browsing experience
Event recommendation section(s) with event cards and their high-level, at-a-glance details
Ability to save events for future reference
Before
After
The Search Page
Retired the table format & replaced it with event cards
Easier filter functions
Before, events that occurred in the past showed up in the search results; we updated this so that only events that haven’t happened yet appear in the search results to avoid confusion, and because the need to search for past events was negligible
Before
After
The Event Details Page
Introduced the card format to strategically section event information using information hierarchy and grouping methods
Since the event description, event logistics, and additional event details sections can vary in length based on event, we incorporated a collapsible card option to make information less overwhelming
Additionally, we implemented different registration flows based on type: for example, for group registrations, users needed an easier way to select who they are registering for.
Before
After
For more information about this project, please reach out to me at emme.enojado@gmail.com.
Let’s stay in touch!
