D2 is proud to announce the launch of the new Willamalane Park and Recreation District website! We worked closely with the district to build a modern website that offered substantial leaps forward in usability, accessibility, security, and brand consistency, building in bespoke features like a real-time connection to their activity reservation system.
What the client said
There's not much we can add to the glowing praise we received, so we'll just show it (with permission):
You made it so easy for us to contribute, provide feedback, and work on solutions together. You were so flexible and understanding when our internal timelines were shifting, and you remained focused on the goal. [...] We just got some feedback from someone with dyslexia highlighting how easy it is to use and read, which was absolutely the best thing we could have heard! [...] We have no doubt that we selected the right vendor for our website. I've never found it so easy to work with an agency. We are looking forward to the next steps and continuing this partnership.
The process—the way we interact with the client, maintain accountability, and guide each step of the decision-making process— is the key to a superior result, and not just from a technical sense.
Here's how we did it:
Process-first planning
The team prioritized early stakeholder buy-in to a user-centered process, emphasizing the how of the decision making process rather than delving into specific details immediately. We further established clear success criteria based on values and user needs, allowing us to derive desired features from these overarching goals in an organic way. A small, dedicated group of stakeholders was empowered to make key decisions in that framework.
Embracing an iterative approach, we prioritized building the minimum viable solution that demonstrably improved upon the existing user experience. This not only allowed us to build upon a solid foundation but also ensured flexibility and room for future enhancements as the "unknown unknowns" made themselves obvious.
One of the keys to maximizing efficiency lay in parallel processes. By working on content, design, and system integration in parallel, no one part of the site-building process was delayed by any other.
Keen content consultation
One of the biggest challenges of a full website refresh is often around content and how to organize it. Institutional sites with lots of editors, over time, tend to put content here and there wherever it's convenient at the time. Some information goes out of date or maybe there's no obvious place to file a piece of content so it goes in "misc." It's not the fault of any one individual, but emergent from inflexible system design.
Willamalane's stakeholder group recognized this shortcoming of their incumbent site and how it impacted the ability of visitors to find what they needed easily. We crawled the existing library of content and used analytics data to sort it into semantic categories (among others):
- Information about parks, trails, and facilities (places)
- Information about programs and classes (activities)
- Press releases, reminders, blog posts, updates, and other timely information (articles)
This semantic division with tagged entities gave them the flexibility to break free of their prior, stricter categorization (e.g. "does aquarobics fit under exercise or swimming?"). By setting up content under flexible taxonomies, they can grow and change them as their operational needs evolve over time.
Having performed the crawl as we did, separating each page into a "node" of content to be evaluated, Willamalane's stakeholders could figure out at a glance what could be dropped or what needed further investigation to be rewritten. We also had the benefit of keeping a lossless map between URLs on the old site and eventual URLs on the new site so redirections could be set in bulk—important for SEO.
Atomic design
To maintain accessibility, these colors aren't the only means of indicating what an element does or means, but by defining those early, we avoided the previous categorical trap that the existing site had, where blue meant aquatics, teal meant parks, etc... which caused confusion when there was content that, again, didn't fit neatly into predefined categories.
To keep things lively and add more playful interactivity, subtle dimensionality was proposed with rounded "cards" comprising the main elemental building block.
Direction, color, and texture
In conference with Willamalane's stakeholder team, we narrowed in on a direction that used their bright and varied brand color palette (with modifications for WCAG accessibility) with select colors given a semantic hint:
- Blue: links and actions that take you somewhere or do something
- Purple: interactive choices, menus, or filters
- Teal: wayfinding points and information like titles and call-outs
- Gold: reserved for focused elements
- Red: alerts
Beauty is in the eye of the beholder, right? Yeah, that's true. But by working within the constraints of accessibility, usability, and consistency with the existing brand, some design solutions emerged as obvious.
We usually hew pretty close to the atomic design principles popularized by Brad Frost, and this time was not much different. We took in their brand guidelines and individual artists on our team took a stab at a generalized look-and-feel independent of specific content or layouts or features—just to establish the design values.
Atoms
We designed the building blocks with the principles from the design direction, including units, HTML elements, cards, icons, text styles, form controls, and the like. Interactive states,
Molecules
During level two, we began to have the discussions with the client on how the site's individual features should behave. This also kicked off the development and implementation of the design in code. We used the relatively new support in browsers for container queries, which gave use even more leeway to create responsive components independently of the layouts in which they'd eventually be used.
Organisms
We then composed the "molecules" into complete feature components that could be used directly as Drupal blocks or, for flexible layouts, Drupal "paragraphs." Doing this in conjunction with the feature/operational discussions with the client effectively made this a "two birds, one stone" process.
Templates and pages
Our workshops for templates and pages transitioned to place emphasis on the content and functionality over styling. With the lower design levels created in Drupal, the consistency was guaranteed, so we kept layout and ordering more abstract to prevent distraction. Because we focused a mobile-first user experience, the linear flow forced an organized approach.
The tech stack
We're platform agnostic here at D2, which means that we don't limit ourselves to a single system with which we're familiar—not every tool is right for every job. In this case, we recommended Drupal for a number of reasons.
- Fielded content type system gives flexibility to define and iterate the data model as needed
- Search API allows for modification of search results to integrate external systems—a key requirement for integrating with ActiveNet and other services
- Configuration sync lets user-level changes synchronize among environments
- Composer package management makes distributed development seamless across teams
- Open source foundation and the community behind it offers a wealth of support information
- Feeds system makes automatic import of select content from the incumbent site easy, whether direct or with processing; it's also the means by which ActiveNet data is imported
Handling ActiveNet
Beginning the project, we knew that Willamalane's activities were managed through ActiveNet, that they had an API available, and that it was important to integrate it into the new site to ease the user experience. We did not know the exact ins-and-outs of the API or what the limits were, but were confident that any challenge has a solution and approached it that way.
While the ActiveNet API didn't have the most complete documentation, the biggest challenge was the rate limits imposed that put a hard cap on being able to call for data on-demand to show available enrollment on each of the hundreds of activities. To respond to these limits, we made the architectural decision to replicate the data from ActiveNet on a regular basis, synchronizing changed activities on a half-hourly basis. We created a small program in Go that ran as a systemd process that managed the synchronization of ActiveNet information into Drupal, which was then searchable and queryable on demand.
Moving forward
We're still working with Willamalane to keep the site up-to-date with a monthly cadence of improvements to meet the evolving requirements of the organization.
If your organization—regardless of what kind—is ready to elevate your digital presence, reach out and we can work on a solution together.