Lacey Kruger

Designing for the Mobile Web

I have a little secret to share about designing a mobile website... it's easy! As you may have heard, more and more folks are accessing nonprofit sites, taking action and even donating from mobile devices. With rushed end-of-year giving season coming up, it's more important than ever to stake your claim on the mobile frontier.

At Convio Summit, our Art Director, Michael Chang, and I led the Mobile Homepage Design Slam session where we developed some mobile homepage layouts on the fly for audience volunteers. We outlined and demonstrated a simple 5-step process for mobile design:

It's obvious that we need to be even more succinct and direct with a mobile website due to the lack of screen space and the on-the-go nature of most visits. To achieve this, we recommend focusing your mobile web presence on one key message that you want users to take away from your site. This message is likely the same one you want to communicate on your regular website so a simple conversation with your organization's key stakeholders should get you where you need to be with this one. A great starting point for that conversation is filling in this mad-lib: "At [org name] we [verb phrase] so that [constituent group] can [verb phrase]."

2. Identify desired actions

In that same stakeholder conversation, you'll want to discuss the key things you want people to do on your mobile website. We've found it's best to limit the number of actions to 5 and to prioritize your list so that 1 action can take center stage. Think about what people are most likely to do when they're out and about such as donating, searching for something nearby that's relevant to your cause or responding to an action alert.

3. Develop sitemap and allocate real estate

Armed with your key message and list of key actions, it should be a no-brainer to develop a sitemap. Your mobile sitemap needs to be simple with few tiers to navigate through. For nonprofits that may have a news-heavy or information-heavy website, it may also be important to provide a Search feature so users can access news items or other content that isn't part of your main mobile sitemap.

Your key message and key actions should also feed naturally into wireframes for your mobile site. As with everything else mobile, simplicity is key here - less is more! Some dimensions to remember for wireframes are the standard screen size of 320px X 480px and a standard button size of 44px X 44px.

4. Create design

When your wireframes are complete, overlaying a design on top of those should be a piece of cake. Your mobile website should share the same look and feel as your regular site so be sure to pull design elements from the main site to tie the two together. Your color scheme, logo and much of your imagery should stay the same.

5. Build and test

As you build the site, you'll want to be sure to include a browser detect script that can direct mobile visitors to your mobile site without having to click or type a distinct URL. Also, if it's possible with your hosting platform, you'll want to utilize the same content for your regular website as your mobile site so you won't have to make updates in two places. Many Content Management Systems, including Convio CMS, will allow you to create mobile-friendly displays for the same content so you don't have to duplicate things like news items throughout your site. Finally, be sure to check out your analytics data to see what the most common mobile platforms are for your visitors and test on those. There are a variety of online simulators out there that you can use to test it out so you don't have to have one of each device.

Well, that's it! Now there's no excuse not to start thinking about a mobile presence. If you'd like some more detail on how to get started with mobile, check out our Mobile Guide for Nonprofits. Also, feel free to share your own experiences with mobile design in the comments.

Innovator Spotlight: All Hands Volunteers

Congrats again to All Hands Volunteers who recently received an Innovator Award for the Best CRM Visionary/Use of Common Ground. The organization is a volunteer-staffed nonprofit that’s dedicated to timely disaster response and relief assistance. Historically, like many nonprofits, All Hands Volunteers had siloed data, with volunteer data and donor data housed in three different systems. This made it extremely difficult to personalize and tailor communications to each individual. As the organization grew, the need for consolidation and proper segmenting became more imperative… enter Common Ground.

Since consolidating their data into Convio Common Ground, All Hands Volunteers has developed more effective communications. They’ve created multiple fundraising and email campaigns that are personalized for specific segments of their housefile. These personal communications have paid off too, allowing All Hands Volunteers to build, maintain, and strengthen relationships with their constituents. Common Ground has played an important part in growing the organization’s operating budget from $500,000 in 2009 to $2.7 million in 2011.

In addition to their great success with Common Ground, All Hands Volunteers has also adopted Common Ground Social which is an integrated social fundraising solution. Common Ground Social allows All Hands Volunteers constituents to create and share personalized fundraising pages through different social networks (i.e. Facebook, Twitter, LinkedIn). Fundraising activities are then seamlessly captured into the consolidated Common Ground database for All Hands Volunteers, allowing for even deeper segmentation.

Hats off to you, All Hands Volunteers, for leading the way with targeted communications and social integration.

Inventory, Assess, Repeat

Continuing with our series on effective content, today I’ll show you how to assess, or audit your content. So, perhaps you know your content could be improved, but how do you know where to start?? Dimitri had a great post a few weeks ago on how to develop a message hierarchy which will be a great tool to use for your content assessment. The other thing you’ll need is your content inventory.

Note: Don’t skimp on the content inventory. Yes, it’s tedious and time consuming, but it is absolutely crucial to see what content you have out there to be able to assess it and make it successful. Try making it an on-going project, spending an hour here and an hour there and don’t forget to keep it updated once you have your initial snapshot.

Once you have your message hierarchy and your content inventory, it’s time to dig into that inventory to truly evaluate what’s there. Like the initial creation of the inventory, the assessment should also be an ongoing process. Kristina Halvorson refers to this part of the process as the “qualitative audit” in her book Content Strategy for the Web. You can even check out her chapter on Audits for free.

The qualitative audit is a way to assess your content across several variables. Kristina provides a great list in her book, which I’ve adapted a bit here:

• Messaging - Does the overall message of the page align with your Message Hierarchy?



• Business Value - How valuable is this page to your organization?



• User Value - How valuable is it to your site visitors or users?



• Accuracy - Is the page accurate and up-to-date?



• Redundant - Is the page redundant to other pages/sections?



• Usability – How scannable is the page? How easy is it to read and understand?



• Notes – What do you think could be improved?

As I’ve helped clients with their content assessment, I’ve added columns for each of these variables to the content inventory and created a scale to rate each aspect of the content. I’ve found it helpful to color code my ratings to call attention to the sections that need the most work. The scale is really up to you, but I’ve tried to keep it simple in the past with 1 (red) being “critical”, 2 (yellow) being “needs work” and 3 (green) being “good as-is”.

Once you have your assessment complete, you essentially have a checklist for content that needs to be updated, consolidated or removed. From there, get the Owners of each section/page involved to help make the necessary updates. Share your Message Hierarchy with them and other relevant documentation on the tone and style your website should use. It’s also helpful to create a reasonable timeline for completing the edits to keep folks on track, but encourage your authors to edit pages on a rolling basis to keep the process manageable.

Now, I realize many organizations don’t have several content authors to divvy up the work and other organizations might have SO much content that the task still looks completely overwhelming. If you’re in that boat, I’d suggest checking out your Google Analytics data and prioritizing your updates based on the popularity of the content. Your most visited pages (perhaps your top 50?) can be evaluated first, followed by pages that get fewer visits. Small steps are important steps here so start where you can. Remember though, Content is King, so be sure to start somewhere.

Content is King

To stay up to date with current trends and best practices, my team and I read various industry blogs and websites about both User Experience and Nonprofit Marketing. Content Strategy has been all the rage recently in the UX world and I was excited to see this topic make its way into the nonprofit space. See this great guest post on Katya’s Non-Profit Marketing Blog.

I particularly liked this quote: "In a nutshell, content marketing is the art of understanding exactly what your target audience wants to know about your issue area and delivering it to them in a relevant and compelling way."

So often, when we work with nonprofits to redesign their websites, content is an afterthought. We start our process with intensive research with the organizations and with their users, our goal being the same as the quote above - to "understand exactly what the target audience wants to know". Then, we translate that research into a design and user experience that meets the needs of the users and internal stakeholders. No matter how much we start talking early and often about content editing, it seems at crunch time, the content is what gets sacrificed. To be able to launch the site sooner, content is often published as-is, with disregard to all of the great research we conducted to get the design and user experience right. Sound familiar?

Our team has been working on ways to emphasize that content is king and we have some tips and techniques to share to help your organization evaluate and adapt your content. It may be a daunting task but it’s one you can do slowly, starting with key, high-traffic pages and working your way down. Ultimately, if your content is lacking, no changes to your design or even your user experience will keep users interested for the long haul. My colleague, Dimitri Lundquist and I will be posting on this topic for the new few months so stay tuned! If there are specific issues or questions you’d like answered about content, let us know in the comments.

New Year's Resolutions

Maybe it’s a little late to start thinking about resolutions since we’re already 18 days into 2011 but better to make them late than not at all, right? Here are some ideas for resolutions for your online marketing strategy this year. Resolve to…

• Listen to your users by conducting periodic reviews of your analytics data and/or surveying them about what works and what doesn’t work on your website.
• Define your audiences, build consensus internally around them and create communications (online and offline) specific for each group.
• Conduct a competitive analysis of some of your favorite sites. Make a list of recommendations for your own site based on your review of your peers.
• Try something new on your site and test it out. Run an A/B test on different donation forms or landing page layouts.
• Update your homepage and key entry pages at least once a week.
• Incorporate social media more thoroughly into your site by encouraging social sharing, displaying dynamic feeds and promoting your social media presences.
• Evaluate traffic to your website from mobile devices and start thinking about if and when you should plan to develop mobile-friendly content.