Back
Expertise Overview
An overwhelming amount of information that was not well organized made it hard for site visitors to find what they were looking for.
It was built upon an old, outdated, PHP framework and was giving them troubles. We helped them make the updates they needed, but it was like putting a bandaid on a gushing wound – bigger changes were needed.
So when they were ready to move forward with a complete website redesign and redevelopment, we were there to help them out.
We knew there was a lot of work to do, as their current site was not only a mess of code, but also an eyesore to look at. To kick off our discovery process, we started with extensive stakeholder interviews, talking to the many involved parties and departments within the LAPD to learn what the biggest needs and priorities of the redesign should be.
In addition, we conducted an extensive content and analytics audit to take complete stock of the content that was currently on the site, and to see what content was getting the most traffic and engagement.
Jumping in deeper, we did a thorough competitive audit to see what other law enforcement agencies were doing on their websites and to take stock of what was and wasn’t working for them.
The biggest complaint we unearthed about the site (besides the outdated design) was that there was tons helpful of information on the site, but a lack of organization, proper hierarchy, and visual interest left it feeling cluttered and hard to navigate. Unless visitors knew where they were going, it was hard for them to find what they were looking for.
From what we learned from the analytics audit, we could see that the majority of traffic coming to the site was from mobile devices, and so we knew our strategy needed to prioritize views from smaller screens.
We started our strategy by laying out the website architecture. Since being able to find information was one of the key tripping points for website visitors, focusing on this first made sense. Creating a sitemap that organized the content areas on the site in a way that would be intuitive for visitors to navigate started everything off with a solid foundation.
Once the site structure was set, we went through a rapid prototyping phase where we created wireframes for the key pages on the site, and created roughly 30 custom design templates for the site for pages that required unique design patterns. However, there are hundreds of pages on the site. As part of our approach, we planned out a custom page builder that would allow the LAPD to create these hundreds of pages that didn’t require a unique template using “building blocks”. During the planning phase, we mapped out 20 different content and design patterns for the page builder to be able to accommodate the various types of content that would live on these pages.
The LAPD had a blue color palette already in place on their old site, but it felt heavy, dark, and dingy. We wanted to bring some fresh energy to the design of the site, and so we introduced a brighter, more energetic blue paired with a contrasting reddish orange accent color against a bright, white background.
We selected imagery to use across the site that evoked a cinematic feel (to give a nod to the movie industry influence on LA) and stylized half of the images on the site to have blue tint for a sleek, futuristic feel. We kept the dark blue color to leave a hint of the familiar, but dialed back the usage to keep the overall feel light and fresh. The typography we chose for the site leveraged a font family specifically designed for use by public agencies. It is an easy-to-read, user friendly san serif font. For optimal usability, we used larger paragraph and title sizing to accommodate an audience with a wide range of visual abilities.
Once the designs were locked in place, it was time to write some code. Our developers selected to build our custom implementation on top of the WordPress CMS. The user friendly content management system (CMS) would ensure the many parties involved in keeping the LAPD website up-to-date with content would be able to quickly and easily make updates.
The programming for our custom page builder needed to be created in a way that allowed for flexibility for the LAPD admin to add as much or as little content to the pre-defined “building blocks” as needed. The front-end and back-end code also needed to be carefully synced to ensure the visual design didn’t suffer with differing amounts of content. This delicate balance was a challenge that our development team met head-on, to turn around a powerful, flexible, easy-to-use custom page builder.
We also had to make sure the site responded well to all device sizes and browsers so everyone coming to the site could quickly and easily access the information they’re looking for.
In tandem with our thorough testing, it was also time to populate the site with content. There were hundreds of pages of content that needed to be migrated from the old site to the new site, which was a massive task. Once that was complete, we ran our final QC check, and the LAPD opened the site up for a private internal beta launch.
Then it was finally time for the moment we had all been working towards – the launch! After months of hard work and careful planning, we were excited to get the new and improved website into the hands of the public. A thorough launch plan made sure we had everything lined up and ready to go, and we pushed the site live.
Keep an eye out for awesome web content heading straight for your inbox!