Problem
Rochester, a city filled with innovation and culture, has a website (cityofrochester.gov) that over 200,000 citizens rely on for resources, updates, and much more. However, their city website needs major change in order to exceed modern standards.
Solution
The city council currently has an RFP out for the site’s redesign. Through my own research, analysis and rounds of iterations, I have created a prototype for a more engaging, prideful, and easier-to-use version of the website.
Before
Home page
Services page
Volunteer page
After
Research
Through preliminary analysis, my user survey with Rochesterians & my talk with Barbara Pierce (Director of Communications for ROC) and Matt Driffill (Digital Content Manager), here are some of the pain points I discovered with www.cityofrochester.gov.
Lack of Hierarchy
Navigation bar has too many options, some of which are not necessary.
Home page cards equally display both important, time-sensitive information and less important information, which throws users off.
Overall prioritization of information & redundancies needs to be reevaluated.
Visually outdated
The colors look washed and don't mix well.
Cards resemble notepads which reflects an old-timey aesthetic upon Rochester.
Too much type & not enough breathing room, leaving users overwhelmed, making the experience slow & painstaking.
Inconsistent design system
Primary & secondary pages have inconsistent design styles.
Too much text and the lack of visual cues hurt both aesthetically & functionally.
No common elements or theme, making the site feel divided.
Fails to represent Rochester’s culture.
Inefficient user flows
(Ex: finding volunteer opportunities)
No central 'volunteer' page; each volunteer option has it's own individual page with a unique layout, making viewing options a challenge.
Poor design causes lack of trust which discourages users from volunteering.
Goals
1.
Simplify the user's search for information.
2.
Make it scream ‘ROCHESTER!’
3.
Create a template for 1st & 2nd page levels.
4.
Give more space to the user interface.
Comparative Analysis
Distinct visual style that emulates a powerful city.
Spatial design, interactive components, & images reduce clutter while still effectively getting the message across.
Great feature: secondary pages have a contact section.
Each nav page has filter options to help users quickly find what they're looking for.
Nav shows options via a dropdown instead of just taking users to a new page.
Great feature: ‘latest news + events’ section shows 4 cards with clear hierarchy, managing space excellently.
High quality photos show off Nantucket tastefully with a uniform tone & style, creating a beachy atmosphere.
Intuitive accessibility features.
Great feature: a residents vs. visitors toggled quick links section.
Creation
To simplify the user's search for information and create a template for 1st and 2nd page levels, I chose a user flow from www.cityofrohester.gov to recreate. This is an example of a college student looking for more volunteer opportunities around Rochester to log volunteer hours.
Current 'Volunteer' Flow (a mess)
There is no main volunteer page for all available volunteer opportunities. Rather, there are individual pages for each volunteer opportunity, meaning a user has to click them one at a time to learn more about them. Several volunteer opportunity links no longer work & several others aren't even volunteer opportunities.
Updated 'Volunteer' Flow
located under the ‘services’ tab just as before, except this time there is a main Volunteer page where all volunteer opportunities are showcased. Once a user finds an option they like, they click the ‘volunteer’ button and they’ll be directed to that program’s signup page.
Sketches
Home page
Full bleed above the fold image.
Anchor links bar.
News section with the ability to view multiple headlines at once conveniently.
Newsletter subscription.
Local events section with date, time & location.
Mayor Malik D. Evans section which keeps users up to date with local government.
‘Flower City Highlights’- fun facts.
Quick links section for both residents & visitors.
View Rochester’s photo page.
Wireframes
As I iterated my wireframes, I went through many new features and ways of formatting. This includes removing my side nav, different formats for 'featured assistance', 'news', 'photo gallery', and my iterations in card structure.
To help make the redesign feel more 'ROCHESTER,' I created 2 very different mood boards that encapsulate two different tones of the city. From these moodboards, I created two Above the Folds based on that style.
Purple & gold, sunny summer vibe. Rochester Lilac Festival. Light, decorative & illustrative
Tall, rectangular & angular. Tertiary colors used as highlights on a neutral background.
Final Design
Style Guide
Solid-colored, sharp-edged, vertically stretched features that portray innovation and urban-ness. The blue is the official color of Rochester and its pairing with the dark blue and the bold serif font “Georgia” makes for an official, secure, & trustworthy tone. The highlight red grabs viewer’s attention towards the most important parts of the site. This unique color combination can become a recognizable attribute of Rochester culture.
Site Redesign
Home page
Removed the side nav to further simplify the organization of the page hierarchy.
Moved the “Flower City Highlights” section to above the fold to minimize scrolling and add dynamism to the hero page.
Condensed the ‘For You’ & ‘Spotlight’ sections.
‘Latest news’ section displays multiple cards with clear hierarchy, managing space excellently.
Secondary page (Volunteer)
ATF includes page description with breadcrumbs.
‘Special events’, ‘Opportunities For You’ and ‘All Opportunities’ showcase cards that indicate the volunteer event, date, time, and location in an organized & condensed manner.
A Contact page is featured above the footer for users to message with any inquiries.
Maintains a consistent style with the home page.
Page layout can be used universally for all secondary pages.
