TVO Learn & NBA Partnership
TVO and the NBA have collaborated in a multi-year partnership to create educational content for students in Ontario.
client
TVO
Design tools
Figma,
Adobe Creative Suite
Role
Art Direction,
UI Design
type
Responsive Website
challenges
Creating a design that will be appealing and simple for both primary and high school students.
Design a layout that could be templated for each mascot reveal and lesson page launch.
Organize assets for weekly page launches and rearrangement of layouts for mascot reveals.
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
First Round of Concepts
I had two days to design two concept layouts for three pages. I worked based on the UX designer’s wireframes. The first concept was directly using the two column layout from the wireframe and then I eventually explored different layouts.
I was provided with illustration team’s final concept of the first mascot to add to my work in progress.
Second Round of Concepts
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
Launch Phase 1
The final concept was inspired by elements of a basketball game like ticker stats, vintage trading cards, and an arena scoreboard.
I was able to leverage some of the Illustration teams vast library of vector graphics. I composited some of the illustrations and adjusted the background colors of the website to not compete with the colorful illustrations.
If small layout or UX changes happened, I designed the assets such as gallery or voting UI to be styled in a way that wouldn’t look out of place if it got moved to another page.
After working on the initial designs the user journey had changed and the voting section was made into a second page.
I designed layouts that could be templated and not be a dramatic layout change for each mascot and lessons for grades 1–12.
Landing Page
Voting Page
Voting Section UI
The voting backboard was inspired by the arena scoreboard. I added the detail of Live and off-air when the poll is closed.
Animation
To keep the page interesting, small animations were added. I was inspired by the lower thirds during televised basketball games. The ticker on the website displayed new announcements on the page such as “Check out our new activities” and “Vote for the new mascot”.
The illustration department provided a waving character gif for every new mascot to be voted on.
Launch Phase 2
Mascot Bio Page
After the Teamwork mascot is vote ended, a mascot bio and activities for four grade levels pages are launched.
Junior Level
Each grade level page is templated to have only the banner illustration and card gallery link change.
