BCPS Web Site Page Re-Designs and Web Development Improvements

March 20, 2015 - 3 minutes read

The Challenge

We were approached by our valued client Broward County Public Schools (BCPS) with the challenge of improving the overall web design on four key pages of their site as well as provide the front-end code (HTML, CSS, and JS files) for the new fully developed pages. The current pages were lacking branding style consistency like typography, color usage, layout, spacing, and style treatment of web elements such as lists, tables, and CTA buttons. This was not a complete web site re-design overhaul. However, our challenge was that we needed the site to be built of the current sites existing CSS framework.

The Process

First and foremost, our team started the web page redesigns by focusing the new Photoshop mock-ups on uniform brand consistency, enhancing usability, and creating a better visual hierarchy for improved readability. These four pages were included as part of the scope: About-BCPS, School-Info page, School-Info Detail page, and School Departments Information Detail page. As part of an earlier scope of work that we created for BCPS entitled “Web and Communications Guidelines,” we had a guide to follow for proper primary color palette values, which included a vibrant blue, green, and orange. Leveraging our new guidelines, we were able to in a balanced and intelligent way, bring the pages to life. Once the new page designs were approved, we hand-coded them into fully functional HTML pages with custom CSS and implementation of a Jquery plug-ins for table row hover effects and a tabs widget.

The Final Results

Take a look at the before and after examples. Typography, layout, spacing, graphic elements (web icons were utilized to make document easier to scan and more interesting to read), and color were improved dramatically.

How can we help you with your agency’s website redesign or creation of brand communication and web guidelines? Email JinJa Birkenbeuel at birkdesign at gmail.com or at info at birkdesign.com for a phone consultation.

About Us Page Web Design Before and After:

Birk.Creative - Web Design and Web Development of BCPS About Us Page

Visit Web Developed Page

 School-Info Page Web Design Before and After:

Birk.Creative - Web Design and Web Development of BCPS School-Info Page

Visit Web Developed Page

School-Info Detail Page Web Design Before and After:

Birk.Creative - Web Design and Web Development of BCPS School-Info Detail Page

Visit Web Developed Page

School Departments Info Detail Page Web Design Before and After:

Birk.Creative - Web Design and Web Development of BCPS School Departments Info Detail Page

Visit Web Developed Page