THE CHALLENGE
WHO: The Northern Virginia Volleyball Association (NVVA) is a popular volleyball club in Northern Virginia. On this website, users can sign up for a variety of volleyball programs, view tournament schedules, and register for private training.
WHY: Having used this website for both myself and my younger sibling, I have struggled to perform simple actions such as signing up for private lessons. There is alot of content ot sort through, and some features do not even work properly. Clicking through multiple screens in order to find the content that I needed, resulted only in frusteration and a desire for better user interaction. I wanted to allow users to easily sift through all of the opportunities the NVVA website provides, in a clear and simple way, resulting in an easy and enjoyable user experience.
DESIGN QUESTION: How might we improve the experience of NVVA volleyball families using the NVVA website?
THE PROCESS
In order to complete my redesign, I utilized parts of a popular UX design process. This process is user-focused, and allows for the best interface design. For the purposes of this assignment, I only completed the define, ideate, and prototype phases. I decided to utilize only these parts of the process, as I was also tasked with coding the entire website.
DEFINE
IDEATE
PROTOTYPE
DEFINING THE PROBLEM
PAIN POINT #1
COMPLEX NAVIGATION
The current navigation system utilizes a global navigaiton with dropdowns and submenus. These submenus can be very long, making your search for a specific navigation item tedious
PAIN POINT #2
CLUTTERED PROGRAM SCREENS
When viewing the different programs that are offered by NVVA, it can be overwhelming to look at the current information screen. The register call-to-action button is at the top of the page, and does not stand out. This makes it difficult to easily register a player for the team. Much of the page real estate is also taken up by a video, which is placed in the center of the screen.
PAIN POINT #3
EXTENDED SCROLL
In order to view potential camps and clinics, users have to scroll through a very busy list of camp and clinic options. The long scroll makes it difficult to view all of the options quickly.
IDEATE
My ideation process took the form of synthesizing my finding into a few key points.
1.
Create a more efficient navigation.
NAVIGATION
1.
2.
CAMPS/CLINICS
Provide scannable camp and clinic signup options.
3.
PROGRAMS
Create intuitive
program signup flows.
PROTOTYPE
Once I synthesized the issues, I started to prototype.
PAIN POINT #1
COMPLEX NAVIGATION
In order to fix this issue, I decided to utilize a mega-menu for the "programs" navigation item. Mega menus are utilized when there is a lot of content in the navigation so that users are able to see all of their options without having to click the submenu dropdowns. I also moved the sign in and register buttons into the global navigation instead of under the primary navigation, so that users can access these buttons anywhere in the website..
LEFT IMAGE: Original NVVA Navigation. RIGHT IMAGE: My Improved Navigation
PAIN POINT #2
CLUTTERED PROGRAM SCREENS
To solve this problem I broke the screen up into a few different parts. I put the program description on the top left, because that is where the eye naturally starts. Next to the description, on the left, I put the location detail in a grey box. The grey box stands out and it provides a clear description of where/when the program takes place. Underneath this top section, I broke up the most important information segments into three parts, Tryouts, Practices, and End-of-Session Tournaments. This information is neat and the available to read without extensive scrolling. Underneath all of this information, I placed the spring and summer schedule followed by CTA's named "Register Here". These call-to-actions are placed underneath the corresponding schedules so that users are easily able to register their kids after reading all of the necessary information. Clicking the register call-to-action buttons is one of the primary site goals, so I wanted to place them in intuitive places.
PAIN POINT #3
EXTENDED SCROLL
In order to fix this problem, I decided to utilize a secondary navigation system. This system allows users to click through each of the camp/clinic options and read about them. Instead of having to scroll around in order to find the information, users are able to click through each tab and are presented with all of the information they need as well as a easy to find register buttons. As stated before, registering for programs and clinics is the primary goal of this website, so it is very imporant to make these CTA's available and easy to use.
CONCLUSION
In the future, I would really like to test my designs. I want to know what features users enjoy, and which ones could be improved. Testing my design would allow me to further develop my design skills, as it would provide me with a changes and ideas that could be used in future designs.