This presentation was given at UX strategy summit 2014 in San Francisco and tells the story of why the modular frame work for the NCAA.com was created what the advantages of the framework is and what lessons can be taken from the redesign.

1. WINNING WITH
CONTENT
the NCAA.com redesign story
Klemens Wengert
klemens.wengert@turner.com | @kwengert1
!
Hi I am Klemens,
I work for Turners internal consulting team on all of the Turner Brands CNN, CNN Money, TBS, TNT, etc.
I also work support the HCI program at GA Tech, and UX Mentors
!
Lets first go over what the NCAA is and what its relationship is with Turner
!
As you can see that is my picture down there and of course I would like to continue the conversation on twitter or email. however, if you follow me you will
see a lot of UX rants and A LOT of pictures of my son Thor (because I am one of those )

2. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
As I said Prodigious amount of photos of Thor
But he is not here just to delight me and hopefully you, research indicate… that his presence will get you to rate this presentation more favorably :-)

3. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
AGENDA
• Definition of UX Strategy
• The NCAA Example & Solution
• Accelerating the Innovation of Your Team
• Key Take Aways
• Q+A
So lets go through the agenda

4. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
UX STRATEGY?
A Process of Aligning the User Experience to the
Business Strategy
What is UX strategy, it is a way of developing guiding principles for UX that support the business strategy.

5. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
SMART BUSINESS GOALS
• Simple
• Measurable
• Attainable
• Relevant
• Tim Bound
How do you write smart business goals if you do not get any from your business team

6. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
SEASONS
CHAMPIONSHIPS
DIVISIONS
Who is the NCAA? they cover 3 seasons over 30 sports in 3 divisions with mens and women's series for 1300 schools. the content is wide.
!
Stakeholder interviews:
Business wants - Sponsorship and traffic generation
Editorial wants - Pigeonholed in the a layout, no champs, sports, schools
Design wants - More consistency and a better design framework

7. FLEXIBILITY
Klemens Wengert
klemens.wengert@turner.com | @kwengert1
SOLVE FOR
Flexibility becomes the guiding principle that solves the problems for all groups.
The Content blocks big idea is to adapt to the space that is given.
Business team gets their sponsorship ops in there, the editorial team can rearrange the layout at any time, design team can focus on creating more content
tiles instead of making one offs.

8. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
150x300
300x300 300x600 300x900
600x600 600x900
900x1200
900x900
150x
150
TILE SIZES
All content types such as articles, videos scores schools etc. that are featured on NCAA.com needs to exist in a multitude of different sizes. to be able to
be rearranged

9. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
LAYOUT SAMPLES
grid example

10. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
LAYOUT SAMPLES
resized grid example

11. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
LAYOUT SAMPLES
resized grid example

12. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
LAYOUT SAMPLES
so here are all the different sizes, but as we all know wireframes do not make for great presentation material, so lets look at what the system looks like
when our friends in visual design have taken a pass.

13. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
show of the different modules and how the page was constructed

14. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
But what about other devices? Cover the eco system problem - a ever expanding system of devices and consumption processes
at this conference you see people with glass, pebbles, smart watches and phones of every size.
there will be more devices. and for this you again need flexibility.

15. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
Example of the mobile site for the NCAA and the mobile app:
By creating a system that helps display the content you increases the velocity of all parties as they can focus on solving for the device of channel as
opposed to setting up a system.
this sets the brand up for a future where they can provide designs for the next device, whatever it may be.

16. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
Example of how your coworkers can invent new ways of using the content in different ways. this is a application of the NCAA content blocks used inside of
the March Madness on Demand Apps.

17. ACCELERATE
INNOVATION
Klemens Wengert
klemens.wengert@turner.com | @kwengert1
You heard Kelly and Julie talk about the cross functional teams this morning
here is where it comes together. If you focus on creating a system inside of which the content lives you are empowering your coworkers to invent new ways
of using the content.

18. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
WHY IS THIS IMPORTANT?
it will also Increases the velocity of the team as they are mor connected to the product. You unlocks creativity of the team and it sets the brand up for a
future next device

19. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
KEY TAKE AWAY
Think content first to future proof
Modular content increases team velocity
Control the system not the usage
recap

20. Klemens Wengert
klemens.wengert@turner.com | @kwengert1
THANK YOU
Klemens Wengert
klemens.wengert@turner.com | @kwengert1
QA