The WNBA asked us: “How can you imagine the WNBA leveraging its existing digital infrastructure to further drive fan engagement? 

My team aimed to develop a new onboarding experience in the WNBA mobile app that enables the user to focus the WNBAs wealth of content into a personalized and unique experience. 

Project Type
Cross-Functional Hackathon
UI Designer, Slide Designer

24 Hours
3 UX Designers, 3 Web Developers, 3 Data Scientists, 1 Digital Marketer

We aimed to build a solution that could aggregate the WNBA's network of content, bringing value to our end users by creating a customized experience and showing them exactly what they want to see.


A brief onboarding flow to let the user select the teams and players whos content they are most interested in seeing.



Custom Feed

Once the user's preferences have been established through the onboarding process, they have access to an aggregated newsfeed of custom and personalized content.



The personalized content extends into the "Watch" section, allowing the user to see videos and access live chat based on their selected teams and players. 



Interdisciplinary Hand-Off

As an interdisciplinary team with a 24-hour deadline, it was essential that all tasks be delegated to different group members. Since I generally gravitate towards being involved in the "big picture" planning of a project, I instead decided to take a hard left and challenge myself by relinquishing control and instead concentrating purely on UI Work.

This would turn out to be a valuable lesson in working in a more focused and defined role where the baton is passed from one teammate to another

My Tasks

Asset Collection, UI Design, Dev Handoff, Presentation Design 

Style Guide by Nick Grottick, Hayshal Hasibuan and Leo Tolstikov

Style Guide

Dividing the Work

While the planning team worked on establishing the vital ingredients required to generate solution sketches for the hand-off, I was part of a 3-person team tasked with analyzing the WNBAs current online presence. 

Our Team's Goal

Our goal was to pull assets from their desktop site and current mobile app to create a style guide that we could work from that was consistent with their branding. 

Solution Sketches by Hayshal Hasibuan


Our Solution

Our solution was to create a brief onboarding screen that would allow for the WNBA's wealth of online data to be aggregated into custom news and video feeds based on the user's team and player selections. 

Our Workflow

As the planning team handed off sketches one by one, I was able to start designing grayscale wireframes. Since the style guide was already completed, I was able to pull colours and assets immediately, enabling me to turn around Hi-Fi designs with extreme efficiency.


Hi-Fi Screens



What was the biggest hurdle in this project?

At first, it was not easy for me to work on designs I did not conceive of myself since some aspects I may have done differently. However, given the time frame and scope of the project, I decided it best to have faith in our team's design decisions so I could pour my heart and soul into making their concepts come to life.

In the end, I am glad I made that decision as I am quite happy with the final result and the lessons that came out of the experience.

What did I take away from this project?

Unlike my previous projects where there was enough time to put my fingerprints on every facet of the design process, this project did not afford that luxury. This was my first experience working on one component of a larger design project which taught me how to work in a team with defined roles and interdisciplinary hand-offs.

Final Thoughts

There were many times throughout this project when I felt overwhelmed and had serious doubts as to whether I'd be able to complete my assigned tasks. 

Luckily, I had a great team that was able to jump in and help at a moment's notice.

My key takeaway here was that it is vital to put ego aside and communicate with your team when experiencing difficulty.

Contact:  Email  / Linkedin
© 2023 Nick Grottick - All rights reserved.