CASE STUDY • WEB DESIGN • UI/UX DESIGN

Callaway Website ReDesign

One of my first projects while working at Callaway was to tackle a complete redesign of the Callaway website. The challenge was a complex one - how do you build a website that can work for not only our US websites, but also consider needs from global teams as well? The answer was clear: put in the legwork on the frontend with thorough research, user testing, and surveys and in the end you'll have a design made with data backed decisions. The first item on the agenda was having a clear set of goals and a strategy, which meant defining the problem:

01

The existing Callaway website was built as a media first endeavor. The priority was to show as much content (video, photography, social media) on the page as possible. E-commerce was secondary and mostly an afterthought.

02

Responsive design was not a priority. In fact, the website had a multitude of issues at standard screen resolutions for both tablet and mobile. With the increase in mobile traffic, this needed to change immediately.

03

The website lacked a true design system. There was a lack of cohesion and consistency between elements. The website was also very inefficient to update with many different asset sizes and no core system.

With the main issues clarified and goals defined, it was time to get to work. As the design lead on the project I helped organize the structure that we would work on for the project. This included weekly check-ins, delegating tasks, and defining the process. I worked hand in hand with project managers, developers, and other designers along the way. The more we could communicate, the better.

USER PERSONAS

One of our top priorities as a design team was to truly think about who was using this website. To do this, we created user personas and identified 3 main customer types. These personas were selected based off survey information which asked a variety of questions to help us really understand our customers.

SITE MAP

With our targeted users identified, it was time to make sure our structure made sense. As a visual team, we decided to develop a site map. This ended up being a crucial step and something we continually referenced back to throughout the project.

LO-FI TO HIGH-FI MOCKUPS

Over the next few months our design team created endless low-fidelity mockups. Although it's easy to want to jump right into making the designs visually appealing - the true magic is making sure the building blocks are in place. Throughout this time we enlisted user testing and used feedback to define each detail of the website. Only after we felt we had done our due-diligence did we begin creating high-fidelity versions. This work was done primarily in Figma and we used the tool to create prototypes in order to give testers a more 'real world' feel to the designs.

Building a Design System

At this point, we needed to make sure we had a cohesive design system in place. It was crucial that we thoroughly identify each element, style, etc. to make sure any designer or developer working from here on out would speak the same language. The more detail, the better. We chose to include everything from grid structures, typography, buttons, input fields, hover states and everything we felt the developers needed.

NAVIGATION

A main issue with the previous website was the navigation structure, which was a left-aligned system. Time and time again we heard from users who flat out did not like this and would get lost while navigating the site. When users get frustrated it leads to them exiting the site and going elsewhere. This seemingly simple change was one of the biggest upgrades we could make - and it was built to work on every device possible.

FINAL ASSETS

After months of iterations and fine tuning, our team handed off a completely flushed out website to the development team. This included built out designs and templates for every page on the website. Our developers were stoked - not only had we gone above and beyond to think out solutions, but we had included them in the process. This type of teamwork resulted in shipping design work that we knew our team could implement and develop.

Conclusion

With the launch of the new website we saw a sharp increase in important KPI's including a significantly higher conversion rate, higher average order value, and overall higher customer satisfaction among others. The updated website design was rolled out to not only our US site, but also globally to Japan, Korea, China, Australia, Europe and more.