<commit_before>---
layout: post
title:  OPTIMIZED GOVERNMENT WEB EXPERIENCE
author: <NAME>
category: 
img: http://mttwhlly.github.io/louie/assets/images/allmap.png
---

<span class="intro__p" markdown="1">Broward Cultural Division's site needed a revitalization after 35+ years & 200+ pages of information added without evaluating the site from a user's standpoint. The site received over 25,000 views per month but had an extremely high bounce rate. This type of an evaluation & redesign had never been attempted before. The project scope involved analyzing, organizing, simplifying & optimizing the very convoluted site and establishing a unifying style guide to enable brand consistency moving forward.</span>

[View the full User Experience document PDF ›](http://mttwhlly.github.io/louie/assets/docs/cdux.pdf)

[View active component library ›](http://broward-arts-component-library.s3-website-us-east-1.amazonaws.com/)

### RESEARCH

#### Heuristic Evaluation   

¶ After speaking with all department leaders (and a number of workers as well) to get a clear picture of the goals of the division, I performed a basic heuristic evaluation of the pages on both desktop & mobile to clarify pain points would need attending to.

<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-heur.png)
</div>

### ORGANIZING & PLANNING   

#### Sitemapping

¶ Due to the sheer size of this site, the sitemapping process was tackled as soon as possible. I broke this task into sections, creating what seemed to me to be viable solutions that I then presented to the department leaders for discussion & feedback. This led to several rounds of revisions and, in most cases, follow-up meetings to verify the maps were correct. As I've mentioned elsewhere, the sitemapping, user flow & wireframing is done using the [AIUX](https://rwd.aiux.co/) technique which if you are at all inclined toward UX design, I highly recommend looking into.

<small>Existing Sitemap:</small>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-sitemap.png)
</div>

<!--
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite1.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite2.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite3.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite4.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite5.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite6.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite7.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite8.png)
</div>
-->

<small>Optimized Sitemap:</small>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-sitemap2.png)
</div>
<!--
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite1.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite2.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite3.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite4.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite5.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite6.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite7.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite8.png)
</div>
-->

#### User Flows     

¶ With the sitemaps in place, I held meetings with each department head & other members of their teams to decide upon calls to action & desired end goals for their section of the site. I brought drafts of the original user flow diagrams & proposed diagrams I had created with the caveat that they were the experts & this was my attempt based on limited research to get the ball rolling. The teams appreciated this & by the end of each meeting, we were able to come up with concrete steps they wished users to take in their section. My role in the discussions was to advocate for the user while deciding upon a flow that would meet each departments goals. 

<small>User flow for Grants & Funding Department:</small>

<div class="column green" markdown="1">
![Grants User Flow](http://mttwhlly.github.io/louie/assets/images/grants-flow.png)
</div>

#### Market Research

¶ I heavily researched what arts councils/commissions/divisions/agencies throughout the United States & the world were doing with their online presence. This led to finding consistent patterns we wanted to emulate, elements we could implement & improve upon & others that were exceptional that we wished to incorporate as is. The research findings were presented to stakeholders as well as conclusions on possible directions. The research was met with a positive response & decisions were made to proceed with many of the proposed initiatives.

¶ One arts council site that was particularly inspirational was [Arts Council Oklahoma City](https://www.artscouncilokc.com/). They were one of few councils that had embraced the web as a tool for user engagement. Following their lead helped us form some goals & develope strategies that we hoped would improve the experience our users had when they visited our redesigned site.

#### Wireframing

¶ Due to this site being a subsite of the local government, there are some serious constraints in place. I couldn't just "have at it" creatively. The site is built on the Sharepoint platform & a header, footer & page wrapper were predefined & outside of my control. Everything within the body of the page was HTML-based & could be styled. I wireframed the responsive site that was to be launched a year later to give the department I was working with an idea of what we could do. Having done that sold them on the case for a living style guide to ensure brand consistency & the ability to update styles at a sitewide level rather than editing the pages individually.

<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-mobile.png)
</div>
<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-tablet.png)
</div>
<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-desktop.png)
</div>

#### Web Component Style Guide 

¶ With information architecture & high-level UX plans in place, I moved on to create a living style guide. I wanted one that would have examples along with actual HTML & CSS code snippets for easy use. After researching & testing many open source options, I came across [Chime CMS](https://github.com/codeforamerica/chime), which had all the features I was looking for. It is a Jekyll-based pattern guide available on [Github]() & after some getting used to the established development environment, I was able to get all the styles into an easy-to-use site for future maintainers of the site to copy and paste code from as they see fit.

[View active component library ›](http://broward-arts-component-library.s3-website-us-east-1.amazonaws.com/)

<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/component-library.png)
</div>

¶ If you are interested in creating a style guide for yourself, some other notable options are [Pattern Lab](http://patternlab.io) & [Huge](https://hugeinc.github.io/styleguide/)'s style guide. I personally opted for Chime because it runs on Jekyll which I am more comfortable with than Pattern Labs which can run on PHP or Huge's which runs on NodeJS & Harp. 

¶ An important side note I'd like to make is that a lot of the work I was able to do on this project was due to the excellent documentation [18F](https://18f.gsa.gov/) has published & open-sourced on their work for the [U.S. Web Design Standards](https://18f.gsa.gov/2015/09/28/web-design-standards/). If you happen to be working on a government-related web project, I cannont recommend exploring their resources. They know what they are doing & you can learn a lot.

#### RELATED PROJECTS

##### Logo Redesign

<div class="column green" markdown="1">
![Broward Arts Logo](http://mttwhlly.github.io/louie/assets/images/arts-logo2.png)
</div>
<div class="column green" markdown="1">
![Broward Arts Logo](http://mttwhlly.github.io/louie/assets/images/arts-logo.png)
</div>

##### Custom Typeface<commit_msg>Fixed typo<commit_after>---
layout: post
title:  OPTIMIZED GOVERNMENT WEB EXPERIENCE
author: <NAME>
category: 
img: http://mttwhlly.github.io/louie/assets/images/allmap.png
---

<span class="intro__p" markdown="1">Broward Cultural Division's site needed a revitalization after 35+ years & 200+ pages of information added without evaluating the site from a user's standpoint. The site received over 25,000 views per month but had an extremely high bounce rate. This type of an evaluation & redesign had never been attempted before. The project scope involved analyzing, organizing, simplifying & optimizing the very convoluted site and establishing a unifying style guide to enable brand consistency moving forward.</span>

[View the full User Experience document PDF ›](http://mttwhlly.github.io/louie/assets/docs/cdux.pdf)

[View active component library ›](http://broward-arts-component-library.s3-website-us-east-1.amazonaws.com/)

### RESEARCH

#### Heuristic Evaluation   

¶ After speaking with all department leaders (and a number of workers as well) to get a clear picture of the goals of the division, I performed a basic heuristic evaluation of the pages on both desktop & mobile to clarify pain points would need attending to.

<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-heur.png)
</div>

### ORGANIZING & PLANNING   

#### Sitemapping

¶ Due to the sheer size of this site, the sitemapping process was tackled as soon as possible. I broke this task into sections, creating what seemed to me to be viable solutions that I then presented to the department leaders for discussion & feedback. This led to several rounds of revisions and, in most cases, follow-up meetings to verify the maps were correct. As I've mentioned elsewhere, the sitemapping, user flow & wireframing is done using the [AIUX](https://rwd.aiux.co/) technique which if you are at all inclined toward UX design, I highly recommend looking into.

<small>Existing Sitemap:</small>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-sitemap.png)
</div>

<!--
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite1.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite2.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite3.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite4.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite5.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite6.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite7.png)
</div>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/oldsite8.png)
</div>
-->

<small>Optimized Sitemap:</small>
<div class="column green" markdown="1">
![Heuristic Eval](http://mttwhlly.github.io/louie/assets/images/cd-sitemap2.png)
</div>
<!--
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite1.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite2.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite3.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite4.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite5.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite6.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite7.png)
</div>
<div class="column green" markdown="1">
![Revised Sitemap](http://mttwhlly.github.io/louie/assets/images/newsite8.png)
</div>
-->

#### User Flows     

¶ With the sitemaps in place, I held meetings with each department head & other members of their teams to decide upon calls to action & desired end goals for their section of the site. I brought drafts of the original user flow diagrams & proposed diagrams I had created with the caveat that they were the experts & this was my attempt based on limited research to get the ball rolling. The teams appreciated this & by the end of each meeting, we were able to come up with concrete steps they wished users to take in their section. My role in the discussions was to advocate for the user while deciding upon a flow that would meet each departments goals. 

<small>User flow for Grants & Funding Department:</small>

<div class="column green" markdown="1">
![Grants User Flow](http://mttwhlly.github.io/louie/assets/images/grants-flow.png)
</div>

#### Market Research

¶ I heavily researched what arts councils/commissions/divisions/agencies throughout the United States & the world were doing with their online presence. This led to finding consistent patterns we wanted to emulate, elements we could implement & improve upon & others that were exceptional that we wished to incorporate as is. The research findings were presented to stakeholders as well as conclusions on possible directions. The research was met with a positive response & decisions were made to proceed with many of the proposed initiatives.

¶ One arts council site that was particularly inspirational was [Arts Council Oklahoma City](https://www.artscouncilokc.com/). They were one of few councils that had embraced the web as a tool for user engagement. Following their lead helped us form some goals & develope strategies that we hoped would improve the experience our users had when they visited our redesigned site.

#### Wireframing

¶ Due to this site being a subsite of the local government, there are some serious constraints in place. I couldn't just "have at it" creatively. The site is built on the Sharepoint platform & a header, footer & page wrapper were predefined & outside of my control. Everything within the body of the page was HTML-based & could be styled. I wireframed the responsive site that was to be launched a year later to give the department I was working with an idea of what we could do. Having done that sold them on the case for a living style guide to ensure brand consistency & the ability to update styles at a sitewide level rather than editing the pages individually.

<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-mobile.png)
</div>
<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-tablet.png)
</div>
<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/wire-desktop.png)
</div>

#### Web Component Style Guide 

¶ With information architecture & high-level UX plans in place, I moved on to create a living style guide. I wanted one that would have examples along with actual HTML & CSS code snippets for easy use. After researching & testing many open source options, I came across [Chime CMS](https://github.com/codeforamerica/chime), which had all the features I was looking for. It is a Jekyll-based pattern guide available on [Github]() & after some getting used to the established development environment, I was able to get all the styles into an easy-to-use site for future maintainers of the site to copy and paste code from as they see fit.

[View active component library ›](http://broward-arts-component-library.s3-website-us-east-1.amazonaws.com/)

<div class="column green" markdown="1">
![Component Library](http://mttwhlly.github.io/louie/assets/images/component-library.png)
</div>

¶ If you are interested in creating a style guide for yourself, some other notable options are [Pattern Lab](http://patternlab.io) & [Huge](https://hugeinc.github.io/styleguide/)'s style guide. I personally opted for Chime because it runs on Jekyll which I am more comfortable with than Pattern Labs which can run on PHP or Huge's which runs on NodeJS & Harp. 

¶ An important side note I'd like to make is that a lot of the work I was able to do on this project was due to the excellent documentation [18F](https://18f.gsa.gov/) has published & open-sourced on their work for the [U.S. Web Design Standards](https://18f.gsa.gov/2015/09/28/web-design-standards/). If you happen to be working on a government-related web project, I cannot recommend exploring their resources. They know what they are doing & you can learn a lot.

#### RELATED PROJECTS

##### Logo Redesign

<div class="column green" markdown="1">
![Broward Arts Logo](http://mttwhlly.github.io/louie/assets/images/arts-logo2.png)
</div>
<div class="column green" markdown="1">
![Broward Arts Logo](http://mttwhlly.github.io/louie/assets/images/arts-logo.png)
</div>

##### Custom Typeface
{'fraction_non_alphanumeric': 0.1131872852233677, 'fraction_numerical': 0.0078393470790378, 'mean_word_length': 4.920216147488874, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 129, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4901219', 'n_tokens_mistral': 5665, 'n_tokens_neox': 5499, 'n_words': 2115}