The Village of Gainesville
Intro
A New Website for a Village With Old Charm
I was tasked with redesigning a website for the Village of Gainesville. I was very excited to accept this assignment, as it was for the town where I grew up.
I was also looking forward to working on a solely UI project, as the designing aspect is my favorite part of the website making process.
I was given this assignment by the member of the village board that was in charge of the website. She had used Wix to make a simple website that included all of the needed information. However, it wasn’t the most visually appealing. There were a myriad of problems, such as the layout of the website, elements not being aligned, the style overall needed improvement. The list goes on, I will explain each of the problems I fixed.
Before:
What was my role?
What is My Lil Boo?
My Lil Boo is a responsive website that helps new parents gain confidence in raising their babies through tracking habits and providing help on health related topics.
When a new baby is born there are so many new difficulties that parents will need to overcome in order to keep their baby safe. If they don't have help to guide them through this it can cause stress or have serious consequences if the baby's needs are not met. My Lil Boo is there to help with that.
Intro
What was my role?
My Role:
Interviews and research
Analyze
End-to-end design
User testing
Final project deliverables
Tools and Resources:
Sketchbook and paper
Zoom and Maze
Figma
Group critiques
Mentor sessions
My Role:
Finding inspiration
Designing layout
Branding
Final UI
Final project deliverables
Tools and Resources:
Sketchbook and paper
Mentor feedback
Figma
Framer
My Role:
Interviews and research
Analyze
End-to-end design
User testing
Final project deliverables
Tools and Resources:
Sketchbook and paper
Zoom and Maze
Figma
Group critiques
Mentor sessions
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. I began sketching different layout ideas based on my examples from the mood board. Once I found a simple layout I was happy with I began experimenting with different versions of it on Figma.
I viewed four competitors: Baby Center, Huckleberry, Le Baby, and Sprout
Strengths:
The use of guides
Simplistic layouts
Use of trackers, and option to customize
Description of current month milestones
Analysis of the habits
Option to add multiple babies
Weaknesses:
Included only trackers and no insights or guides, and vice versa
Missed opportunities when it came to using cute colors
Building a Layout the Whole Village Can Navigate
What I focused on for the layout was making it neater and more coherent. I wanted to separate the different groups of information into more clear sections. I also added a banner heading for each section to further help with that separation, as well as adding to the design visually, an idea I got from looking at other websites.
For the footer I included a message form so that residents of Gainesville could message the mayor with any inquiries they may have. I put other contact information next to it, in case they prefer to call or have to send something to the village.
Bringing the Village Into Focus
When designing the layout I kept in mind thatI wanted to have more of a focus on the village itself. There were no pictures of the village on the original website, so I had to find ways to include pictures into the design. I decided that each page’s hero would have a different part or building in the town that best represented that page. For instance, for the Proceedings page the hero would be of the fire hall where the proceedings took place. For the homepage, I would have the hero be a slideshow of the different parts of the town. I got this inspiration when looking at other village’s websites.
Another way I would incorporate images into the website was to include an image in each section that best represented that section. For instance, in the section that had information on renting the park pavilion, there would be an image of the pavilion besides it.
When conducting the analysis of other village’s websites I got another idea, I decided to embed Google Maps into sections where there were addresses. I felt like this would add to the website visually, as well as serve a more practical purpose of helping new comers find their way around. The homepage would have the whole village of Gainesville map embedded, so that users can look at everything in the town, as well as to get directions from their current location.
I chose to change the more elaborate font to a very simple font so as to not distract from the pictures of the village. A simpler font also helped the website to feel more modern. I ended up choosing Inter, as this fit the criteria very well.
I viewed four competitors: Baby Center, Huckleberry, Le Baby, and Sprout
Strengths:
The use of guides
Simplistic layouts
Use of trackers, and option to customize
Description of current month milestones
Analysis of the habits
Option to add multiple babies
Weaknesses:
Included only trackers and no insights or guides, and vice versa
Missed opportunities when it came to using cute colors
A Color System Rooted in Village Identity
The original colors were gray and white, so I ended up changing the color scheme to give it more color. When deciding new color schemes I thought of colors that represented the village well. There was one color my mind kept returning to; red.
Red and black are Gainesville Schools colors, the school seems to be what connected the village more out of anything else. All the kids in the village, and adjoining villages go there, many parents also went there when they were young, many parents work there, essential information is learned, friends are made.There are events, sports, concerts, and dances. It is also one of the only places of real import in the village.
The color red also shows up in other prominent places throughout the town, the park pavilion is red, the fire hall has red, etc.
However, it is important that I use red sparingly, as to not overwhelm the users or make the site seem too aggressive, which is why I like the examples above. As black is also another one of the school’s colors I incorporated dark grey into the website. I used an off white for the background, to give the website a lighter feel, especially since the other two colors are darker.
I viewed four competitors: Baby Center, Huckleberry, Le Baby, and Sprout
Strengths:
The use of guides
Simplistic layouts
Use of trackers, and option to customize
Description of current month milestones
Analysis of the habits
Option to add multiple babies
Weaknesses:
Included only trackers and no insights or guides, and vice versa
Missed opportunities when it came to using cute colors
Final Product
Here is The Village of Gainesville Website:
Here is My Lil Boo:
Conclusion
This project was a rewarding struggle…
I struggled quite a bit with my very first project. There were so many challenges to overcome, everything from small inconveniences to being unable to grasp how something was supposed to work. Despite all of this, I enjoyed this project due to the fact that I grew as a researcher and designer. Overcoming all of the difficulties made this project feel so much more rewarding.
I had originally thought that I knew where my project was going to end up as soon as I chose the topic. I ended up discarding my preconceived notions sooner after staring the project. For example, the user interviews helped me to realize that I needed to focus more on health more than I was intending to before. Even though I had not originally seen the purpose for each of the steps, I realized after completing the step that it brought new depth and insight into where to take my project.
I really appreciated being able to make a project that spoke to me. It helped me to realize that having a project with a purpose to me, allowed me to pour more of my effort and heart into the project. As a mother, I love being able to help other new parents take care of the most important miracle.