Working within a team to devise a cohesive restructure and redesign of a large group of websites with multiple branding, multiple stakeholder inputs, and all under one domain.
For the redesign of the Port of Seattle website, which included the SeaTac Airport and Maritime websites, along with several other separately managed departments, I would combine UX /UI solutions and work within web best practices to restructure complex content in order to make it easier for site visitors. I reassured the client of design changes, and provided ways to manage content easily, while keeping design consistent and flexible. Working within a team at CivicConnect, my team and I provided sitemaps, wireframes, mockups, as well as training and technical documentation to the client for in-house support post-launch.
With large, complex websites, and specific requirements, I tracked all the key concepts and ideas of building out the website in a functional specifications document. The client wanted flexibility in creating page layouts, but have a consistent look and feel that would not be broken by allowing content owners free-reign on page designs. With my experience of using the content block module in Drupal 8 for the 511.org project, we worked to specify general functionality across the site, and then separated out the specific functionality of all the various content types and their fields.
I begin website redesign projects with the thorough analysis of the current site. In the document, I highlighted web accessibility issues such as low contrast and missing alternative texts for images, and UX issues such as no breadcrumbs, no active menus, and inconsistency in navigation, design or naming conventions.
The Port of Seattle not only manages the Seattle-Tacoma Airport, but all its sea ports and marinas, and several local parks, and it works with the communities and businesses at each location. The previous site structure was several levels deep with many pages difficult to reach, Through activities such as in-person and online card-sorting and several presentations discussing their options, they agreed on a mostly flat hierarchy.
The site navigation was a mega menu divided into columns of clear groups, with the first column displaying popular call-to-action (CTA) buttons. These CTA buttons also appeared on secondary page sidebars for easy access and a consistent design.
In order to avoid the confusing overlap of content from the previous iteration, and still keep a consistent design while allowing content owners freedom to manage their content, a tagging system was created to organize linked content into specified areas of pages. I created a spreadsheet which organized the tagging rules and detailed descriptions of about 40-50 content types, 80 listings, 94 subcategory pages in 11 templates, and tracked about 50 special cases of content types.
The overall body text was to be rewritten for the new website, so we used the online service, GatherContent, which integrated with the Drupal content management system (CMS).
While I met with the client in-person, I worked with my design team remotely through Slack for communications, Google Drive for documents, and InvisionApp for design reviews.
I worked with our project manager to plan out the best way to utilize wireframes, the design prototypes, and documentation to instruct the client understand how to create pages on the site using the new tagging rules and the content blocks.
The visual design of the website started with 3 different design concepts based on the provided branding. Then we would usually divy up two co-workers to create mockups of the homepage and a single subpage in two different design styles to give the client an idea of what each direction would look like. Eventually a design direction was decided then refined with feedback from the client, but only a few high-fidelity mockups were created, since most of the page designs would be built in an HTML prototype.
Once the major page designs were approved by the client, we built an HTML prototype of the website using PHP includes and the Bootstrap 3 framework. The prototype provided a way to test the responsiveness and accessibility of the site’s design. The front-end code was then passed onto the developers who were building out the site in Drupal. Afterwards, it served as a reference for the QA team to test the actual website, especially if there were on-going iterations in the design.
Using the functionality specifications documentation and the content inventory spreadsheet, I worked with the developers to make sure the Drupal configurations matched the requirements for each of the content types and page category templates.
I set up Google Tag Manager (GTM) to track all the clicks to PDFs, FAQs, accordions, and call-to-action (CTA) buttons to external sites, which Google Analytics wasn't capable of tracking out the box. Setting up these events in GTM allowed the client to make additions and updates as needed without touching the code in Drupal, but also provided them with extra insight on which parts of the website were useful to site visitors.
Having managed all the visual and technical design decisions, I was in the best position to provide assistance to the QA team whenever they had a question about the intended interactivity on the website. Both the developers and the QA team would also provide valuable feedback during design and prototyping iterations that helped to improve the functionality of the website.
