WINNING WITH
CONTENT
the NCAA.com redesign story
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
!
Hi I am Klemen...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
As I said Prodigious amount of photos of Thor
But he is not here ...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
AGENDA
• Definition of UX Strategy
• The NCAA Example & Solution
...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
UX STRATEGY?
A Process of Aligning the User Experience to the
Bus...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
SMART BUSINESS GOALS
• Simple
• Measurable
• Attainable
• Relevan...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
SEASONS
CHAMPIONSHIPS
DIVISIONS
Who is the NCAA? they cover 3 sea...
FLEXIBILITY
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
SOLVE FOR
Flexibility becomes the guiding principle t...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
150x300
300x300 300x600 300x900
600x600 600x900
900x1200
900x900
...
Klemens Wengert

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

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

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

klemens.wengert@turner.com | @kwengert1
LAYOUT SAMPLES
so here are all the different sizes, but as we all...
Klemens Wengert

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

klemens.wengert@turner.com | @kwengert1
But what about other devices? Cover the eco system problem - a ev...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
Example of the mobile site for the NCAA and the mobile app:
By cr...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
Example of how your coworkers can invent new ways of using the co...
ACCELERATE

INNOVATION
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
You heard Kelly and Julie talk about the c...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
WHY IS THIS IMPORTANT?
it will also Increases the velocity of the...
Klemens Wengert

klemens.wengert@turner.com | @kwengert1
KEY TAKE AWAY
Think content first to future proof

Modular conten...
Klemens Wengert

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

klemens.wengert@turner.com | @kwengert...
Upcoming SlideShare
Loading in …5
×

Winning with modular content, the redesign story of the NCAA - UX Strategy Summit 2014

378 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
378
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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
  • grid example
  • Winning with modular content, the redesign story of the NCAA - UX Strategy Summit 2014

    1. 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. 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. 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. 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. 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. 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. 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. 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. 9. Klemens Wengert klemens.wengert@turner.com | @kwengert1 LAYOUT SAMPLES grid example
    10. 10. Klemens Wengert klemens.wengert@turner.com | @kwengert1 LAYOUT SAMPLES resized grid example
    11. 11. Klemens Wengert klemens.wengert@turner.com | @kwengert1 LAYOUT SAMPLES resized grid example
    12. 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. 13. Klemens Wengert klemens.wengert@turner.com | @kwengert1 show of the different modules and how the page was constructed
    14. 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. 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. 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. 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. 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. 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. 20. Klemens Wengert klemens.wengert@turner.com | @kwengert1 THANK YOU Klemens Wengert klemens.wengert@turner.com | @kwengert1 QA

    ×