Project Description
City of Suwanee, GA
"Award-winning Suwanee is a friendly, progressive community committed to maintaining a high quality of life for its approximately 18,000 residents. We're proud of the numerous awards our community's efforts have garnered over the past several years. And we're delighted to have been recognized by Money Magazine as one of the country's best small communities in which to live and by Kiplinger.com as one of the best communities in which to raise children. Most of all, though, we're gratified that our residents and business owners are proud to call Suwanee home."
- Excerpt From Suwanee
During the consulting workshop, I got a great sense of the people in the city. They were full of energy, very proud of their brand, and excited about improving their site. Suwanee has a very active community so their goals of wanting to showcase their community, news, and events were no surprise. Right away, I wanted to incorporate a larger community presence and balance the brand by incorporating white space.
Role
Visual designer
Tools
Adobe XD
Photoshop
Illustrator
Invision app
Visual Concepts
The Suwanee team had some very definite ideas of their vision for the new site. I listened to their ideas and how they related to their goals; I knew exactly what to do. The logo has so many vibrant colors and a unique treatment, I wanted to honor that by combining it with white to provide the best contrast so that the existing colors pop. I utilized only the colors within the logo to create the palette. For the font pairings, I went with simple styles that were clean and legible at various sizes.
Wireframes & Design First Impressions
The wireframe was very similar to the previous layout. With a few minor updates, the design now has the main navigation area and utility links that are apart of one large open space. The full-width hero space showcases promotional content with a colorful gradient text-based content area. The intention was to minimize the feeling of too many boxes or compartments. Call to action buttons are spaced well and separated in their own section. Lastly, news, events, and meeting are divided into tabbed sections to share real estate. As far as the design, the stakeholders loved the new changes and were very impressed with the direction and the incorporation of their brand.
Final UI Design
There were a few colors from the logo that stakeholders wanted to see represented a bit more. We made a few minor tweaks to finalize the design. In the approved design, color is now used with purpose. I was able to successfully marry the mood and feel of the city with the fun, energetic, and cheerful charm of the brand. We moved away from the pastels to the bolder colors of the logo.
Responsive Mobile
Suwanee’s responsive layout translates the user experience from desktop to mobile devices easily. On mobile devices, the layout adjusts to fit varying screen sizes. The main navigation is accessed from the hamburger menu. The search icon turns into an expanded search bar. Content condenses in size and mostly stack. Call-to-action buttons show a couple of items at a time and the swipe gesture gives the user access to additional button options. Tabs work similar to the desktop version with one column in lieu of two.
