Figma, Adobe Illustrator
UI / UX Design Case Study
The municipal website for Rochester, NY is over eleven years old and is in need of a redesign that will better engage, connect, and inform constituents.
GOALS
My goal is to create a website that is friendly and welcoming to newcomers and long time residents. I want to emphasize what Rochester has to offer.
I want to make a website that is unique, yet stays along the lines within Rochester's identity.
I will do this by:
Increasing and stressing the importance of the search bar more because of the overwhelming amount of information, people want to quickly and find specifically what they need or want at the time.
Establishing a brand that is familiar to the town of Rochester and creating a homepage where a resident can feel pride going to.
Organizing the information in a way that is legible for the average resident, someone who is middle-aged.
My goal will be focused on creating a user flow catered towards those who wish to visit Rochester's nature parks.
Why?
Encourage residents and visitors to explore what Rochester has to offer and appreciate the beautiful weather we have for a few months
To increase attraction to local parks
Inform residents and visitors that there are parks in the city to enjoy
PROBLEMS
First, I need to define the problems by taking a look at the current Rochester website.
There is an overwhelming amount of information shown on the front page - this causes the user to be confused on where to find the information they are looking for
The colors are old fashioned and hard to read - too many colors is too distracting and causes confusion and overwhelm
There is no visual hierarchy: everything is thrown at you all at once
Information is repeated in different categories - this makes it harder to find what you are looking for and difficult to differentiate between categories, leads to more confusionToo many suggestions to other pages are shown when a link is clicked. It confuses and overwhelms the user because there are too many items grabbing attention
The parks are listed in a huge bullet pointed list
This causes the user to not want to use the website because no design thought was given into the layout and functionality of the website
The "May We Suggest" section uses the same font size, color, and weight
What is the user supposed to look at first?
The parks are listed in a huge bullet pointed list
This causes the user to not want to use the website because no design thought was given into the layout and functionality of the website
The "May We Suggest" section uses the same font size, color, and weight
What is the user supposed to look at first?
There is no stylization
No character or uniqueness to this page that tells it is Rochester
It’s not very visual, no spacing or breaks between each topic and block of text
There’s technically no point to this page
This gives me the same information as Google would, but in a more confusing manner
USER RESEARCH
Then, I tested real users to figure out the core problems of the website.
I interviewed a current Rochester resident looking for a job. At first look, he was impressed with the way the content was straightforward and the way all the content was there easy to find. He explained that it was a good thing all the information way laid out like that on the front page because old people have a hard time figuring out what a hamburger is or know that when you click something it expands.
Things I noticed when he went through the website:
He ended up using the search bar at the top because there was a lot of content on the front page to go through
He said the colors looked fun and it looked generally not bad for a government website compared to others he had seen
Job posting at first caught his eye, but when he clicked on it the first option that comes up is a counselor or teacher in which he doesn’t have the credentials for and is not looking for those type of jobs – doesn’t seem too marketing
He really didn’t go into it having high expectations
I noticed he said everything looked easy to look at first, but continued to have a hard time even using the search bar because it did not give accurate results
I interviewed an RIT student studying design. As being a designer and already having the knowledge for visual hierarchy and design, she was not in favor of the design of the website at all. It is hard to navigate, the color contrast is hard to read, everything is split into categories that are confusing on the home page.
She was overwhelmed by all the elements on the home screen
The search bar was massive
Frustrated she couldn’t click on the carousel images
Everything just looked outdated
COMPARATIVE ANALYSIS
Well, what do the others look like?
City of Boston
What I find on this website is the consistency and colors that really show the branding and cleanliness of the design. The front page is immediately welcoming and each element when it comes to an icon or text has a purpose. I especially like the fact that it tells you the date as well.
However, there is so much information to look at just by looking at the front page, there’s an open navigation at the top as well as a hamburger. It confuses me because it makes me think there is hidden information apart from all the stuff that’s thrown at me in the beginning.
Rio De Janeiro
This site, in my opinion, has promise. It gets straight to the point of throwing what you need at your face so people don’t have to scroll down, it uses a familiar and corporate color scheme that is consistent throughout, and throws in a fun couple of graphics and pictures of the city, so people can really feel at home.
City of Denver
I really like how the site is laid out, the information is not too overwhelming and the search bar at the top really helps me to try and immediately find what I’m looking for or gives me suggestions on what I should be looking for. What I like about this is the way that most things needed to be seen by a city website is all at the top.
I conclude that these websites look the same. What makes these websites unique to their city?
GOALS
How can I make this useful and unique?
There is no point to the current park website, the information and location can be easily googled
I want to:
Create a personal connection between the user and the website
Prioritize finding the park, park information, and hours before one goes to visit it
Display the info in a way that makes the park look and sound interesting, including a photo gallery
DESIGN PROCESS
My design process through sketches, wireframes, to designs and iterations.
DESIGN PROCESS
Starting off with terrible sketches, I begin to layout the foundations.
This includes ideas for content and creating assets for the homepage information that makes it clear and easy to understand.
Then, I head to making it a bit neater with lo-fi wireframes.
Homepage on the left:
Basic layout of information
Includes calendar, events, news, contact and link info on the footer, and navigation bar
Parks page on the right:
Parks labelled on top
Park names and descriptions with pictures cascading downward
After that, I narrow my ideas down a little more into hi-fi wireframes.
Homepage:
Hero page with search bar and quick links
Upcoming events
News
I added different ways to get to departments and services through the hero page and just below it. Then came the upcoming events and city news. This was to show people the options they have when they first go to the homepage, prioritizing the needs for the city residents and events and news as secondary, so they can be updated with current information.
Parks Pages:
Small map on left
Search bar for zip code
Park suggestions surrounding area
Pop-up to show rules and regulations
This is basic information on how to get to the park as well as the background and description. This is important to include to influence a user to use the parks through visuals, making it easier to make decisions
Departments pages:
List of all the departments all in one list
This was not the best solution - almost back to the how the original site was, being all the same and confusing
DESIGN PROCESS
After establishing content, I went and tested styles through above the folds.
Testing the Rochester City design with their blue
Catered towards new visitors to welcome them to the website with a brief overview
Hero banner with blue overlay, using photos taken from Rochester, decorated in the corner with their logo offset for a balance to the information on the left
Testing the Rochester City design with adding colors
Adding a new way with the branding by creating fine curly lines that make up their logo
Information is in columns with clear typographical hierarchy, spaced a lot below the hero banner
Testing the Rochester City design with dynamic and asymmetrical patterns
Many of these solutions could have worked with refinement and iterations. So, why did I not go with any of them?
Heading back to my project goals, I want to make a website that emphasizes a unique way to lead a user throughout the main events and news to seeing what the nature of Rochester has to offer.
This moodboard conveys the idea of the coldness of Rochester, pairing a serif font with sans-serif. This is to give it an old-fashioned and refined look, conveying a more calm aesthetic.
DESIGN PROCESS
After finishing the wireframing and testing styles above the folds, I iterate and refine.
Narrowing down to the final solution, this consists of many iterations, but the ones I have listed were important to adding to the final solution.
Iteration 1: Floral and delicate.
The search bar is an important feature for the homepage because it contains all the information you can find with just typing in key words. The homepage's top half of the page is what the user sees first and where they get their first impressions from. Creating a delicate and gentle design of a floral pattern of Rochester's logo conveys that this is the town of Rochester, known as the "Flower City" and invokes a state of mind that Rochester adds beauty to both their long winters and blossoming springs.
The bottom half of the screen presents us with news and explore information, emphasizing the tourism feature of the city. It is important that a resident of Rochester is aware of activities and events going on in their city and know what resources are available to them.
The bottom footer part of the screen is important in this as well, yet unrefined and unaligned. The fade from the bottom adds contrast and transition from the top, showing the user they are close to the bottom of the homepage.
Iteration 1: Getting into the user's flow of Genesee Valley Park Page
This page is decorated with real photos of the park, showing the user the beautiful nature and what they could potentially explore. A short overview before getting into more information sets the tone of what the user is to expect from the park page.
Activities and amenities are important because it shows what the park has to offer and promotes community engagement. A photo gallery at the bottom can give the user a better feel of what they could potentially visit.
Many iterations were thought out into this project, though most are little discrepancies and minor changes.
Iteration 2: Narrowing down my solution
The same layout at iteration 1, I added small designs that add personality to the website, as well as the Rochester city silhouette for better recognizability.
Not much changes during this process, the head and footer changed to a less complicated shape for less distraction while trying to view content.
THE SOLUTION
The final design, though similar to the last iteration, includes small quality updates to make the process of navigating the website faster.
The homepage: Elegant, floral, and delicate.
The search bar:
includes popular recommendations for those who usually visit the site
Question prompt that let's the user know that the user can search anything up
The top banner:
Symmetrical design to balance the flowers and city design, giving it a more friendly and inviting look for visitors
A short description of Rochester to define what the city is about
A navigation bar using Rochester. NY as the named location in addition to it's other name, Flower City.
The news section:
Left to right visual hierarchy because people read from left to right
The explore section:
This was an important part of the design to promote exploration of Rochester
Beautiful pictures and descriptive captions entice the user to discover more about the area
The events section:
Current events going on in Rochester enhances community engagement and connection
The explore hover state.
Hovering over the image reveals a description of the park, so the user can both appreciate the picture with initial interest, then persuades the viewer to click on the page.
The footer.
Complementing the top of the page with a circle, the bottom copies the style, though lacks the illustrations for less distraction because this is the last thing that people will see on the website.
This contains general information and suggestions for the user in case they couldn't find what they needed going throughout the page.
Getting to the parks page.
Features:
a banner of Highland Park to show the bright and pretty nature Rochester has to offer
Subtle decorations to emphasize "Park" for the eye to follow easier
Filters in combination with Google Maps to accurately find parks near you
Popular parks:
A list of parks around that are well-known if the user has no idea which park to visit.
The user decides to go check out Genesee Valley Park.
The top is a general overview. It displays a map and photos of the park second after the overview reminding the user where they are.
Activities and amenities to show what is available to do
Underlined activities to learn more
Photo gallery of pictures taken of the park
Park page interactions: Filtering
Filter by categories
Filter within destination area
Filter to see certain parks
As an important part of my project, the problem I was focusing on related to trying to find parks easily and finally getting to the Genesee Valley Park Page.
Filtering allows for quicker access to tailored parks for each user.
CONCLUSION
Creating this design was a challenge to make something delicate as well as keeping the Rochester theme of a bold and small city.
The entire city of Rochester is a very diverse place, ranging from city, to nature parks, to suburbs. I wanted to embrace that diversity and provide a way to make the user feel like they were viewing a historical and flowery town.
My idea was to create something that looked completely different from other government websites, yet had the same functionalities and was useful to visitors, incoming residents, and current residents. This look and feel is something that I wanted Rochester to be represented as, with the plethora of historical buildings and museums.
My final design is both representative of my own design aesthetic, as well as the constraints of using the same Rochester blue used in the logo, and expanding upon that theme throughout the entire website.
What did I learn from this project?
Looking and comparing my website to my classmates, I feel that I did not go outside the boundaries or expanded upon the current uses of the website to make it look more artistical and including extra functions that would be interesting to the user. I kept my information minimal, focusing a lot on hierarchy and visual aesthetic.
I had to do a lot of iterations for my design to actually work and be helpful to a user, rather than confusing and redundant. Many of my elements originally were not the greatest as being there. so many things were removed during the process of user testing.
Corina Lougie
corina.lougie@gmail.com
