Twf homepagedesign sb_okey

The Web Farm Web Design, Content and Usability for Nonprofits

Hi, I’m Emily Lonigro LimeRed Studio, Inc: Design, builds and tests off- and online marketing collateral. The Web Farm, Inc: Online marketing, measurement and website optimization

Overview Rampant, big problems How to think about your customers User testing & usability Branding, design & resources Sites I like

Big problems Cramming everything on the homepage No clear call to action or too many! Bad writing Way too much copy No user testing

Specific to Nonprofits Design by committee Talking to coworkers instead of clients Lack of small, easily digestable info Industry-speak Thinking you’re different than business

Why are these big problems? If you’re going to compete online, you had better compete with guts. Think about how YOU do things online—who do you trust? You’ve got 3 seconds.

How to fix these problems Understand your audience Think about goals Do some user testing & think about usability Look at websites that do a good job of selling Make plans for the future and test!

Your Audiences Who are they? What do they want? What do you want them to want?

Thinking about customers This is hard! You have to talk to all kinds of people at the same time. Four different kinds of personas: Competitive Spontaneous Humanistic Methodical

Let’s do some user testing now

Audiences Audience Need Solution Utility Ongoing

GOALS, goals and more goals PAGE ACTION GOAL HOW HOME sign up for newsletter fill out sub request pop-out window with info ABOUT connect on linked in click on a button headlines, subheads, bullet copy SERVICES email quote request big, huge button to form page great copy, before & after, list of services

What’s really cool about this

Usability rationale Don’t make people think. At all. We don’t read web pages; we scan them. We don’t figure things out; we guess. We have a limited attention span and frustration factor. (phone number) We stick to what works.

Usability best practices Create clear hierarchy This is a headline This is a subhead And some body copy CALL TO ACTION

Usability best practices Don’t reinvent the wheel. It works really well already. Use standard navigation and placement Make links obvious Don’t hide things!

Usability best practices Name your nav something obvious Customer-centric or standard

Usability Best Practices Same thing with Calls to Action Make them simple Make them a contrasting color

Usability best practices Simplify, simplify, simplify Get rid of complicated search Get rid of words Streamline forms Get rid of happy, welcome talk

BEFORE: The Illinois Chapter of the Sierra Club is a statewide organization representing over 23,000 individuals committed to protecting the Illinois environment - for our families, for our future. AFTER: Protecting Illinois’ environment for our families and our future. We are the Sierra Club’s Illinois Chapter — 23,000 strong.

Usability best practices Page titles should be on every page and match the navigation Use breadcrumbs too if your site is huge

Purpose of your homepage Creating portals to interior content for audience profiles Get quick results Establishing the online face of your business Working as your online marketing partner Cutting through competitive clutter Remember: your homepage might not be your top landing page, so take a look at your analytics

Content structure Group content by what is intuitive for your audience Don’t be coy and hide things Don’t forget things like a disclaimer, privacy policy, 401 error, site map and contact Include a site map somewhere. The footer is a good place for that.

How does this content and usability stuff fit into design? The design is only as good as the content and organization Take one key idea and design around that. You can expand later, but keep that in mind always When you have a strategy, everything is easier Less guessing!

Design best practices Install, configure and use analytics I’m repeating this because I can’t stress enough how important this is

Design best practices Use your most valuable real estate Balance images and text Too much text is hard to read Too many images is hard for search engines to read Make sure the text you use is packed with keywords

Design best practices Make contacting you super easy Stick phone number and/or email up top Call to donate or join up top Reiterate blown-out navigation in footer with contact links (good place for social media)

Design best practices Copy Break up large paragraphs with bullets Write compelling headlines and subheads Use customer-centric navigation (but don’t get too creative)

Design best practices White space is your friend So are deliberate sections

Let’s make some wireframes. Fireworks Omnigraffle Or, you can just draw with a pencil. Gasp!

Leave design to the professionals Would you hire your neighbor to build you a house because he likes to tinker around in the garage? No.

Word list Make a list of words that describe YOUR org that will resonate with YOUR audience. Specific, visually-rich words At least 10 of them

Sally’s great word list Phoenix (resilience, drive, calculated risk, constant effort, hard work, my success is function of client’s success) T-shirt slogan (an inside joke, comedy, laughter, boiling ideas down to few key words, optimism) Seanchai (Gaelic for storyteller or old talker) (act-of-writing, stories, words, grammar, history, transfer of knowledge, thought leader) Purple brain (I say that my brain changes color when I speak French or am fully engaged in conceptual conversation; this is happiness for me) Lounge chair (sun shining down on you, satiation, work is done, you can relax now; reward) Bordeaux (rich, cultured, appreciative, tasteful, well-traveled and educated—also a subset of a set—one wine among many, speaking to organization) Roman Viaducts Slash Stonehenge (innovation, invention, community, momentum, family, heritage, legacy, functioning unit, leadership, ritual, ceremony) Pangea (name of our planet when all continents were connected) (interconnected, global, human context, global economy, global trends) Straght A’s (perfection, perfection can be enemy of good, diligence, integrity, tiereless, you see what you get, transparent) Couch (homey, relief, comfortable, homey, safe, the right solution at the right time)

Image search veer.com istockphoto.com images.google.com Flickr.com gettyimages.com jupiterimages.com paper-source.com crateandbarrel.com (I like to ask clients to choose a duvet cover) reprodepot.com (I like to ask clients to choose fabrics)

Color palettes Simplicity is key

Recap: steps to redesign Do some user testing to get a baseline Use your analytics to get real data about your traffic Create a solid content structure & look at the specific content on each page, especially top-performing pages Do some SEO Create design guidelines Hire a pro to design and build your site (and decide who is going to make decisions) Test before you build the whole thing Test after you build the whole thing Use analytics and test and make changes forever and ever

Advanced topics - web analytics Web Analytics is the measurement, collection, analysis and reporting of Internet data for the purposes of understanding and optimizing Web usage. from the Web Analytics Association Web Analytics Assocation http://www.webanalytics association.org University of British Columbia Award of Achievement in Web Analytics http://www.tech.ubc.ca/webanalytics Web Analytics Wednesday http://www.webanalyticsdemystified.com/wednesday/

Advanced topics - multivariate testing Multivariate testing is a process by which more than one component of a website may be tested in a live environment. Headline one Headline two Headline three GO SUMBIT SEND +

Why testing is hard It’s not, but dealing with people is. IT Dept says: You want to put CODE on MY pages? No way. Designer says: My design is rock solid. You’re an idiot and don’t know anything about design. Marketing says: I know what I’m doing. You want to prove me wrong? No way! So present it to the BOSS: Long term, we can make more money/get more signups/ for a minimum cost. It’s stupid not to do it. Oh, and the utility is free.

Advanced topics: SEO This is the Wild West of the Internet Search Engine Optimization is the process of increasing the amount of visitors to a Web site by ranking high in the search results of a search engine . keyword research page titles & h1, h2 headlines page and site descriptions keyword density in copy

Resources http://www.webdesign.org / http://www.marketingsherpa.com / http://www.webdesigndev.com / http://www.usertesting.com /

Twf homepagedesign sb_okey

More Related Content

What's hot

Similar to Twf homepagedesign sb_okey

Recently uploaded

Twf homepagedesign sb_okey