Visit Franklin is a small town destination known around the world for its unique mix of Southern charm, history, and hospitality. One of my major projects for 2020-2021 was to take data and sentiments from user research and implement those findings into the Visit Franklin website. My role in this project was to create, plan, implement, manage, and execute every aspect of the Visit Franklin brand and website updates. As a team of one with limited access to a development team, I carefully planned, designed, and prioritized impactful UX focused updates.
Challenge Statement: Design and implement user-friendly site updates and a brand refresh for a mobile-first website.
Project Overview & Insights
When I inherited the Visit Franklin site, it was not designed with mobile in mind, even though most of the (rather substantial) site traffic was mobile. The previous team used a third party app service to recreate some elements of the site but the app was rarely accessed by users and was very costly. I made the decision to instead scrap the app and focus on making the Visit Franklin website mobile-first for a better user experience. I also noted Google’s plans to rollout mobile-first site indexing and wanted to be sure Visit Franklin’s site wasn’t left behind.
After addressing the issue of mobile-first, I wanted to update a few UX and brand related site elements including a difficult to read font, inconsistent buttons, and unhelpful menus. As many of these site elements were a result of old brand guidelines that did not translate into digital well, I decided a brand refresh was overdue and began a UX-focused rebranding process. I worked with a designer to create a mood board with fonts and a color palette that would work for both print and digital, keeping UX issues we had with our previous brand top of mind such as readability and color.
Research & Prep
Before starting to plan and design the UX site updates, I reviewed historical site data with Google Analytics, user interactions with HotJar, and in-depth visitor research to better understand user actions, sentiment, and needs. While I would’ve preferred to do my own user research, I did not have the resources for this project. The data I had access to directly impacted key features including menu order, menu design, new site page additions, button tile placements, and more. A few specific examples of how the data and business priorities impacted design include:
Using Google Analytics and HotJar, I noted that the Events page was one of the most visited pages. The Events page in the new design would be easy to access, especially on mobile, using a mobile-friendly hamburger menu and a bar menu on desktop.
According to visitor research, we discovered that demographics interested in Arts & Culture spend substantially more on average during their visitor to Franklin yet there was no site page or content aimed at that subject. The Arts & Culture page was created(and is still being updated and improved) and featured prominently on the homepage.
In the former version of the Visit Franklin site, hotels and lodging were not always easy to find. This is key because Visit Franklin is partially funded by hotel tax and encouraging hotel bookings is important to long-term growth to both tourism and hotels. In the new design, Hotels are featured in the hamburger menu and on the homepage.
Buttons throughout the site were simply a black outlined white rectangle with black text and didn’t look like a usual website button. The new site design has consistent blue buttons with off-white text that will be more noticeable on the site pages with a clearer visual call to action.
In addition to reviewing research and data, I assessed many competitor websites, refreshed my knowledge on the latest UX best practices, and sketched a few ideas of what would work best for the Visit Franklin site.
Planning
I worked closely with our development team to plan our project timeline and prioritize tasks. One of the major parts of preparing the site was to address the technical debt we had inherited from a previous team, which included moving the site to Wordpress. Shortly after planning site updates, I got approval for a branding refresh which I opted to do at the same time as our site update. Adding the brand refresh increased our timeline and workload but it kept our development team from having to do work over again if we had waited for another sprint.
After the development team cleaned up much of our HTML and Javascript issues, we were ready to begin work on:
Prioritize new and top level site pages for new menu and buttons balancing business goals and user experience
A new hamburger menu option that would translate well for both mobile and desktop
Buttons for easy user access to top level site pages, including Stay(hotels), See & Do(Activities), Shopping, Food & Drinks, and Events
New site pages for History, Arts & Culture, and Experiences based on research data to help users find content they are interested in
Adding a carousel featuring top attractions visitors go to while visiting Franklin
Implementing new brand assets, icons, fonts, and color palette (Brothers Design collaboration with myself and VF Creative Manager)
Wireframing
Wireframing was an important part of the overall design process as it allowed me to easily create different versions quickly before moving to prototyping with just pencil and paper. Many elements changed throughout this part of the process, including menu options. My goal was to keep site elements simple and clean to reflect the new branding and for a better user experience while keeping in mind business goals such as featuring our hotels page. I shared my initial wireframes for the home page, menu, footer, tiles, and buttons with our development team to estimate hours and timeline planning, as well as early buy-in from stakeholders.
Prototyping
My main goals for my first Figma prototype(embedded below) were to test out the color palette, fonts, buttons, and overall flow. Another reason why I created a prototype so quickly after wireframing was because stakeholders were struggling to understand how the new brand would translate visually. A previous rebrand had been a bad experience so I wanted to help them get over the initial hesitancy and get buy-in for the new direction. This was a good decision because any time they would feel unsure and want to hold the design process up, I could always point back to the prototype. After getting great feedback from both stakeholders and users in an informal interview, I made a few updates to the initial prototype:
Lightened the background color from cream to more of an off-white for readability
Changed the text on any blue background to off-white for readability
Added the left/right arrows to the carousel as a way to let users know they can scroll
Included two button tiles in the Explore Franklin section to include key site pages
Below is the final Figma prototype.
Project Recap
This project was an important first step to improve Visit Franklin’s site and overall user experience through incorporating a mobile-first design and branding that reflected Franklin. I feel I learned a lot through this process, including:
Communicating early and often with the development team on sprint tasks, expectations, and timeline. This project was a few weeks later than originally thought as the development team was short-staffed, didn’t always stick with agreed upon prototype designs, and other issues.
The importance of iteration when creating wireframes and prototypes. Sometimes it takes a few versions to balance user experience, design, and business goals.
How to presenting prototypes and gaining approval from key stakeholders who aren’t design savvy(or don’t “get” wireframes). Using Figma to create visually appealing prototypes to actually show what the end result of the project would be was extremely helpful. Talking stakeholders through design updates, data, and how changes would benefit Visit Franklin(and users) using a prototype helped me successfully win them over in spite of a bad experience with a previous team.
Tools
Figma, Google Analytics, Asana, Jira, Slack, Pencil, Paper