David O'Brien - UI / UX Designer

Website Redesign

Final Product

Overview

The Client USA Dodgeball is an organization that promotes and develops the sport of dodgeball across the United States; they host tournaments across the country and organize the national team representing the United States in the World Dodgeball Federation to play against teams from around the world. USA Dodgeball aims to unite the nation under a governing body that gives a voice to many individual dodgeball organizations who share the goal of developing and promoting the sport of dodgeball.

The Challenge The website was difficult to navigate and confusing for players looking for direction on how to register for tournaments and find information on rules and regulations related to dodgeball. Due to the disorganized user interface of the previous website, member use and satisfaction was low. USA Dodgeball needed a redesign of their website to better support the player community with information about USA Dodgeball, including their Premier Tour, Team USA, and individual dodgeball organizations.

The Process To start the website redesign, I evaluated the website and noted what worked well and what needed improvements. After compiling my list of website optimizations, I pitched the ideas to current USA Dodgeball players for more insights. Through this process, I learned more about their current frustrations with the existing website, as well as what they would need to see in a new version to convince them to visit the site regularly.

After conducting research in the dodgeball community, I generated a user flow chart based on the average player’s needs, and from there I sketched multiple wireframe options for the design of the website. I then utilized Adobe XD to generate mock-ups of the different pages within the website to create working prototypes for both the desktop and mobile versions.

Once the designs were completed and approved, I then developed the website using Webflow. Utilizing the CMS and easy editing functionality, the website can be easily updated by the client themselves.

Outcome The redesigned USA Dodgeball website has been optimized to meet the needs of the players, with improvements made to the aesthetics and functionality. With the addition of the new Premier Tour section, players of those tournaments now have a reason to visit the website regularly so they can stay up to date on tournament updates. The new website design allows players to quickly navigate via clear CTA buttons, improved text hierarchy, and better imagery that pops off the page, while resolving the current frustrations of USA Dodgeball members.

Role UI/UX Designer, Developer

Programs Used

Adobe XD

Photoshop

Webflow

Final Product

Website Prototype

Home Page

The home page design has been improved to be both visually appealing and easy to navigate to entice viewers to spend more time on the site.
The new navigation bar and header text clearly stand out on the page, helping users better maneuver the different site options.
The home page featured image has been replaced with an action shot of a player with a darkened background to add contrast for more visible text.
I added a call to action button, Play Dodgeball, so players can easily navigate to the Premier Tour section.
Below the header graphic, I replaced the hectic photo collage with individual sections, including titles, concise paragraphs, call to action buttons, and singular images of dodgeball players.
At the bottom of the home page, I included a section where users can quickly register as a USA Dodgeball member at the click of a button.

Premier Tour

A new section of the website, the Premier Tour houses everything a player would need to play dodgeball.
All of the tournaments that USA Dodgeball hosts are listed here, along with the steps to register.

Mobile Design

The mobile version of the website has been designed to look and feel like a native app.
On the home page, I shifted the items within the desktop version’s navigation bar to be large buttons that were more mobile-friendly for navigating the site.
I included a bottom navigation bar that sticks to the screen for easy navigation to the home page, Premier Tour, Shop, and the user’s account.

About Us Changes

The About Us page now includes Membership, which had previously fallen under the un-related Member Organizations page, making it difficult for players to find.
I added links for the different subcategories to the About Us page, as they previously were only accessible through the navigation menu and they were not housed on any section, making the nav bar the only method of finding subcategories.
For all of the USA Dodgeball resources to be accessible on one page, the downloadable official logos were moved from the Events page to the Resources page.