A refresh for twin sites with a twist of functional delight
John Deere Classic & Birdies for Charity
TIMELINE
Design Process: January 2022
Site Launch: January 2024
MY ROLE
UI/UX Design
Wireframing
Business Strategy
User Journey
Information Architecture
TOOLS
Figma
Google Suite
Two for One
Redesigning legacy websites is an exciting endeavor, offering the opportunity to innovate and rejuvenate. Recently, we undertook the challenge of redesigning and launching two websites: the John Deere Classic and Birdies for Charity. The teams behind these sites approached us to rejuvenate their sites and add new useful functionality for the website life cycle.
Teeing off
When the John Deere Classic team approached us they expressed a lot of love for the legacy website as it had served them for a number of years but it was time to take into consideration some of the things that they had 'worked around' as the John Deere Classic Tournament has evolved and changed. The time for change had come.
Things that we pondered for consideration:​
-
What features would the website benefit from that aren't available now?
-
What new tournament specific things could we add to the site or make easier for the JDC team to update?
-
Is there anything on the site currently that could be improved?
In addition to redesigning the John Deere Classic website, we also had to address the intricacies of Birdies for Charity, the fundraising arm of the tournament. Local charities leverage this platform to solicit donations from the community, with Birdies for Charity contributing an additional percentage of the total donations received.
​
While both websites share common components, they serve distinct purposes. One focuses on the tournament itself, while the other is dedicated to philanthropy. The most notable divergence lies in the checkout experience.
Tournament Life Cycle
A recurring theme we've observed is the concept of the 'Tournament Life Cycle'. The John Deere Classic is primarily a seasonal event, yet activities occur year-round. There are phases dedicated to tournament preparation, the event itself, and the off-season.
​
For the new site, a key requirement is flexible functionality that allows easy activation and deactivation of various elements tailored for tournament and off-season periods. This ensures the site remains dynamic and relevant throughout the year.
​Business Opportunities: In addition to the different tournament specific features, the John Deere Classic Team wanted to be able to add advertising to their site but they weren't sure what opportunities would be available to them. ​
I strategized this component with digital advertising spaces as the initial focus. Alongside digital ads, we could explore 'Sponsored Spaces'. At tournaments, sponsors often support on-course amenities, presenting another opportunity to offer dedicated content spaces for sponsorship.
​Business Opportunities:
-
Sponsored Spaces: Some of the site information sections could be sponsored by vendors
-
Digital Ads: Building in some spaces for digital advertisements of various sizes
-
Customizable Reusable Blocks: Better advertising opportunities with customizable blocks that can be placed on any page
Tournament Lifecycle: The John Deere Classic and Birdies for Chairity have cycles for the off-season and tournament season. Due to this, the needs of the site change based on the time of year. In the previous iteration of the site, there were customizable pieces but some pieces needed to go through my team to be altered or modified. We wanted to give the JDC and Birdies team the autonomy to update things as they see fit. As an additional thought, we also considered putting functionality into Wordpress in the CMS to create different 'modes'. When using modes in Wordpress, we can program it to have specific pieces of the site visible verses being hidden.
Wordpress Modes: Depending on the time of the year, both sites needed different 'modes' that would have different components visible on the site at a time. With one click, we could quickly switch between tournament mode verses pre-tournament mode. This would greatly speed up the time and customization abilities for the JDC team.
Birdies Checkout: Part of the site rebuild would require us to review and examine the checkout process for Birdies for Charity. Due to the way that users need to search and donate to various charities, the current interface was somewhat cumbersome to add multiple charities and some people abandoned checking out because it was tricky to navigate.
​Checkout Revamp:
-
Streamline and simplify the checkout process.
-
Take 'if statements' into consideration and make sure they're visible when donations reached specific levels and what users would receive with them at those donation points.
-
Give visual queues to where the user is at in the donation process.
​
Building a foundation that works for both sites
This was a big challenge of creating styles and UI elements that could be used for both websites. The approach to designing the site was based on creating 'reusable block' elements that can be put into Wordpress and can hopefully be flexible enough to be used for anything. I had to consider a lot of these reusable elements and ended up creating a UI kit to create all of the unique pages and elements that the site could utilize. The John Deere Classic website had more unique components due to the sheer volume of information the site holds. That served as my base to start building reusable blocks.
Given that both sites are information-heavy, they are designed with a similar structure to prevent users from having to re-learn navigation for each site.
Checking out Charities
The Birdies for Charity checkout process had several key areas identified for improvement. It was essential to provide users with clear indicators of their progress throughout the donation process. Additionally, for donors reaching specific donation thresholds, the experience needed to accommodate additional sub-steps seamlessly. Furthermore, for users donating to multiple charities, the interface required enhancements to make the full list of charities more accessible and easier to navigate.
Par for the Course
​​​My design process begins with sketching wireframes by hand, with a focus on mobile-first and scaling elements for responsive design. I then transfer these sketches to the computer to create low-fidelity wireframes, which are eventually refined into high-fidelity and prototype-worthy designs.
