Cottonwood Heights City
Butlerville Days Website Case Study
In collaboration with two other designers, I redesigned a city government website events page to help users connect and be more involved with their community's activities, specifically, the Butlerville
Days festival.
I was involved in the entire process from researching, interviewing users, developing storyboards and user journey frameworks to wireframing, prototyping, visual design, and usability testing.
​
With two graphic designers on the team, we had some conflicting opinions about what the design should look like and where certain features should be placed on the site. In the end, we were able to look back at our research and determine the correct path to follow in order to solve the issues users had with the site.
TIMELINE
Five weeks
MY ROLE
UX Research
UI Design
TOOLS
PROBLEM
Users are experiencing difficulties finding schedules and information when searching cottonwoodheights.utah.gov for community events they might like to attend with their families.
PROPOSED SOLUTION
We believe that redesigning and restructuring the site's navigation will help Cottonwood Heights residents to find events schedules and information faster and easier in order to become more involved in their community.
Meet Pauline
WEBSITE EVALUATION
Like our proto-persona, Pauline, residents of the city of Cottonwood Heights visit cottonwoodheights.utah.gov for a variety of reasons ranging from applying for a business license to finding events to attend or a nearby park where their children and/or dogs can play and relax. One popular event is Cottonwood Heights City's annual event called “Butlerville Days” which is a week-long festival with many events and competitions for residents to participate in.
Cottonwood Heights residents are experiencing difficulties when searching cottonwoodheights.utah.gov for schedules and information for Butlerville Days events they would like to attend with their families.
PAGES VISITED:
-
Cottonwood Heights Home Page
-
Search
-
Events
-
Butlerville Days Event Home Page
-
Schedule of Events
Our Users Said...
Using the current website, users were asked to find the Butlerville Days schedule of events. Their experiences were unsatisfactory.
“I clicked the calendar because it's a community event... I see a whole lot of other things but do not see the event.”
“It just downloaded an 8-page PDF to my phone?”
“I searched Butlerville Days in the search bar on the calendar and what came up was a congratulations to our teachers of the year.”
“Nothing happens when I click on the schedule.”
Heuristic Evaluation
We evaluated the current site for usability in five key areas, and while the navigation gave us a good place to start, all of the other scores showed that we had a lot of work to do.
Breadcrumb navigation is visible on all subpages​
There are several redundant links on each page
Menus and navigation change as you moved through the website
​
Menus are not alphabetized, making it difficult to find pages
Original Sitemap
The original sitemap was organized in a way that confused users and made it difficult for them to find the Butlerville Days event page.
CARD SORT
-
We conducted 4 card sorts: 2 open and 2 closed.
​​
-
We were able to condense the secondary navigation from 8 topics to 3.
-
In the global navigation, we eliminated sections already available in the top navigation.
Iterated Sitemap
Using the data we collected from our card sorts, we were able to create an iterated site map which we used in our prototypes and went on to test with users.
UI DESIGN SYSTEM
Typography
Typography
Typography
We wanted to update this site and give it a more clean, modern feel while keeping the rugged, natural landscape of the area in mind. We chose Montserrat for its clean and contemporary style that brings the website into the future and embodies the young families and up-and-coming businesses in the area.
Iconography
Simple, clean, and elegant icons convey the modernity and playful attitude of the community in general, guiding users to the information they need.
Controls
Carrying the modern icons over into the controls for the site keeps the open and playful style consistent throughout the site and creates interesting open space on each page.
