Rochester Website Redesign

Rochester Website Redesign

Rochester Website Redesign

The city's website is outdated and difficult to navigate. This project aims to improve accessibility and simplify user flow.

The city's website is outdated and difficult to navigate. This project aims to improve accessibility and simplify user flow.

The city's website is outdated and difficult to navigate. This project aims to improve accessibility and simplify user flow.

ROLE

ROLE

UX Design, UI Design, (Individual Project)

UX Design, UI Design, (Individual Project)

TIMELINE

TIMELINE

September - October 2023

January - March

2024

January - March 2024


SKILLS

SKILLS

User Research, UX/UI Design, Prototyping

User Research, UX/UI Design, Prototyping

User Research, UX/UI Design, Prototyping


TOOLS

TOOLS

FIGMA


FIGMA


FIGMA



Project Overview

Project Overview

The City of Rochester’s website, now over 11 years old, suffers from an outdated design and poor user experience, making navigation difficult for residents, visitors, business owners, city employees, and students. The overwhelming content and inconsistent layout hinder accessibility and usability.

The City of Rochester’s website, now over 11 years old, suffers from an outdated design and poor user experience, making navigation difficult for residents, visitors, business owners, city employees, and students. The overwhelming content and inconsistent layout hinder accessibility and usability.

The City of Rochester’s website, now over 11 years old, suffers from an outdated design and poor user experience, making navigation difficult for residents, visitors, business owners, city employees, and students. The overwhelming content and inconsistent layout hinder accessibility and usability.

THE OVERARCHING GOAL

THE OVERARCHING GOAL

THE OVERARCHING GOAL

Redesign the website to create a clear, consistent, and user-friendly experience by improving navigation, streamlining content, and enhancing interactive elements. A structured layout and intuitive user flow will ensure the community can easily access essential city information.


Redesign the website to create a clear, consistent, and user-friendly experience by improving navigation, streamlining content, and enhancing interactive elements. A structured layout and intuitive user flow will ensure the community can easily access essential city information.


Redesign the website to create a clear, consistent, and user-friendly experience by improving navigation, streamlining content, and enhancing interactive elements. A structured layout and intuitive user flow will ensure the community can easily access essential city information.


1

1

1

Definition of Problems

Definition of Problems

Definition of Problems

TEXT HEAVY

TEXT HEAVY

TEXT HEAVY

The website's images are too small, and the dense text can feel overwhelming. A narrower text column with more padding around larger images would improve readability.

The website's images are too small, and the dense text can feel overwhelming. A narrower text column with more padding around larger images would improve readability.

The website's images are too small, and the dense text can feel overwhelming. A narrower text column with more padding around larger images would improve readability.

POOR USE OF SPACE

POOR USE OF SPACE

POOR USE OF SPACE

The navigation bar is small and cramped, while empty space could be used more strategically. The "May We Suggest" section is distracting from the main content.

The navigation bar is small and cramped, while empty space could be used more strategically. The "May We Suggest" section is distracting from the main content.

The navigation bar is small and cramped, while empty space could be used more strategically. The "May We Suggest" section is distracting from the main content.

INCONSISTENT STRUCTURE

INCONSISTENT

STRUCTURE

INCONSISTENT STRUCTURE

Inconsistent layouts and missing headers make navigation difficult. Breadcrumbs or clear titles would improve usability.

Inconsistent layouts and missing headers make navigation difficult. Breadcrumbs or clear titles would improve usability.

Inconsistent layouts and missing headers make navigation difficult. Breadcrumbs or clear titles would improve usability.

2

2

2

Comparative Analysis

Comparative Analysis

Comparative Analysis

CITY OF CHICAGO

CITY OF CHICAGO

Chicago’s website has clear navigation and a clean layout. Adding a hover-triggered menu would improve usability.

Chicago’s website has clear navigation and a clean layout. Adding a hover-triggered menu would improve usability.

NATIONAL PARKS

NATIONAL PARKS

The card system is well-designed, with hover expansion, scroll arrows, and a seamless overlay.


The card system is well-designed, with hover expansion, scroll arrows, and a seamless overlay.


CIA

CIA

The micro-interactions add personality while showcasing a thoughtful design.


The micro-interactions add personality while showcasing a thoughtful design.


LULULEMON

LULULEMON

Lululemon’s clear hover navigation is inspiring, with drop downs and a highlight bar for easy interaction.

Lululemon’s clear hover navigation is inspiring, with drop downs and a highlight bar for easy interaction.

3

3

3

Visual Designs

Visual Designs

Visual Designs

Design Goals

Design Goals

STREAMLINE CONTENT

Reduce excess information to create a cleaner, more user-friendly experience.


Reduce excess information to create a cleaner, more user-friendly experience.


ENSURE CONSISTENCY

Establish a uniform layout and navigation structure for a smoother user flow.


Establish a uniform layout and navigation structure for a smoother user flow.


ENHANCE NAVIGATION

Improve clarity with clear page titles, breadcrumbs, and a more effective navigation system.

Improve clarity with clear page titles, breadcrumbs, and a more effective navigation system.

SKETCHES

SKETCHES

LO - FI WIREFRAMES

LO - FI WIREFRAMES

HI - FI WIREFRAMES

HI - FI WIREFRAMES

VISUAL STYLE

VISUAL STYLE

4

4

4

Final Designs

Final Designs

Final Designs

TAKEAWAYS

I used a playful geometric aesthetic to capture Rochester’s energy while ensuring readability. Clear hierarchy, consistency, and a cohesive layout made the site more organized and user-friendly.


NEXT STEPS

I’ll flesh out the remaining site sections to ensure a cohesive experience. Designing for mobile will be a priority to enhance usability across devices.