As our creative team at Locus Studios continues to expand, we wanted to redesign our own website. We decided it was time for an upgrade, and that this would be a good opportunity to run through our web design process.

Beginning the Process

To start, we gathered our CEO, sales team and design team to identify the new website’s main audience. Doing so gave us a better understanding of design constraints and allowed for a broader conversation on problems with the current website and our goals for the new website.

We decided from this meeting to launch a client-focused site for our existing and potential clients in law and government. The interests and needs of this audience mainly consists of reviewing specific examples of our past work, in a way that is both efficient and comprehensive.

When scanning the portfolio of our old site, we found there was room for improvement in how projects were organized and labeled. Additionally, the website as a whole did not pass accessibility checks.

Accessibility checks are ran using Adobe Acrobat or other programs to see if a web page is 508 compliant. Section 508 is a set of standards and guidelines that ensure information and communications are accessible to individuals with disabilities. In this case, the light blue we were using as part of our color scheme did not contrast enough with the white background to be easily visible for those with color blindness.

From all of this, we determined two goals: first, to design a portfolio that is compelling and easy to navigate; second was to give the entire website a cohesive feel and structure that creates an intuitive user experience and passes accessibility checks.

Before actually beginning construction of the new site, it was still necessary to analyze our old site a bit further. We looked at the site traffic page by page, studying where our visitors were coming from and to what extent they browsed the site. We found that 47.7% of users dropped off at the landing page, and hardly any users made it past a third or fourth click. From this, we decided that the homepage itself would include a substantial amount of information, including a synopsis of our services, a handful of featured projects and notable clients. We also decided to limit the UX flow of the site to as few pages and clicks as possible to ensure we are not leading potential clients through a digital maze.

Time to Design

Once all of this preliminary work was completed, it was time to begin building the site. All of our company’s websites, including LawWeekColorado.com, CircuitMedia.com, CircuitMediaGreen.com and Locus.Agency are designed and maintained in WordPress. Within these sites, we use a variety of themes and builders, and with this new Locus site, we decided to use a WordPress Theme and Visual Page Builder called Divi.

Using Divi, we got to work laying out our site. First, we developed mock-ups of the case studies, which would go in our portfolio. On each page, we listed the “challenge” we faced in each past project followed by the solution we used to tackle that problem. Below this would be photos showing the work from that project. And since the previous light blue did not pass accessibility checks, we switched over to a darker blue accent, paired with a clean white background.

In organizing our services, we settled on six main categories:

  • Graphic Design
  • Brand Identity & Strategy
  • Web Design
  • Animation
  • Video Production
  • Photography

Tightening the Screws

Below our services we included client testimonials followed by our featured work, which when clicked on showcased a few select past projects of ours in great detail. The three projects we chose to feature were Circuit Media Green, Law Week Colorado and iWillandTrust. These projects helped demonstrate the whole spectrum of services we provide – from video to brand strategy to graphic design and photography. Overall, Divi provided us with many front-end options for designing this layout, but for added customization and optimization we did a fair amount of back-end coding as well.

After all the back-end coding was complete, we had a fully functioning website. With the homepage and portfolio finished, all that was left to do was add the finishing touches.

We added an “About” page to include all the members of our team as well as a “Contact” page with all relevant contact information. At the front of the homepage we added a looping video which displays the many services we provide. And finally, we ran accessibility checks, to ensure that the website was 508 compliant. Once all this done, we were confident we had now successfully reached our goal of designing a new site that is intuitive and accessible, with a compelling and detailed portfolio section that is easy to navigate.

At Circuit Media, we take pride in our ability to create engaging, accessible web interfaces that delight the user. Through our experience and technical skills in front and back end WordPress development, we deliver an application that solves our clients’ various needs while providing a positive and intuitive web experience for their users.

We “design with accessibility in mind.” When we start projects that involve both our design and accessibility teams, our web and graphic designers at Locus Studios design with accessibility in mind. They include accessible color contrasts in images and infographics, photos that can easily be updated with alternative text, bookmarks for easy access and total PDF conversion so electronic versions of the product can successfully pass embedded Adobe accessibility checkers.

Interested in our web design services? To learn more, email [email protected] or call (303) 562-1797.