overview

City of Pine Island, Minnesota website redesign

The City of Pine Island website serves both residents and visitors alike with a wealth of information. However, due to is complex navigation menus and confusing organization system, it's difficult for users to complete even simple tasks.
Heavily focused on navigation and information architecture, this redesign streamlines the experience for all users.
For this case study, I collaborated with a research partner before continuing on individually.

CLIENT

City of Pine Island, MN - Self-Initiated

MY ROLE

Research, User Testing, Information Architecture, Design System, Responsive Prototype

TOOLS

Figma, Figjam, Invision, Google Forms

DISCOVER

User Testing

objective
Understand how the user interacts with the existing website and identify any pain points and usability issues. My role was to conduct user testing via Zoom.
User test results, ranging from 20-80% success rate.
User testing success metrics range from 20-80%
INSIGHTS
Overall, users reported feeling frustrated and confused. They hunted through navigation menus, often unsure where to look.
"I feel like it should be here."
"Am I missing something?"
"I don't have any idea where to go."
tasks
Users were given four simple tasks:
  • Find information about the farmer's market
  • Find information about Channel 7
  • Find information about Pine Island groups
  • Find information about the public library
Screenshot from a user test via Zoom.
Screenshot from a user test via Zoom.

Affinity mapping - Making sense of it all

The user tests yielded considerable data. I collaborated with my research partner to group the comments and responses into website categories. Calculating a frequency of response helped to determine which issues are the most dire. Navigation was found to be the largest issue, followed by the calendar.
Card sorting exercise that groups user testing responses into like categories

What is causing this confusion?

Putting myself in the user's shoes and walking through the website helped clarify the issues voiced during the tests. Performing a heuristic evaluation with annotations was a valuable exercise to see exactly isn't working.
A screenshot of pineislandmn.com with redlining annotations
1. Navigation bar is not intuitive
Users scan all categories to find what they're searching for, often choosing the wrong menu
2. Lacking visual hierarchy
Users didn't see or notice the announcements, which contained information to complete the assigned task
3. Complex dropdown menus
Users got lost in the complex menus, increasing congitive load
4. Inconsistent link destinations
Some links open in a new tab. Users were confused how to get back to the home page
5. Inconsistent icon usage
Icons repeated for different tasks, increasing cognitive load
6. Unpredictable in-text hyperlinks
Copy does not give context for text links or provide adequate error prevention

Test Analysis Matrix

Using a matrix helped determine which design solutions to focus on.
Test analysis matrix shows four quadrants: most important for Pine Island, Most important for the user, Least important for the user, Least important for Pine Island

Card sorting

The largest pain point for users during testing was organization of the website and the navigation bar. In order to reorganize the website's vast content, I collaborated with my research partner to perform a card sorting exercise. This proved to be a substantial task, as we discovered many dead-end links, double locations, and other eccentricities of discorganization.
Card sorting exercise shows post it notes of every page from the Pine Island Website, categorized into potential navigation bar menus

Sketches to Wireframes

I sketched out my design solutions in InVision before refining to mid-fidelity wireframes in Figma. Before performing user testing, I also refined my wireframes using A/B testing.
Rough sketch for pine island redesignFigma wireframe for Pine Island website redesignSecond iteration of Figma wireframe for Pine Island website redesign. This one shows the dropdown menu and new placement of the search bar
Rough sketch in InVision
Option A in A/B testing
Wireframe design used for user testing. Users in A/B tests preferred search bar in upper right.

Wireframes User Testing

In order to validate my design solutions, I performed user testing. I gave the subjects the same four tasks to perform.
objective
Validate design choices and identify any issues
insights
Success rates improved dramatically on the same tasks. Users appreciated the alphabetization within the dropdown menus.
Still, I saw some room for improvement. Some users tried to find farmer's market information in Parks and Recreation instead of Events. It became clear that users expect to find some information in multiple areas so I revised the wireframes to reflect these changes.
User test results, ranging from 20-80% success rate.
User testing success metrics range from 75-100%
"There it is!"
"I got it. What else?"

High Fidelity Prototype

To showcase the design solutions of information architecture and organization, the focus of this prototype is the home page and navigation bar menus. The City Government page has been built, as an example.

Please view the prototype in full screen for best results.

High Fidelity User Testing

I performed one last round of user tests, this time on the high fidelity prototype.
objective
Validate design choices and identify any issues
insights
Success rates improved only slightly from the last round, but users were able to complete Task 1 (Find Farmer's Market Information) with less clicks.
Users were also able to recognize where information should be without having to recall where they last saw it. Overall, users expressed much less frustration and seemed to experience a far less cognitive load than before the redesign.
User test results, ranging from 80-100%, compared to previous tests.
User testing success metrics range from 80-100%
"Well, that was easy."
Link to home page
WorkAboutResumeConnect
Copyright © 2023 Sarah Brooking