The need
Getting into the Zone
Zones of Regulation, a 15-year leader in Social Emotional Learning (SEL), trains educators, clinicians, and parents to help students manage and regulate their emotions effectively. Their old website had become bloated and difficult to navigate due to an outdated design and lack of modern features, limiting their connection with their audience. The task was to streamline the site's information for quick understanding while visually aligning the website with Zones' newly refreshed branding and logo. The objective was clear: to craft a marketing website that succinctly communicates Zones of Regulation's essence with a condensed, visually captivating approach that seamlessly integrates the brand's new identity.
The solution
The project began with stakeholder workshops to understand their needs and expectations, along with an in-depth audit of the current site. Distinct end-user needs were identified, ranging from gaining insights into the program and methodology to obtaining tools for improving program implementation, purchasing educational resources, and signing up for training sessions. A competitor analysis of SEL-focused websites was conducted to identify best practices and opportunities for differentiation.
User Experience (UX) Design:
A simplified and well-structured site outline was created with user personas in mind. The content for each new page was defined, providing a clear and concise user interface (UI) and navigation for the website. Wireframes and prototypes were developed to visualize the new website structure, ensuring a seamless and intuitive user journey.
Main Website Navigation:
The tiered navigation bar features a top section with the logo, store icon, and contact links. The bottom section includes dropdown links to various website pages. As users scroll, the menu condenses into a single bar that remains fixed at the top, ensuring easy access to all key areas of the site.
Main Website Navigation:
The tiered navigation bar features a top row containing the logo and icon links for the companies store and contact. The bottom section includes dropdown links to various website pages. As users scroll, the menu condenses into a single bar that remains fixed at the top, ensuring easy access to all key areas of the site.
Training Schedule:
An easy-to-navigate training schedule was developed with a filter function, allowing users to sort by different types of SEL classes and preferred dates to find the sessions that best fit their needs.
Session Rates:
Instead of downloading a PDF rate card, a calculator was proposed that instantaneously shows the total cost for a training session. Users simply input the number of attendees, and the total amount is automatically generated, ensuring a transparent and efficient booking process.
Streamlined Email Form Solution:
An innovative approach was created to consolidate multiple email forms into a single, dynamic form. Users simply select their need, and a customized email form appears, ensuring the message reaches the appropriate individual efficiently.
Content Strategy:
The content strategy involved restructuring the information architecture for better accessibility to program information and resources. Engaging elements such as videos and infographics were integrated to make the content more dynamic and appealing.
Implementation:
The website redesign focused on responsive design to ensure the site was optimized for mobile devices, recognizing the importance of accessibility. Accessibility standards were adhered to, ensuring an inclusive user experience.
The results
The revitalized Zones of Regulation website resulted in increased user engagement, with longer average session durations and more page views. The new website is visually appealing, user-friendly, and informative, designed to meet the needs of diverse audiences effectively. Additionally, it ensures improved visibility and discoverability through search engines.
ClientZones of RegulationsRoleArt Director
UI UX DesignerServicesArt Direction
Website DesignDeliverablesUI Style Guide
WebsiteSoftware UsedAdobe Photoshop
Adobe Illustrator
