



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.