ATD Search and User Portal

DMI
- React
- Algolia
- GraphQL / Apollo
- Styleguidist
Solution architecture and development
ATD is the leading association within the training & talent development field, generating over $50,000,000 annually in website driven sales, and approximately 300,000 unique visits per month. Members within the ATD Members & customers within the ATD community were becoming increasingly frustrated with the website experience. An organic evolution of ad-hoc IT solutions had created a series of loosely knitted together front and back office services, ultimately resulting in a disjointed and often clunky user experience that required serious attention.
Solution
LittleBox was tasked with reimagining and unifying the customer experience with the goal of delivering tangible value to members and ultimately increasing user retention. Together with DMI, LittleBox worked with multiple business units, with stakeholders across the business, identifying pain points and opportunities that would have the most impact for customers & site members. Business needs were balanced with extensive and controlled user feedback scoring exercises to strike optimal ROI balance in our solution proposals. We prioritized site improvements to navigation, search, member onboarding/profile, and a new new membership portal/hub. Finally we lead the build and implementation, which lead to measurement retention goal upticks in record time.
Approach
Algolia Enterprise search solution
Search was a major issue for customers.
Users had trouble finding the content they needed; search was slow and inconsistent and often delivered stale and irrelevant results. Users often left the platform to use third party search like Google, a major red flag for internal funnelling and customer journey paths.
After thorough user testing and solutioning, including a formal market audit, we partnered with Algolia to create a powerful cross platform instant search solution:
- Dynamic, user tailored search results
- “Search as content” – where dynamic search results were creatively used to power site wide content
- A.I. powered, natural language assisted instant results
- Multiple, unified content sources from across business units, proxied via GraphQL
- Federated and multifaceted UI
- Custom relevancy rankings configuration powered by user data and custom business metrics
We worked hand in hand with senior UI and architecture specialists in developing our custom Algolia implementation.


BPM, technical and solution architecture
ATD’s Web Services and online experiences were spread over different SaaS, third party monoliths and other bespoke systems, each with different portals, technology stacks, and technical standards.
Customers were often abruptly moved from one platform to the next, providing a disjointed experience and resulting in high bounce rates across platform boundaries. SSO was sometimes clunky, and when it did work, the stark UI/UX changes between platform sections still left users with sub-optimal platform confidence.
We designed and implemented a sweeping, business-wide web services aggregation strategy. Leveraging the GraphQL technology at its core, multiple services were collected and transformed into a single, unified frontend.
These tasks included:
- Full ATD micro service audit, mapping and documentation
- Functional Analysis
- Technical Roadmap
- API design
- Service collection and aggregation via GraphQL
Design & build: code component library
We use a modern, tightly controlled approach to design. Rather than creating “flat” page templates in legacy tools, we designed a robust and dynamic modular design library.
Each module was able to be ported directly into code, and then reused by DMI as well as ATDs in-house team throughout their online ecosystem. This library became a working reference and source of truth for further UI work, and for making a readily available component library for further expansion and development of the ATD digital ecosystem.
