TVO and the NBA have collaborated in a multi-year partnership to create educational content for students in Ontario.
TVO Learn needed a responsive website to showcase the basketball-related learning activities for primary, intermediate, and high school students. Every Tuesday, a new mascot and its skill are revealed, and students can vote to choose its new name. There are six mascots in total. When the voting is over for one mascot, the name, learning activities, and biography are unlocked.
I worked based on the UX designer's wireframes.
On the second day after a review with the stakeholder I got an extra week to do some more layout concepts. I started to think more about the basketball theme such as tickets, ticker board, trading cards, and game graphics from live games. I also had time to think of places to add elements from the NBA style guide.
After getting feedback from my design manager, he mentioned that I could leverage some of the Illustration teams vast library of vector graphics. I was able to reconfigure some of the illustrations and adjust the background colors of the website to not compete with the colorful illustrations. The page went from a cool blue website to a colorful, fun page.
The UX user journey had changed and the voting section was made into a second page.
On the voting page, I adjusted some of the color and layout of the back of the trading card the illustrator sent me.
After the Teamwork mascot is voted on a section to new activities related to Teamwork is launched. A new mascot to vote on is available. The animated gif and mascot design was made by the illustration team.