Roadmap to Excellence
The Allentown School District (ASD) needed a dedicated staff member to manage 24 school websites built on the K–12 focused FinalSite Content Management System. Key priorities included enhancing the user interface and improving how content is presented across all sites. An upcoming major brand overhaul will also require a full redesign of each website and its user experience.
Since the website is hosted on a closed FinalSite, this CMS service is designed to be simple and easy to use for users who are not web designer/developers. Many of the templates are based on old designs that were used in the mid to late 2000's. These templates had been implemented before my arrival. They had mouse-over menu items which made it difficult for visitors with ADA issues to navigate and not institutive. The page layout was very basic and lacked any type of modern design.
The main hurdles were how to make changes to the platform that is meant to be simple to edit. Many areas don't allow for custom pages and content is not written in a way that engages the visitor. A decision needed to be made, keep the simple design to allow multiple editors or customize the pages so that they are engaging and help define content sections and to make it ADA compliant.
We decided that the navigation had to go and for the now until the next redesign, try to modernize the website but keep it as simple as possible. The first thing was to improve the navigation that required a click for the dropdown menu, then look at some simple and effective page layouts that would include some CSS design and animation to help bring attention to the content.
Looking at the original navigation what existed before was a large navigation section. Consisting of a oversized logo with the name repeated causing ADA screen readers to repeat the logo image and name. The navigation had mouseover for dropdown menus, the problem with this type of navigation is that move your mouse to get to the sub menu could touch other menu items causing the submenu to close. The submenu section was very large as well and was open when you visited the page which cause navigation issues when you moused over and the new submenu would appear on top of the existing submenu. It became difficult to know which sub-menu you were looking at. All of this navigation took up 1/3 of the page pushing important information below the webpage fold.
To accommodate the new brand section, a comprehensive overhaul of the Information Architecture was necessary. This involved mapping out new connections, identifying existing and new content, and streamlining brand relationships. Collaborating with the client, we established a consistent naming convention for all products. Below, you'll find the previous Information Architecture followed by the updated version. This restructuring ensures a more defined next step in creating wireframes and refining the consumer journey.
Wireframes were developed using insights from consumer research, providing an understanding of their preferences. Users desired a website section for learning about products and comparing Zebra Pen offerings against competitors. Some sought products by brand or category (e.g., Pens, Markers). All paths lead to an enhanced shopping experience on the purchase page.
Initial wireframes positioned highlighted products at the page's top. Through design iterations and consumer insights, we improved access to products higher up, reducing friction for the "Precision Shopper."
Constructing the website from the wireframe allowed for creative enhancements and emphasized product highlights. Users no longer guess about a brand's offerings. Product brand pages instantly showcase key features with easy exploration of images and videos. A standardized shopping experience, with optional features and "Add To Cart" placed higher, was implemented. Cross-selling and upselling enhance value and boost conversion.
Our research indicated smartphones dominated web traffic, yet consumers often completed orders on desktops. Recognizing this, we ensured both mobile and desktop versions offered a consistent user experience for consumer convenience. Additionally, we incorporated a favorite feature, allowing consumers to resume where they left off in their journey.
After a thorough analysis of the old Zebra Pen website and gathering research data from existing consumers, we identified key pain points. This deeper consumer understanding allowed us to streamline access to essential information. Efforts were made to ensure the mobile site closely resembled its desktop counterpart, enabling a seamless transition between devices. Ongoing development, guided by analytics and heatmaps, ensures an optimal user experience. Additionally, an AI 3D chatbot was introduced for entertainment and to address consumer inquiries about Zebra Pen products (Ask Zen).
