Iterative Design101 #psuweb 2014


Published on

The web is this magical place where everyone has opinions on what isn't working and why. The call for website (and, let's face it, primarily homepage) redesigns comes from all sides at the most inopportune times. Instead of embarking on a massive project where scope creep and HIPPO's will eat your soul, start making small, goal-oriented, data-driven changes to content and IA. The results may surprise even the most vocal of HIPPO's.

Published in: Design, Data & Analytics, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • We put more emphasis on the tabs, relocate the navigation formerly known as the big buttons on the left side, and make sure social media takes a prominent place in the F-pattern.

    Via analytics we see some improvement in the use of those nav items next to the slider, but a marked increase in clicks to our social media links. We want to continue to improve interaction with those action items since they move prospects further down the admissions funnel. Ok, so let’s try another small change.
  • Let’s make the slider/nav primary, move the social media links elsewhere in the F, and put the actionable links at the top of the F. This lets us test if the social media links were successful due to placement or simply because they’re social media.

    So far we’re just trying to hit the goal-completion high-notes. We’ve focused on low-hanging fruit.
  • So analytics said that link placement wasn’t working out nearly as well as we’d hoped. Since it was a highly successful placement for the social media links, we’ll stick those back up there. We’ll adapt the slider to be more “selling outcomes” oriented, and put an accordion menu on the left nav that provides clear and comprehensive navigation options while cleaning up the clutter versus the original.
  • As you can see, this whole process is about learning as you go and making changes for reasons based on goals. REASONS. If it doesn’t work, do something else.

    Data. Data. Data. Keep collecting, comparing, and going back to the data.

    You can’t predict what the final result is going to be. You can only make small course corrections. The “final” thing is the result of the process. – Lori Packer
  • I’m going to expand this a bit…
  • My addition: The web is never final. Always be iterating.
  • Helpful Links mega menu.

    The wall of links here is called “Resource Links”, and the dark blue toolbar is labeled “Online Tools” in our analytics reports.
  • Event tracking results across mobile, internal, external, and all traffic for 8 months.
  • Positive anecdotal feedback. Gathering data for further iterations. Gathering mobile data that’s actually useful.

    Improved user experience
    Better mobile experience
    Floating actually valuable content to the top
    Reducing load times
  • Content. Content. Content. Your design is not the problem. Your content, your information architecture, your inability to nail down a primary audience for a given page, your lack of ability to know what’s working/not working – THOSE are the problems. Start small. Iterate. Measure.
  • Why not redesign? If you’re redesign isn’t actually about solving problems, you’re just painting a house with mold and termites.
  • Iterative Design101 #psuweb 2014

    1. 1. Iterative Design 101 Penn State Web Conference - 2014
    2. 2. @shelleykeith Director of Digital Communications University of Mary Washington o10 years .edu oSmall biz ecommerce oProject management oStrategery oProcess and purpose oMe <> designer
    3. 3. HiPPO: a definition Highest Paid Person’s Opinion
    4. 4. Low Hanging Fruit oFitness for use o navigation o content o relevant imagery o10-second test oSearch engine friendly oAnecdotal feedback, user tests, analytics oF-pattern
    5. 5. F-Pattern Test
    6. 6. Let’s talk iteration
    7. 7. Undergraduate Admissions
    8. 8. Admissions Landing Page – 1st iteration
    9. 9. Iterative Design – 2nd iteration
    10. 10. Iterative Design – iteration 3
    11. 11. Iterative Design - Now we're getting somewhere
    12. 12. Another Iteration.
    13. 13. “You can’t predict what the final result is going to be. You can only make small course corrections. The “final” thing is the result of the process.” – Lori Packer (@loripa)
    14. 14. Always Be Iterating
    15. 15. Helpful Links. LOLZ.
    16. 16. “Helpful” Links. Realz.
    17. 17. Actually helpful.
    18. 18. My Thought Process… o The web is your largest, most utilized and most versatile communications tool. o Use the resources you have to gain maximum value. o Blogs, social media, student generated content, campus event coverage, traditional media coverage, etc. o Content, content, content.
    19. 19. Working with HiPPOs. oFocus on measurable goals. Define success. Evaluate constantly. oUse your data. Promote your wins. Build capital. Be the expert.
    20. 20. Questions?