Intro
A New Website for a Village With Old Charm
I was tasked with redesigning the website for the Village of Gainesville, a project I was especially excited to take on since it’s the town where I grew up. Having a personal connection to the community made the work feel meaningful and motivating.
This project focused entirely on Ui design, which is my favorite part of the web design process. I worked directly with a member of the village board who oversaw the website. While the original site—built on Wix—contained all the necessary information, it struggled visually and lacked cohesion.
The site suffered from several design issues, including inconsistent layouts, misaligned elements, and a lack of visual hierarchy and polish. In the following sections, I outline the key problems identified and the design decisions made to address them.
Before
My Role
My Role as a UI Designer
Research: Competitive Analysis - End-to end design
Usability: Making website useable - Connecting domain - Making website accessible to public
End-to-End Design: Designing layout - Branding - Final UI - Final project deliverables
Project Overview
4 weeks
Solo project for client
Tools
Sketchbook and paper
Figma
Framer
Resources
UX/UI Designer's feedback
Project Overview
4 weeks
Solo project for client
Tools
Sketchbook and paper
Figma
Framer
Resources
UX/UI Designer's feedback
My Role as a UI Designer
Research: Competitive Analysis - End-to end design
End-to-End Design: Designing layout - Branding - Final UI - Final project deliverables
Usability: Making website useable - Connecting domain - Making website accessible to public
Design
Harvesting Fresh Design Ideas
The first step was to create a mood board with inspiration for the website. I found fonts, color schemes, hero layouts, footer layouts, as well as other inspiration. I focused on the layout first, as this was one of the biggest problems with the original website.
Building a Layout the Whole Village Can Navigate
I began by sketching layout concepts inspired by the mood board to explore different structural approaches. Once I identified a simple layout that felt strong, I moved into Figma to experiment with variations and refine the design.
My primary focus was improving clarity and cohesion. I reorganized content into clearly defined sections, separating information into logical groups. To reinforce this structure, I introduced banner-style headings for each section, which improved visual hierarchy and added visual interest—an approach informed by patterns observed on similar websites.
For the footer, I added a message form that allows Gainesville residents to contact the mayor directly with questions or concerns. Additional contact information was placed alongside the form to accommodate residents who prefer to call or need to send materials to the village.
Bringing the Village Into Focus
The redesigned layout places a stronger visual focus on the Village of Gainesville. Because the original site lacked photography, I incorporated images of the village throughout the design to highlight the village itself. Each page features a unique hero image that reflects its content, such as using the fire hall for the Proceedings page. The homepage includes a slideshow of different areas of the village to create a welcoming introduction.
I also paired content sections with relevant images to provide context, such as showing the park pavilion alongside rental information. Google Maps were embedded wherever addresses appeared, making navigation easier for residents and visitors. The homepage includes a full village map for exploration and directions.
To keep the focus on the imagery, I replaced the decorative font with Inter, a clean and modern typeface that improves readability and visual clarity.
A Color System Rooted in Village Identity
The original website relied heavily on gray and white, so I updated the color palette to add warmth and personality. When selecting new colors, I focused on those that best represent the Village of Gainesville. Red consistently stood out as a meaningful choice.
Res and black are the colors of the Gainesville School, which serves as a central hub for the community. The school connects residents across generations through education, events, sports, and shared experiences. Red also appears throughout the village in prominent locations, such as the park pavilion and the fire hall.
To avoid overwhelming users or creating an overly aggressive tone, I used red sparingly as an accent color. I paired it with dark gray as a softer alternative to black and used an off-white background to keep the overall design light, balanced, and approachable.
The original website relied heavily on gray and white, so I updated the color palette to add warmth and personality. When selecting new colors, I focused on those that best represent the Village of Gainesville. Red consistently stood out as a meaningful choice.
Res and black are the colors of the Gainesville School, which serves as a central hub for the community. The school connects residents across generations through education, events, sports, and shared experiences. Red also appears throughout the village in prominent locations, such as the park pavilion and the fire hall.
A Color System Rooted in Village Identity
To avoid overwhelming users or creating an overly aggressive tone, I used red sparingly as an accent color. I paired it with dark gray as a softer alternative to black and used an off-white background to keep the overall design light, balanced, and approachable.
One Easy Village Website Fix
When showing my client the progress I had made, she only had one change she wanted me to make, it was in regards to how the Proceedings page was organized.
Originally the Proceedings pages was split into three main sections: Meetings and Hearings, Budget Info, and Voting Info.
My client requested that two main sections: Meetings and Voting Info. Then to add subsections under the Meetings section. The subsections would be Meeting Minutes, Updates, and Budget Hearings,
Before:
After:
Before
After:
Building a Layout the Whole Village Can Navigate
I began by sketching layout concepts inspired by the mood board to explore different structural approaches. Once I identified a simple layout that felt strong, I moved into Figma to experiment with variations and refine the design.
My primary focus was improving clarity and cohesion. I reorganized content into clearly defined sections, separating information into logical groups. To reinforce this structure, I introduced banner-style headings for each section, which improved visual hierarchy and added visual interest—an approach informed by patterns observed on similar websites.
For the footer, I added a message form that allows Gainesville residents to contact the mayor directly with questions or concerns. Additional contact information was placed alongside the form to accommodate residents who prefer to call or need to send materials to the village.
Building a Layout the Whole Village Can Navigate
I began by sketching layout concepts inspired by the mood board to explore different structural approaches. Once I identified a simple layout that felt strong, I moved into Figma to experiment with variations and refine the design.
My primary focus was improving clarity and cohesion. I reorganized content into clearly defined sections, separating information into logical groups. To reinforce this structure, I introduced banner-style headings for each section, which improved visual hierarchy and added visual interest—an approach informed by patterns observed on similar websites.
For the footer, I added a message form that allows Gainesville residents to contact the mayor directly with questions or concerns. Additional contact information was placed alongside the form to accommodate residents who prefer to call or need to send materials to the village.
Design
A Color System Rooted in Village Identity
The original website relied heavily on gray and white, so I updated the color palette to add warmth and personality. When selecting new colors, I focused on those that best represent the Village of Gainesville. Red consistently stood out as a meaningful choice.
Res and black are the colors of the Gainesville School, which serves as a central hub for the community. The school connects residents across generations through education, events, sports, and shared experiences. Red also appears throughout the village in prominent locations, such as the park pavilion and the fire hall.
To avoid overwhelming users or creating an overly aggressive tone, I used red sparingly as an accent color. I paired it with dark gray as a softer alternative to black and used an off-white background to keep the overall design light, balanced, and approachable.
Final Product
Welcoming the Village to Their New Online Home
I showed my client, a manager of the Village of Gainesville board, the progress as I went along, and she was happy with all of my design choices. I also showed my website to a professional designer with years of experience on the project as I went along for her expert feedback. She had very few critiques. She said that it was “looking super pretty! I really see your devotion when it's something that matters to you.”
By the time I finished it was a completely different website, with a fresh layout and a fitting brand. My client was extremely excited with the final project. She stated that she loved how it was organized, the use of the village pictures, and the colors I chose. She felt that it looked quite professional.
The rest of the Village Board loved how professional the new website looked, one stating that it looked "spiffy".
Welcoming the Village of to Their New Online Home
Conclusion
Inspired by the Streets and Faces I Know
This was my first client project, working with a member of a small village board—specifically, the village where I grew up. Seeing my work live in the real world and impacting a community I care about was incredibly rewarding. It was important to me that this project served a meaningful purpose and genuinely benefited the people who use the site.
Redesigning a website so closely tied to home sparked a desire to reach out to other small villages and local businesses that could benefit from thoughtful, modern design. Many of these organizations rely on their websites as primary points of communication, yet lack the resources to keep them up to date.
The project was also refreshing in its focus on visual design, which is my favorite part of the web design process. Working on a purely design-driven website reinforced my interest in taking on similar projects for local communities in the future.
Inspired by the Streets and Faces I Know
Conclusion
Welcoming the Village to Their New Online Home
I showed my client, a manager of the Village of Gainesville board, the progress as I went along, and she was happy with all of my design choices. I also showed my website to a professional designer with years of experience on the project as I went along for her expert feedback. She had very few critiques. She said that it was “looking super pretty! I really see your devotion when it's something that matters to you.”
By the time I finished it was a completely different website, with a fresh layout and a fitting brand. My client was extremely excited with the final project. She stated that she loved how it was organized, the use of the village pictures, and the colors I chose. She felt that it looked quite professional.
She showed it to the rest of the village board. Their thoughts…
Final Product
This was my first client project, working with a member of a small village board—specifically, the village where I grew up. Seeing my work live in the real world and impacting a community I care about was incredibly rewarding. It was important to me that this project served a meaningful purpose and genuinely benefited the people who use the site.
Redesigning a website so closely tied to home sparked a desire to reach out to other small villages and local businesses that could benefit from thoughtful, modern design. Many of these organizations rely on their websites as primary points of communication, yet lack the resources to keep them up to date.
The project was also refreshing in its focus on visual design, which is my favorite part of the web design process. Working on a purely design-driven website reinforced my interest in taking on similar projects for local communities in the future.
Inspired by the Streets and Faces I Know
Conclusion
Intro
A New Website for a Village With Old Charm
I was tasked with redesigning the website for the Village of Gainesville, a project I was especially excited to take on since it’s the town where I grew up. Having a personal connection to the community made the work feel meaningful and motivating.
This project focused entirely on Ui design, which is my favorite part of the web design process. I worked directly with a member of the village board who oversaw the website. While the original site—built on Wix—contained all the necessary information, it struggled visually and lacked cohesion.
The site suffered from several design issues, including inconsistent layouts, misaligned elements, and a lack of visual hierarchy and polish. In the following sections, I outline the key problems identified and the design decisions made to address them.
Before
Project Overview
4 weeks
Solo project for client
Tools
Sketchbook and paper
Zoom and Maze
Figma
Resources
UX/UI Designer's feedback
Research
Competitive Analysis
End-to end design
My Role as a UX Designer
Usability
Making website useable
Connecting domain
Making website accessible to public
End-to-End Design
Designing layout
Branding
Final UI
Final project deliverables