Town of Drumheller Website Redesign - Concept

Web Design | UX | UI

A new website concept was designed for the Town of Drumheller. The final design was developed after conducting research and user testing (card sort, tree test). The website shows improved usability, organization, hierarchies, and overall design with an updated logo and colour scheme.

Context:

Goal
The purpose of this project was to redesign the Town of Drumheller website to highlight and re-organize their website content in a more user-friendly manner.

Team & Role
Amelie Dufresne, Austin Hauch, Chance Galay – UX Researchers
Amelie Dufresne – UX/UI Designer

Tools
Sketch
InVision

Discovery:

1. Existing Website

2. Discover & Define

• Existing/Current Use of Social Media

• Audience Breakdown

• Project Tasks and Time Estimates

• Brand & Website Audit

• Competitor Analysis

• Existing Sitemap

3. Research & Analysis

Qualitative Research

Card Sort
- 10 participants
- Average of 7 minutes to complete.
- Given 30 topic cards in random order to sort into 7 categories.
- Most cards were sorted into the same categories numerous times .
- Careers, Volunteering, Flood Preparedness, Medical, and FAQ cards show a spread in the sorting.

Tree Testing
- 7 participants
- Average of 3 minutes to complete.
- Showed difficulties navigating to specific interior pages using the existing labels and navigation. Clearer labelling and navigation would help users find the pages they are looking for.
- Showed difficulties finding the correct location to report a suspicious activity, taking a few tries to succeed. Improved information hierarchies and labeling would help users find the right place to report such activities without searching.
- Overall, improving information hierarchies, clearer labeling, and obvious CTAs would improve this website. 

Quantitative Research

Survey
- The majority of our participants were 18 to 35 years old females, hold a degree, and living in Edmonton. They spend between and 5 hours online per day.
- 72% of the participants had previously used their city website for information on:
- Recreation Services
- Attractions & Events
- Transit Services
- Residential Information & Services
- Employment
- First impressions of the website were most commonly: welcoming, unorganized, easy to use.
- The most common responses to the website colours were feelings of boredom, dreariness.
- Suggested missing links for the navigation bar might include:
- Contact
- Pay Tickets
- Careers
- Volunteering
- Events
- Weather
- Local Time
- Most participants found that the links “BCF”, “How to”, “Depts” and “Flood Readiness” were hard to find.
- The majority of participants indicated that alterations to the colours, logo, navigation and header could improve the website. 

4. New Sitemap
The sitemap was reorganized to remove any repetition, and condense similar elements into organized categories. Fewer categories were created and named to be more intuitive for users. The primary navigation now only has five categories: Services, Residents, Visitors, Government and Contact. A secondary navigation was created to include common links and allow users to quickly find information they are looking for if it is pertaining to News, Events, or Paying/Applying for something.

Develop:

1. Styletiles & Low Fidelity Mockups

2. High Fidelity Mockups

Solution

• Improved navigation and information hierarchy.

• Important information is readily available on the homepage.

• Visually more pleasing design.

Below is short walkthrough video showing the redesigned hover states and web pages.