“For more than 60 years, FootJoy has been the leading golf shoe on the PGA tour. This proves, when given a choice, the best golfers in the world choose the best golf shoes in the world.” This is how Footjoy describes themselves on their website. However, despite the cachet in the golf industry they’ve earned themselves over the past six decades, the brand was starting to become stale, the website was becoming outdated, and the homepage was doing a poor job of getting users shopping as quickly as possible.
Footjoy’s goal in hiring us to design and develop their new homepage was to improve overall user experience, give users more opportunities to shop, create more real visual estate for tantalizing visuals, and to elevate the look and feel of the brand.
Our primary goals in redesigning the site were to better the user experience, make the website more shoppable and make it more visually engaging. Here are some quick highlights on how we were able to accomplish this goal:
Highlight #1: Shoppable Hotspots
We created an easy way for customers to add products to their cart via hotspots that Footjoy could add to any image throughout the homepage.
Highlight #2: Highlighting Athletes
We created a new section on the homepage to highlight the Footjoy-sponsored athletes on the PGA tour. These also used the hotspots we created so customers could easily purchase the products that their favorite athletes wear.
Highlight #3: Full-Page Slider
To really highlight products with lifestyle images we created a full-page vertical slider that introduces users to the brand and website.
Highlight #4: Multi-Level Mega Menu
We redesigned the site navigation with a multi-level mega menu. Included in this were shoppable product blocks in each dropdown, a mobile version that makes it easy to drill down into your desired site section, and an easy way to filter the menu by gender / weather.
Project Process
My role
As with all projects at Voltage, I was the Director of Design and led the effort to revamp the UI/UX and visual design. I was involved in this project from the beginning, briefing the designers on my team, strategizing homepage functionality, wireframing the desired content of the homepage, and assessing how well each design iteration met the clients’ goals. I also restructured the navigation and created user journeys / paths to purchase from the homepage and navigation.
I heavily involved myself in the design phase of the process by creating numerous iterations of the designs (including the one the client ended up approving), critiquing and pushing my team’s designs, and regularly presenting to the client.
I also transitioned the project to development by briefing the developers on intended functionality and animation, creating functional prototypes for how things would work in development, and creating initial styles to work with.
Our process
Since the design of this website was happening in phases and we were only explicitly working on the homepage, we had to tread lightly to ensure that the design we came up with fit well with the rest of the website while also pushing the overall site aesthetic forward in a measurable way. By taking existing brand guides and evolving them we were able to create a page that fit nicely but still elevated the brand to a new level of quality. We also redesigned and developed the navigation and footer during this project, which was applied throughout the rest of the site.
Steps
Ideation / Discovery / Strategy
User Data / Wireframe
High-Fidelity Comps
Refinement / Testing
Development
Launch
INITIAL RESEARCH
We started the project by studying the data we had on the existing Footjoy website. By using data on demographics, purchasing habits, customer preferences, etc, we were able to work with the client to refine our ideas for the homepage into a proposed list of content “stacks.” From there we created low fidelity wireframes and an updated sitemap that showed how user flows would change with our new homepage.
HIGH-RESOLUTION DESIGNS
From the wireframe, my team and I created numerous different high-fidelity homepage designs that we used both internally and with the client to refine our desired look and feel. We all pulled from the same brand guide but were given the space to push it forward in whatever way we thought would benefit the project most. So while each new homepage matched the Footjoy brand, they were all drastically different in how they approached the goals of the site and how they interpreted the wireframes.
HIGH FIDELITY PROTOTYPE
Naturally, one of the designs from our previous round of options rose above the rest, both internally and with the client. Using that as the base, I designed a fully interactive homepage using Sketch, Craft, and Invision. We used this to user test interactions, flesh out all of our intended functionality, get client approval, and finalize the design for the development team.
After completing and testing the interactive prototype, we began the web development. I was integral in handing off the designs to the development team. As the lead designer, I worked with the lead developer to establish success criteria and intended functionality for each component of the page. I also helped create and establish the new website style guide, icon font, and asset library.
