A presentation at UX Oxford Speaker Series 6 in in Oxford, UK by Garrett Coakley
Garrett Coakley
Head of Online
Whale and Dolphin Conservation Society
email: garrett.coakley@wdcs.org
twitter: @garrettc Hello This isn’t a “standard” UX talk, there are going to be more picture of whales and dolphins than pictures of post-it notes (although there are a few of those). This is the story of what we’ve been doing at the WDCS for the past year, namely completely rebuilding our web presence. What led us to that decision, how we approached it, and some future plans This may not work for everyone, but hopefully you might be able to take a few things away from it So, some history about us
Who are we? Founded in 1987 by Kieran Mulvaney (then 16 years old!), became a registered charity in 1992. We do research, fundraising, policy work, campaigning
Hello World In 1999 WDCS became a non-profit organisation in Germany and in 2003 WDCS became a charity in Australia, Now an International organisation with o ! ces in UK, US, Germany, Argentina. Also scientists in Pacific Islands and Caribbean
Plymouth, Massachusetts In 2006 we merged with the Whale Adoption Project to form WDCS North America.
Plymouth, Massachusetts One of my favourite places in the world, because we get to study Humpbacks
Spey Bay, Scotland Another one of our field o ! ces, the Scottish Dolphin Center in Spey Bay. I urge you to go, it’s a beautiful part of the country.
Spey Bay, Scotland And you get to see these amazing creatures in the wild, Bottlenose Dolphins. Photo isn’t by me but by Charlie Phillips
“The user is going to have an experience on your site, whether it's good or not is up to you” Cannot remember where this quote came from, I think it may have been an evolt.org colleague back in the early days. So, where are the WDCS currently? What’s the issue? 7 years old Custom CMS, fragmentation, sprawl
Multiple designs Multiple designs Duplicate content Wide and deep structure.
Multiple designs Took me 10 minutes to find this page.
Multiple sites Separate sites for other languages. Left behind on design.
Multiple sites This can cause a second class experience
Multiple sites External blogs Silo’d from the main site and each other.
Multiple sites Duplicate content (German team translating Charlie’s posts) No overview of activities
Multiple sites Species guide, incredibly highly tra ! ced part of the site. #1 result on Google for “Species Guide” Stuck in 970x480 fixed dimension div. Overflow: scroll Broken on small screens.
“The user is going to have an experience on your site, whether it's good or not is up to you” What to do about the mess? Knew we had a custom CMS with no ongoing development Tried to do a content audit, gave up. Not a good use of my time. We made the decision to raze it to the ground, save the historical content (blogs/news), trash everything else. Where to start?
Staff workshops Post-it notes! (No problem that can't be solved with post-its and sharpies) 13 workshops over 9 weeks. Trips to Scotland and Germany. Question: “Imagine the most amazing WDCS website you can” Post up and A ! nity map exercises
Results It was apparent early on that many departments had aligned needs but it took someone with an outside view to see the common threads
Results I make no apologies for using a Wordle, they can be incredibly useful. This is from the combined notes of all the workshops. A common theme expressed by all participants was that it was too di ! cult to find resources in the current site, even for those members of sta " that had been using it for a while. Useful content was frequently lost or misplaced. It was also failing to communicate our core principles and mission. Another theme was the lack of editorial control teams had over their content and the di ! culty in keeping things up to date, not due to human factors, but instead the lack of tools and workflows. So that was the sta " , what about the general public?
"Who are you to your customers? What do you do for them? � How can you embody that digitally and provide that service or information wherever they might need it?" � Josh Clark (@globalmoxie)
An important question, who are they? Animal lovers, Enthusiastic amateurs, Conservationists, Students, Science professionals, Policy makers, Other organisations How to appeal to everyone? A fools errand? We’ll come onto the second part in a sec.
Who are our supporters? We decided to phase it: Phase 1, existing supporters. If we get it right for them there’s a good chance will get it right for the wider audience. Later phases will address other audience facets. We have an incredible Supporter Relations team. They found me some willing volunteers.
Research I had a rough idea in my head of what the new site had to do, I think it’s important to have a vision. We set up card sorts in optimal sort and also ran some user surveys to see if my ideas were sound. While it’s important to have a vision it’s also important to be willing to be proved wrong. Thankfully I wasn’t!
Results The results showed a tendency towards a very narrow but deep picture of the organisation with a number of common clusters, namely: The work of the WDCS, About the WDCS, How people can get involved The responses from the feedback form identified similar issues to the ones from the sta " workshops; that the site was di ! cult to navigate, too busy, it was also failing to communicate our core principles and mission. Why people should support us. Where organisation needs align with supporter needs that's a good thing, but where they're di " erent the supporters win (GDS design principle number 1 - “Start with needs. User needs not government needs) (“Parting with my money”) So those are our problems, where next
…How can you embody that digitally and provide that service or information wherever they might need it? " � Josh Clark (@globalmoxie) Lets take a step back for a second and think about that quote from Josh Clark earlier (emphasis mine). There is something more fundamental happening to the web, and it will a " ect you no matter what area you work in: UX, design, development, project management. I’m going to show you three slides now that are not mine, but the author, Brad Frost has posted them on his site for everyone to use, because I think they sum up, in three simple slides what is happening.
The Web has moved beyond the desktop
“Close to 1.5 billion people worldwide use a computer [vs] 4.2 billion (75% of the planet) use or have access to a mobile phone.” - Stephanie Rieger and Bryan Rieger http://www.uxbooth.com/blog/its-about-people-not-devices/ 1/3rd of global internet users access the internet only via mobile. “Between iOS, Android, Windows Phone, and other platforms and devices there are over 200 unique screen sizes and resolutions” - http://punchcut.com/ perspectives/scalable-user-interfaces Designing Scalable User Interfaces Users will increasingly experience our products on devices far more capable than their desktop counterparts
So how do you even begin to build and design for the coming maelstrom of devices? Start with the content.
“Great content meets users’ needs and supports key business objectives. It engages and informs. It’s well-written and intuitively organized. It keeps people coming back for more.” � Kristina Halvorson (@halvorson) � Content Strategy for the Web For us the content revolves around the core narrative of the site. Issues, Our Work, Get involved (It’s not just about money, although that’s a big part of it, it’s about creating ambassadors, informed participants.) We need to structure our content. This is a mobile first, content out strategy. Second part of the quote: “But when content sucks — when it’s overwritten, redundant, hard to find, irrelevant — people come, look, and leave. And, sometimes, they never come back.”
Structured content What do we mean by structured content. Distinct, reusable elements. Canonical pieces, address the redundancy issue. Know that if you change something in one place, it will update everywhere. “We should build networks of content, not of pages. Design is now the relationship between individual components, not rigid pages.” - Ethan Marcotte Expressed and combined in di " erent ways COPE: Create Once, Publish Everywhere - NPR
Structured content A content type is made of fields, some fields are common, some are unique to a content type. control what goes into those fields. This is the admin area, I set strict limits on the contents of fields. Synopsis has no formatting. If it isn’t clear without bold or italics, rewrite it.
Structured content Synopsis: wrap up the issue in a paragraph Talking points: The elevator pitch. limited to 5 From those two sections you should have enough info to decide if you want to help, or have a discussion in the pub, or around a dinner table with your friends. Deeper into the page - supporting content So now we have confidence in the content, how do we package it? Going back to Josh Clark’s quote, how can you provide your service or information where ever people need it.
“Think of your core content as a fluid thing that gets poured into a huge number of containers. � Get your content ready to go anywhere
because it’s going to go everywhere .” � Brad Frost (@brad_frost) Over 200 unique screen sizes and resolutions, and more to come. Progressive Enhancement, responsive design
Responsive design Why responsive design? “It’s not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers” - Brad Frost It’s not a silver bullet either, it’s early days, but you should understand the techniques, have this in your toolkit. I won’t go into the technical details, Responsive Web Design by Ethan Marcotte, Adaptive Web Design by Aaron Gustafson - buy them.
Responsive design I hadn’t tested for this, but it worked. there’s some flakyness with the logo, but nothing major, it just works.
Responsive design This is in a pub. You can do some great guerrilla testing in a pub. Don’t leave it until last orders though. Could get messy.
Responsive design Don’t think of linearising your content. Start with the small-screen/mobile context and then unlinearise (is that a word?) "The abscence of support for @media queries is in fact the first @media query" - Bryan Rieger Very hard, but worth it. Learnt a lot about grids and platforms. It’s good to challenge yourself.
In short, we should strive to create and present content in ways that respect the fact that even when they’re using the web, people need to pee. � Erin Kissane (@kissane) � The Elements of Content Strategy What Erin is referring to here is that we’re all still primates, biological entities, we have to make allowances for the hundreds of disabilities and interruptions that plague our lives. Don’t think mobile vs desktop. Think more about context, what do people want to do. I use my iphone more sitting on the couch than I do when I’m out and about. So that’s where we’re at right now. We’ll be opening up to beta testing soon. Where can we take the user experience now that we have a solid new platform for development? Well, I have some ideas
The future This is just the beginning, where do we go from here? We have a huge backlog of ideas from the original workshops, and there are some projects I definitely want to tackle. A big push for more geo data throughout the site. Displaying the range of a species overlaid with geo tagged news articles, incidents pollution
The future Live sighting notification for supporters. When an animal is seen, the scientists log it and then our CRM system lets all the adopters know. Again, going back to context and capabilities,; think touchscreens, location information and motion sensors.
The future Virtual whale watches. Google Earth tours with embedded media.
The future Building a platform for citizen science experiments
Questions? � email : garrett.coakley@wdcs.org � twitter: @garrettc links: pinboard.in/u:garrettc/t:uxoxford2012 Questions?
Garrett Coakley, Head of Online at the Whale and Dolphin Conservation Society, walks through the problems with the WDCS' current sites, our initial research and findings, and the the content-out/responsive approach we’ve taken towards the redevelopment.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.