About the Hollywood Dodgers
The Hollywood Dodgers Youth Organization’s (Hollywood Dodgers) mission is to bring out the best in youth through the development of social and athletic skills, as well as life-long friendships. Since our inception in 1958, the Hollywood Dodgers continue to develop integrity and character in our youth through participation in various social and athletic programs. It is estimated that over 3,500 boys and girls have been a member of the Hollywood Dodgers since our inception.
The organization provides many activities including basketball clinics and an annual Coaches Appreciation & Awards Night. Along with its sponsoring organization the Hollywood Dodgers Youth Organization also hosts the Hollywood Dodgers Las Vegas Invitational, an annual basketball tournament for boys’, girls’, and mens’ teams that is held in Las Vegas, Nevada each summer. The organization supports early basketball development through its Li’l Hoopsters Camp, a basketball clinic for 5 to 7-year-old boys and girls using a personalized instructional approach led by an experienced coaching staff and a 3 to 1 player-to-coach ratio. The Hollywood Dodgers participate in various basketball leagues sponsored by the Community Youth Council (CYC), South East Youth Organization (SEYO), Japanese American Optimist (JAO), and Nisei Athletic Union (NAU).
Roles
I assumed the following roles designing the website
User Experience (UX) Designer
Interaction (IxD) Designer
User Interface (UI) Designer
Visual Designer
Deliverables
High-fidelity interactive full website
UX/UI Design:
Competitive analysis
User surveys and one-on-one interviews
Personas
User journeys and task flows
Site map
Low-fidelity wireframes
High-fidelity mockups and prototypes
Design system and UI kit
Usability tests and findings
Project Specifications
Duration: 6 weeks
Tools:
Figma
Adobe Illustrator
Squarespace
Adobe Photoshop
Google Suite
Problems
An outdated website that has a lot of information not organized and making it difficult for users to find the proper information.
Little to no understanding of what the customer is paying for.
Too much time is dedicated to finding something, only to discover that it’s not available.
Proposed Solutions
A complete redesign that simplifies the information through information hierarchy and proper use of a grid layout.
Reconstruction of the navigation bar
Create a space for users to find the correct landing page and direct them to the correct channels.
By creating a simpler website, users might have an easier time finding information for specific events, rather than having to send emails and calls to get where they need to be.
Research
My research first centered around the competition space in order to understand how other websites are addressing similar issues. More than 100 user survey responses would help quantify what customers are paying for, and what they’re hoping to resolve. And lastly, one-on-one interviews would help me understand users’ journeys and specific issues the website would need to address.
Findings
Some websites are just as old and have the same issues.
Users averaged 5 paid subscription services per month and indicated a high level of frustration with the lack of transparency.
Concerns ran the gamut: from a simple lack of understanding (“I don’t know what I’m paying for”) to a strong desire for better management (“I want to optimize what I’m paying for”).
Finding the right programming to watch was an issue for all, but for different reasons.
Getting Closer to User-Centered Design
Superficially it might seem that everyone is interested in the same thing: applying to the LVI tournament, camps, and leagues, … but upon closer inspection the user research made clear that there were divergent motivations.
Creating personas helped bring some clarity to those divergences, which would become important reference points as functions developed.
As research and design proceeded, I focused primarily on two personas because they represented heavy emphasis on two key functions: registering and understanding the rules and instructions; and reliance on the website’s navigation bar to help guide users to the proper destination.
Defining Key Differences in Motivations Through Personas
Exploring Common Tasks in Order to Heighten User Empathy
By creating and exploring the journey maps of two personas and their typical tasks, I uncovered key emotional/procedural moments that the Hollywood Dodgers needed to address. The anxiety someone might feel, for example, if they’re intimidated about registering for the tournament. Or the dread a parent might sense when they misunderstand the process. To ensure the website’s stickiness, it would need to overcome these problems … and not introduce new points of friction.
Creating Structure
This site map, informed by surveys and interviews, organizationally depicts the three key task streams that the high fidelity prototype would focus on: 1. Onboarding and registration, 2. Management, and 3. Selling of the t-shirts and other merchandise. The framework the site map provides, along with the user insight collected thus far, would guide design decisions moving forward.
Visualizing a User-Centric Experience
Rapid sketching allowed me to explore design patterns common among websites in the competitive landscape, helping me understand which needed to carry over into Hollywood Dodgers to ensure familiarity. This also helped identify screen types that could serve multiple functions, as well as mobile swiping/touch gestures that would likely be the most intuitive.
Understanding What Users Find Intuitive, and Why
Low-fidelity prototype testing allowed me to better understand how users expected to complete the tasks I was focusing on. By studying users clicks and scrolls — and more importantly, having a dialogue with them about what they expected and when — I knew which adjustments needed to be made to lay the foundation for a more fully realized high fidelity prototype. Small details such as actionable and consistent iconography, and consistent paths to get back, would become important elements of the design system.
Surfacing New Issues
The high-fidelity prototype brought test users closest to the real experience yet, and it revealed some issues. While users were able to complete the registration experience, the realistic nature of it revealed some apprehension. Information, on what happens if they are new to the tournament and needed to complete a task before … these were among the topics raised by test subjects. They were also able to verbalize a need they hadn’t thought of before this iteration: Could the website somehow visualize the value they are receiving from participating in the league, tournament, or camps — yet another piece of information that could empower them to make better decisions about what makes sense.
Establishing Visual Design
Visually articulating all potential aspects of the Hollywood Dodgers brand (product, as well as marketing and beyond) meant defining a baseline design system that identified key elements of its visual vocabulary. I wanted the Hollywood Dodgers visual design to always refer back to its core mission: to bring out the best in youth through the development of social and athletic skills, as well as life-long friendships..
Predominantly red palettes with a sense of calm and control; simple button states and clear iconography would help make tasks feel more manageable; and a single, modern sans-serif with large, open counters ensured legibility and clarity in messaging.
How Usability Might Be Improved
Issues to Address for Longer-Term Development
More advanced filtering functions to fine-tune viewing options based on available events.
New measures to analyze the “value” of an event, e.g., the ratio of positively reviewed events to other events/locations, or the types of events.
Greater data visualization to aid in event decision-making.
Prompts to encourage providing data that would improve users’ experience (e.g., “Please rate the 5 leagues you participated in.”)
Algorithms specific to one’s needs that can recommend other events around the area.
Clearer confirmation messages that the APIs are actually managing.
What I’d do differently next time…
I went into this project assuming the website would only provide a single function: to help users register for an event put on by the Hollywood Dodgers. I learned very quickly, however, that users needed information they didn’t have access to, in order to make those decisions.
Focus from the beginning. I was so excited to start this project that I “may” have jumped the gun. Thinking of all the possibilities we could design and develop. Thinking at 100 mph early on got me into a lot of trouble and I had to stop and rethink things. I realized that taking baby steps from the beginning was the best way to develop this website to produce the best results.
Be insightful- not process-driven. Despite weeks of research + development, my first version of this case study was full of unnecessary text, and instead of tying everything into the bigger question- “so how does this fit into the bigger picture”? Hence, I made the decision to cut down the copy by more than 60% and focus more on the major points of this project. Hence, going forward we believe focusing more on the insights will improve my storytelling abilities for others.
You didn’t fail- you just found 100 ways that didn’t work. From noticing mistakes in our process to uncovering more foundational UX problems in our website, I am very thankful to have constantly asked for feedback from my peers. In the end, my partner and I pushed to have the website to be as amazing as we could have ever imagined!
People search for things to watch in many different ways, and if those variables are available for filtering purposes, they would rather have more, not less options.