The Toronto Region Conservation Area offers knowledge and resources to help visitors around Toronto (including portions of Peel, York, and Durham area) to contribute to a healthy city region. Simalam Inc. was chosen to redesign and develop a responsive version for their website, implement a robust CMS framework for relocating previous content, and streamline the publishing process across the multiple departments in the organization.
As an interaction designer consultant for Simalam Inc., once again I had the chance to assist the site's planning process by defining and prioritizing tasks and goals (user stories) with stakeholders, developers, the project manager, and the creative director. I was responsible for planning and creating responsive layouts for each content type on the website, making sure every planned feature was accordingly represented and prioritized on the site hierarchy, designing a navigation interface to support the redesigned information architecture, and delivering production-ready assets to senior designers for art direction and style application.
Grid system at tablet, desktop, and large desktop breakpoints
The TRCA website counts with more than 8000 indexed pages across multiple content types:
- General pages
- Specific pages
- Trail maps
- Activity listings
- User dashboard
- News posts
- Image galleries
Templates needed to be flexible enough to accommodate different lengths of content and optimize its legibility, provide just enough layout personalization options to authors while leveraging the CMS publishing features, and of course, being 100% responsive and accessible on desktop and mobile devices.
designed Responsive templates for holding more than 8000 indexed pages on multiple content types
We set up a schedule of design sprints for tackling each content type on the website. The first sprint was dedicated to define the reusable pieces that will be present site-wide like the header, the footer, a sidebar, and defining an scalable grid system to support the design and the development.
less than 768 pX wide (mobile)
Between 768 PX and 992 px wide (tablet)
between 992 px and 1200 PX wide (desktop)
more than 1200 px wide (large desktop)
The whole information architecture was re-considered and organized from a task user-centered approach by our UX expert. My responsibility was to design a 3 tier menu interface for the new architecture that effectively covered the vast of content available on any breakpoint. For this challenge, only top level tasks (Defined by data analytics, stakeholder interviews, and personas workshops) were included on the main navigation, complemented by a sitemap footer to cover the totality of the content. Likewise, search was wisely incorporated both inside and outside the navigation for easy access and improving content findability.
A 3-level menu designed to access and search the vast content available at every breakpoint
Once we had all the starting components defined, we continued to design each content type included on the planning phase by consecutive sprints. This included defining an initial style guide, creating a pattern library to use across the website and simplify assets sharing with the whole team.
A shared pattern and style library kept consistency across the project
The website is completely responsive, making every piece of content available independently of the devices used to access it. This was real challenge for some specific types of content like tables, and widgets.
Lastly, senior designer Christopher R. Taylor created the final style guide for skinning the wireframes. The new redesigned TRCA website will be deployed by phases by the end of 2016 and is still on development. One of the biggest takeaways was the impact our user centered process had on the TRCA content generation and publishing procedures. The new website encourage the organization and formatting of content more catered to the the actual tasks performed by its visitors. These improvements originated changes in the way content is created, categorized and published across the whole organization.