Brief
The MeetingZone.com website was in need of a complete design overhaul, from UX/UI to the technology stack. The project involved a complete rebuild of the code-base onto a new server, meaning we had better control over the hardware and software running the site.
The site was simplified and aligned with the company’s up-to-date messaging.
Journey
In an effort to streamline the design, I wanted to build a series of lightweight templates that re-used modular elements. These were hand-coded and built into WordPress using Advanced Custom Fields. The result was a flexible design system and a cleaned-up and optimised code-base. The theme also allows for content to be easily edited by website administrators.
I usually use Grunt as a JavaScript Task Runner, but for this project I bundled modules using Webpack. Working with SASS meant each design module could be easily controlled.
Tile grid navigation
Each Cisco Webex Service required navigation. A reusable grid navigation component seemed like a fitting solution. The tile background could animate on hover and change to red when selected.
Search functionality
It was important to build-in search functionality to return pages and posts for users. Displaying the results in a lightweight clean list with URLs displayed was a user-friendly option for showing search results.
Resource centre
It was important to build-in an area to post resources for the site. Using PHP, I could loop through each post and display a summary as a card linking to the resource. Using a CMS like WordPress and building-in custom functionality also means the company’s marketing team can easily update and edit content without always requiring a developer.
Contact page
The contact page lists the company’s addresses alongside interactive maps. The contact form was built as a reusable component that could be dropped onto any page. It was important for the form to post data into a CRM, where the submissions could be processed and vetted.
Technology used
The web pages are built in WordPress using PHP, HTML5 and CSS3. UI design was done in Adobe XD.
