![computer screen.png](https://static.wixstatic.com/media/89abfd_a0e090e9bf864d418b156f744d18df03~mv2.png/v1/crop/x_0,y_500,w_4500,h_3500/fill/w_765,h_595,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/computer%20screen.png)
Pickleball
Tournament
Summary
Pickleball is my favorite sport and a big "dill" in my community. I love playing on the courts and against other people. This case study is real, and everything was created by me or with the help of AI. The reason I wanted to create a pickleball tournament was to draw more people out to the courts and get players excited. Having played in and alongside others in tournaments, I know exactly how frustrating it is to sign up in person or read through confusing tournament websites. That is why I wanted to create my own website. I had a quick turnaround of three days to get the website live, starting from scratch.
Also yes, I am playing in my own tournament while also, directing it.
![Screenshot 2024-02-14 075810.png](https://static.wixstatic.com/media/89abfd_1a0ce2782bfe43b1a33359db489049e4~mv2.png/v1/crop/x_79,y_0,w_3049,h_1716/fill/w_718,h_404,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%202024-02-14%20075810.png)
Project Timeline
Information Planning
Competitor Research and Analysis
Participant Research
Tournament Planning
Wireframes
User Testing
Website Launch
Marketing Research
Brand Creation & Event Planning
My Role
Timeline
Website: Feb. 12-14
All Tournament Materials: Ongoing
Project Type
Responsive Website(Mainly Mobile)
Real Project
My Role
User Research, Research Analysis, Usability Testing, Wireframing, Brand Creation, Graphic Design, and Tournament Director
Team
Solo project with some guidance from senior tennis players
Tools
Figma, Photoshop, Illustrator, Google Gemini, Google Forms, Mural, Whimsical, and Miro
![Pickleball Logo Front PNG.png](https://static.wixstatic.com/media/89abfd_5800a44d80a14a68b686079f8a915fed~mv2.png/v1/fill/w_304,h_369,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Pickleball%20Logo%20Front%20PNG.png)
Topic Selection
I am a part of a great pickleball community in my hometown. I love playing with other people, but if there isn't a tournament, its hard to get people to consistently come to the courts. My goal was to bring more people to the courts and get players excited to compete.
I had the time, knowledge, and support to host the tournament, but I also wanted to play in the tournament. This meant I had to be able to create a website, so that I would not have to be as hands on the day of the tournament. This biggest priorities are information, registration, sorting teams into pool play, and creating a tentative schedule for the tournament.
Information Planning
I have never hosted a thing in my life. Much less an entire tournament. However, I have played in tournaments and had access to talk to senior tennis players who commonly played in tournaments around the states.
I planned for the tournament to be the next month, so I only had around 3 days to get the site live for people to register. The first thing I always do is write my goals and all info I know about the project.
The first thing I had to do was find an organization to donate to. This was easy. My parents are teachers for the local elementary school, and work everyday to help the children learn and thrive. I was able to get in touch with the principal and discuss what the donation money would be put towards.
My thought "organization" and create a set of deliverables
Goals
-
Inform potential players about the tournament
-
Raise money for local elementary school
-
Get people to register for tournament
Main Deliverables
-
Tennis Court Info on who serves first
-
Tennis Court Number Markers
-
Mock Bracket
-
Real Bracket for Tournament Day
-
Tentative Schedule
-
Logo
-
Article about the Cause
-
Payment Information
-
Score Cards
-
Trophies
-
Tournament General Info
-
Terms of Agreement Papers
-
Registration Form
-
Google Form
-
Ranking quiz to sort teams into pools
-
Competitor & Participant Research
Main Pain Points of Local Tournaments
![](https://static.wixstatic.com/media/89abfd_60da8203264d4d138ba176a7142eaafb~mv2.png/v1/fill/w_116,h_129,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_60da8203264d4d138ba176a7142eaafb~mv2.png)
All of the bad teams were sorted into one pool, so we had some preteens get slaughtered in a semifinal that they didn't belong in.
![](https://static.wixstatic.com/media/89abfd_dbe9d46c6b1c475591b432a25ce78085~mv2.png/v1/fill/w_117,h_117,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_dbe9d46c6b1c475591b432a25ce78085~mv2.png)
I didn't sign up because I didn't know if the tournament would last all day.
![](https://static.wixstatic.com/media/89abfd_dbe9d46c6b1c475591b432a25ce78085~mv2.png/v1/fill/w_117,h_117,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_dbe9d46c6b1c475591b432a25ce78085~mv2.png)
I paid $25 for a tournament and only got to play 2 games.
![](https://static.wixstatic.com/media/89abfd_94a0fd2101d249ed99bebbb1f48239b1~mv2.png/v1/fill/w_117,h_117,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_94a0fd2101d249ed99bebbb1f48239b1~mv2.png)
The tournament heavily relied on seeing the tournament director between games and for info.
![](https://static.wixstatic.com/media/89abfd_3f5d83a9a4a44c739205d60f0be93350~mv2.png/v1/fill/w_101,h_117,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_3f5d83a9a4a44c739205d60f0be93350~mv2.png)
It's such a hassle to meet up with the tournament director and turn in the registration, money, and waiver, in person.
![](https://static.wixstatic.com/media/89abfd_3f5d83a9a4a44c739205d60f0be93350~mv2.png/v1/fill/w_101,h_117,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_3f5d83a9a4a44c739205d60f0be93350~mv2.png)
Everyone constantly asked the tournament director questions. It was so unorganized.
My Solutions
-
Pool play and ranking quiz to have pools with varying levels of skill level
-
Within pool play, each team would play best (2/3) so people get their moneys worth.
-
Creating a tentative schedule so players could plan their day
-
Have all info on the website and create printout for the day of the tournament.
-
Registration, waiver, and certain payments could be done online
Brand Creation & Color Palette
To entice users to play, I needed to create a "brand" people would remember. I really didn't have enough time to create my own logo from scratch, so I used AI with Google Gemini.
Prompt:
"Create a cartoon image of a pickle holding a pickleball paddle. Also, have a bite taken out of the pickle."
![Screenshot 2024-02-29 154541.png](https://static.wixstatic.com/media/89abfd_da935f69c993453ca6db17003f93bbc2~mv2.png/v1/fill/w_268,h_261,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%202024-02-29%20154541.png)
![Screenshot 2024-02-29 154541.png](https://static.wixstatic.com/media/89abfd_da935f69c993453ca6db17003f93bbc2~mv2.png/v1/crop/x_500,y_477,w_468,h_487/fill/w_258,h_268,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%202024-02-29%20154541.png)
![Pickleball Logo JPG.jpg](https://static.wixstatic.com/media/89abfd_bcb605d1d92c411798846bfa38356a31~mv2.jpg/v1/crop/x_26,y_438,w_2508,h_2424/fill/w_252,h_244,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Pickleball%20Logo%20JPG.jpg)
Personas
Conclusions
After doing all the research I determined two main things. The first is that this feature would be a great asset to help users get better recommendations and have access to smarter searches.
At first, my main goal was to cater to those who knew at least a little about AI, but after creating the personas, I realized that this feature should be easy enough so that anyone could use it.
The second thing I discovered is that it needs a clean and simple look. It took a bit of time to get the interview participants to understand what my idea was.
Because no other streaming services are capitalizing on AI, it could do really well in drawing in new subscribers.
Task Flow: Removing a Search
![task flow 1.png](https://static.wixstatic.com/media/89abfd_3ea62607968b406aaecb41cdc7171983~mv2.png/v1/fill/w_982,h_52,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/task%20flow%201.png)
Mid Fi Wireframes
Because Max already has an extensive UI library, I went ahead and put in a lot of those things which created a hybrid of low fi and mid fi wireframes.
![Saved Searches Flow Lo Fi.png](https://static.wixstatic.com/media/89abfd_d9c430d95c394ed69b96f5286222b6ad~mv2.png/v1/fill/w_302,h_403,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Flow%20Lo%20Fi.png)
![Results Page Gal Gadot Lo Fi.png](https://static.wixstatic.com/media/89abfd_dd805d8a98e8426faa44e12ac2162baf~mv2.png/v1/fill/w_302,h_292,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Results%20Page%20Gal%20Gadot%20Lo%20Fi.png)
![Saved Searches Hub Lo Fi.jpg](https://static.wixstatic.com/media/89abfd_f7f21b0440804fcaa344cf217299b1a1~mv2.jpg/v1/fill/w_300,h_213,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Hub%20Lo%20Fi.jpg)
High Fi Wireframes
Because Max already has an extensive UI library, I went ahead and put in a lot of those things which created a hybrid of low fi and mid fi wireframes.
![Saved Searches Flow.png](https://static.wixstatic.com/media/89abfd_df21c38c424a4d278cf3be7fc5bba0c2~mv2.png/v1/fill/w_298,h_431,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Flow.png)
![Results Page Gal Gadot.jpg](https://static.wixstatic.com/media/89abfd_7c86b45e3a57488a9c9c134ddc02dfc4~mv2.jpg/v1/fill/w_303,h_293,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Results%20Page%20Gal%20Gadot.jpg)
![Saved Searches Hub High Fi.jpg](https://static.wixstatic.com/media/89abfd_40bcc9db6f9d4738969b5dfe074726e9~mv2.jpg/v1/fill/w_302,h_215,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Hub%20High%20Fi.jpg)
Main Iterations
Iteration 1
Iteration 2
![AI Landing Page lo fi wireframe.png](https://static.wixstatic.com/media/89abfd_b9fbc3ffaf6543ee9abd4e40c559a1e2~mv2.png/v1/fill/w_468,h_333,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/AI%20Landing%20Page%20lo%20fi%20wireframe.png)
![Saved Searches Flow Lo Fi.png](https://static.wixstatic.com/media/89abfd_d9c430d95c394ed69b96f5286222b6ad~mv2.png/v1/crop/x_0,y_0,w_1440,h_1034/fill/w_458,h_329,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Flow%20Lo%20Fi.png)
Originally, I had visualized a chatbot to do the AI, but after talking with my mentor and others, I realized it would not be easy to use. Going back to my personal personas, I wanted to make it much more simple to be able to target all users.
With the chatbot, I had also envisioned users being able to view a short tutorial to understand how to use it. With the new revision, a tutorial was not necessary and was instead replaced with the "You can try" section. This way users can easily understand what to do within seconds and move on.
Prototype
This Prototype shows the flow of using the "add listing" feature from the navigation bar.
![](https://static.wixstatic.com/media/89abfd_71915dd1deb844afb2916ff5efb7a9dcf000.jpg/v1/fill/w_639,h_341,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/89abfd_71915dd1deb844afb2916ff5efb7a9dcf000.jpg)
Key Screens
Toggling Search
By clicking on the AI Icon, in the search bar, users are taken to the AI search function. Users can see what search feature they are on, by seeing which icon is highlighted in white.
![](https://static.wixstatic.com/media/89abfd_df21c38c424a4d278cf3be7fc5bba0c2~mv2.png/v1/crop/x_0,y_0,w_1440,h_1592/fill/w_542,h_599,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/89abfd_df21c38c424a4d278cf3be7fc5bba0c2~mv2.png)
Tutorial & History
New users can quickly see an example of how to use the AI feature by looking at the “You can try” section. It also lists the top two most recent searches that the user looked up.
Saved Searches
The dots can be clicked on to remove or refresh the saved search. Refreshing the search will update the saved search to include any new movies or shows Max might have added.
Users can scroll to see recommended content.
Users are able to view their saved searches. This is helpful for users who want to remember the specific results that showed up from their search prompt. By clicking on the box, they can view the entire search results page, or they can click on an individual movie/show to immediately stream.
Saved Searches
The cards function as they do on the previous page. This page is for users who have many saved searches and want to be able to quickly scan everything they have saved.
![Saved Searches Hub High Fi.jpg](https://static.wixstatic.com/media/89abfd_4506d1df277941fd9fc3a40f3321309c~mv2.jpg/v1/fill/w_546,h_388,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Saved%20Searches%20Hub%20High%20Fi.jpg)
Filter
The filter icon allows users to sort alphabetically, most recent, and oldest.
Recommended Content
Based on the prompt, users can expect to see at least one category to show up. The first category is what the AI identifies as the best matching result.
The other categories are created with similar content the AI thinks the user might be in
![](https://static.wixstatic.com/media/89abfd_7c86b45e3a57488a9c9c134ddc02dfc4~mv2.jpg/v1/fill/w_553,h_535,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/89abfd_7c86b45e3a57488a9c9c134ddc02dfc4~mv2.jpg)
Save Search
Users can click this CTA to save the search. After activation, it will turn white. Users can also unclick it to take it out of their saved searches.
Usability Test Results & Iterations
Testing was conducted by 5 different participants. All participants were able to easily understand how the feature worked and had little critique. All users said that they could definitely see themselves using this feature on any type of streaming service.
The only problem that occurred in testing was finding the new feature from the Max landing page, after logging in.
With this problem in mind, I created a small bubble to show users this new feature they could check out.
Max Landing Page
![Frame 11.png](https://static.wixstatic.com/media/89abfd_8d9777a371614a168fca83aa2e6c7dbd~mv2.png/v1/fill/w_439,h_254,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Frame%2011.png)
There should be a button or popup box to show me where to go
![Person 1_edited.png](https://static.wixstatic.com/media/89abfd_60da8203264d4d138ba176a7142eaafb~mv2.png/v1/fill/w_100,h_112,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Person%201_edited.png)
Max Search Page
![Frame 13.png](https://static.wixstatic.com/media/89abfd_2d1a8f1be74c4367a3a832edbc69560c~mv2.png/v1/crop/x_0,y_0,w_1440,h_840/fill/w_429,h_250,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Frame%2013.png)
Conclusion
This feature was well responded by users. All participants said that they could definitely see themselves using a feature like this in any of the streaming services they use.
All but one participant had never used AI, but they liked how simple it was to figure out. They thought the feature was simple enough for anyone to use.
By helping people be able to search and get better recommendations, users would be more inclined to use one streaming service over the other.