The Civil Rights Trail is a tourism and education focused trail featuring hundreds of important sites throughout the United States that are significant to the civil rights movement. As the project’s UX Designer, my deliverables included user flows, site audit, site map, and wireframes. I worked closely with a web designer, content team, and development team to complete this project.
Challenge Statement: Create a user friendly website redesign for the Civil Rights Trail that is mobile friendly and highlights tourism.
Project Overview & Insights
After an initial meeting with the team, I reviewed information on the client and project from the project manager. The client’s goal was to shift the site from an educational focus to travel and tourism while making the site mobile friendly and optimizing overall user experience. The site would continue to be centered around the interactive map, the most used site feature and site page. One of the main purposes of this project was to help position the trail to one day apply to be a UNESCO world heritage site.
The UX deliverables for this project included a site audit, site map, and wireframes. As I was brought on after the project had begun, there was no scope for user research, user flows, or additional UX deliverables that would’ve been useful. However, I was eventually approved to go back and create user flows later in this project. Ideally, I would’ve preferred to be part of the project scoping and include time for other deliverables, especially user research, but I was able to piece together valuable user and site data from Google Analytics in order to inform my work.
Site Audit
I began the site audit with an in-depth review of the website, making detailed notes about user flows, layout, accessibility issues, page hierarchy, and more. A few high level insights from the site audit:
Not mobile friendly
Navigation text changes from white text to gold text on a black background in the hover state, which is difficult to read as it’s not an optimal contrast ratio
The site had been added to in pieces over the years, making it a disjointed experience. Pages weren’t connected well, and could be optimized with a different nav design to help with user flow
Site pages with a high percentage of user exits(such as state pages) needed to be redesigned to encourage user engagement and overall user flow
A variety of accessibility issues needed to be addressed, such as font colors and weights being difficult to read, not screen reader friendly, etc.
Eliminating one of the two interactive maps that was difficult to use, and only use the more user friendly map
The addition of filters on the interactive map could be beneficial for users planning their trip by certain criteria, such as kid-friendly, ADA accessibility, etc.
Ensure consistent UI elements throughout the website
To better understand what users were doing on the site, I requested Google Analytics data from the data team to review. As there wasn’t time scoped for user research, this data was especially helpful for me to see what users were actually doing on the website. A few examples of helpful data from the site’s analytics included user actions and flow on top level pages, types of devices used, and pages with high bounce rates. I compared site page data with the current site map to gain context and perspective on why certain pages had issues, the impact of how pages were(or weren’t) interconnected, and page hierarchy.
I compiled my notes and recommendations into a slide deck to present to the team. I was happy to hear afterwards from a few developers and SEO team members that accessibility and a mobile friendly design was very important to them too.
Site Map
After my site audit and initial conversations with the team, I began assessing site pages and working on the site map. As I discovered during the site audit, much of the site’s content was difficult for a user to find, resulting in user site exits. A few site problems that were solved by reorganizing site content and pages:
One of the major issues I wanted to address was making it easier for a user to access the states, cities, and landmark pages. These were all buried on the original site, making it difficult to achieve the client’s tourism focus. I made “Plan Your Trip” one of the top level pages to ensure easy access to state, city, and landmark pages.
The Civil Rights Trail team created a lot of great content that could be linked to or used in multiple places on site but were not. For example, each state has a variety of content including landmark information, videos, photos, itinerary info, podcast episodes, and more. These were not included or linked to on the individual state page, and as a result, the bounce rate was high. This was a great opportunity to feature or link to helpful content and help users find more information for the state they were interested in.
On the original site, there wasn’t a clear way to reach the Civil Rights Trail team. A contact form was added to the site for more transparency and to help users reach out for additional information.
Wireframes
Using the new site map as my guide, I developed wireframes for the top level site pages, then worked down to content pages(see example below; additional examples available upon request). After presenting the wireframes to the team, I made edits and completed each site page. A site improvements included:
Clearer navigation categories with drop down menus for users to easily navigate the site content
A new Sites page to allow users to access and explore the trail’s sites by category and state(this site page was later combined with the Landmarks page after it was renamed)
Building out more robust state and city pages to link to related site pages such as state/city specific featured sites, state itineraries, podcast, and content
Creating a Plan Your Trip page(later renamed Experience the Trail) featuring the interactive map(most used site feature) to explore the trail virtually in order to plan a visit, build a trip route, and more
Hero image carousel on homepage so the client can showcase important news stories, landmarks, civil rights anniversary information, and more
Adding tourism focused capabilities such as interactive map filters(ex. kid friendly, ADA accessible, etc.) and a trip planner function
User Flows
While user flows were not a deliverable the team scoped time for initially, I was given permission to go back and create user flows centered around personas created by the marketing team using third party audience information data. I created a simple scenario for each persona to help team members understand how a user might act and move through the site. The user flows also highlighted to my team members the importance of features that had not been a priority before this project, such as the search function, or new features like the addition of map filters. Below is an example for the Young Family persona.
Project Recap
Overall, I feel like I learned a lot from this particular project. One of the most valuable insights I gained was the importance of including UX from the very beginning of a project. For example, I feel I could’ve been more useful in guiding the work as a whole, such as advocating for time and resources for user research or being part of stakeholder interviews, if I had been included from the project kickoff. On a positive note, I feel like I was able to make the most of the limited resources I had, and make informed decisions thanks to my previous tourism experience and business background. In the end, the client and their partners were happy with the new web redesign and successful launch.
How I worked with team:
Collaborated with web designer on overall design, typography, and UI elements
Offered input on persona development created by the content team
Assessed user data provided by analytics team
Helped development team with information architecture
Assisted the development team with updating the interactive map filter
What I learned from this project:
This project underscored how essential it is to be an advocate for users. There were many instances where I had to push back for accessibility considerations, particularly with the web design team. It wasn’t always comfortable but it was an opportunity to collaborate with the web design team to find a creative solution that kept accessibility while balancing aesthetics.
A learning experience I had while creating the site map was when the content team decided to change the top level page names well after the site map(and wireframes) was completed. In my opinion, changing the top level page names also changed the page’s intent, which I felt required reassessing how the site map was organized. For example, the Plan Your Trip page became Experience the Trail, which isn’t quite the same purpose. If I had to do this part of the process all over again, I’d make sure the team discussed the content strategy and page names before working on a new site map.
Although there was a very brief discussion early on about the interactive map (the most-used site feature), the limitations of the development team’s resources and scope ended up being an issue. Important features of the interactive map update had to be rolled out at a later date. I wish there had been more in-depth discussion on project scope limitations earlier in the process.
Tools
Adobe XD, Google Analytics, Workfront, SharePoint, Slack