TVO Learn & NBA Partnership
Responsive Website
•
Visual Design
TVO and the NBA have collaborated in a multi-year partnership to create educational content for students in Ontario.
client
TVO
challenges
Creating a design that will be appealing to primary and high school students.
Communication.
Multiple delays in the launch.
My Responsibilities
Design a multi-page responsive website showcasing activities for primary, intermediate, and high school students. Pages include: landing, voting, activity pages for three education levels, and mascot bio page.
Easy access to assets organized and available for developers and marketing graphic designers.
Concept Work
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 had two days to design two layouts for three pages. I worked based on the UX designer’s wireframes. I had a mascot illustration done by the illustration team to add to my concept.
Yay! I got more time to design
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.
Final Design: Phase 1
Landing Page and Vote
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 composite 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.
I designed a layouts could be templated and not a dramatic layout change.
If small layout or UX changes happened, I designed the assets such as gallery or voting to be styled in a way that wouldn’t look out of place if it got moved to another page.
Phase 2
Landing Page and Vote
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.
