Morgan Best Designs

Rochester Website Redesign

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

Tools: FIGMA

Download Process Dock

ROLE

UX Design, UI Design, (Individual Project)

TIMELINE

September - October 2023

SKILLS

User Research, UX/UI Design, Prototyping

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 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.

Definition of Problems

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.

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.

INCONSISTENT STRUCTURE

INCONSISTENT

STRUCTURE

INCONSISTENT STRUCTURE

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

Comparative Analysis

CITY OF CHICAGO

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

NATIONAL PARKS

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

CIA

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

LULULEMON

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

Visual Designs

DESIGN GOALS

STREAMLINE CONTENT

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.

ENHANCE NAVIGATION

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

USER FLOW

This user flow streamlines access to essential food assistance and health resources by providing clear pathways to food stamps, local food programs, and related services. Designed for ease of use, it ensures that residents can quickly find and apply for support, promoting greater food security and accessibility within the Rochester community.

SKETCHES

I focused on creating a clear and intuitive layout that organizes content logically, ensuring easy navigation and accessibility. My wireframes prioritize efficiency, guiding users through the deli ordering process with minimal friction.

LO - FI WIREFRAMES

These wireframes outline the overall site structure and navigation, ensuring a seamless user experience across key pages, including the Food Justice page. They focus on content organization, user flow, and accessibility, making it easy for visitors to locate resources and navigate the site efficiently before refining visual and interactive details.

HI - FI WIREFRAMES

The high-fidelity wireframes bring the visual design and interactive elements to life, refining typography, color, and layout for a polished user experience. They ensure clear navigation, accessibility, and engaging interactions, making it easier for users to explore resources, including the Food Justice page, with a visually cohesive and intuitive interface.

VISUAL STYLE

Inspired by the Strong Museum of Play, the design uses bold colors and playful geometric shapes to create a fun, engaging experience. This modern approach breaks from the typical government site aesthetic, making navigation feel dynamic and approachable while ensuring clarity and accessibility.

Final Designs

TAKEAWAYS

The redesign demonstrates how playful, user-friendly design can enhance accessibility to essential resources. By using engaging visuals and intuitive navigation, the site transforms the typical government experience into one that feels inviting and community-focused.

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.

BY MORGAN BEST