One of the most challenging things to do as a community manager is to design the Overview page under the Home menu. It can be a tough place to design with so many options available but I'm going to break down the basics for you now.

 

First, a disclaimer: I'm assuming that you have some experience with HTML, image creation using PhotoShop, and the Jive product. If you are a serious beginner, please contact your Jive representative to gain access to the Jive Community Management technical training which covers topics such as "Modifying the Overview Page" and "Widgets." The steps below are intended more as guidance than a step-by-step how-to training manual.

JC_Overview_2014-12-10_1127.png

JC_Overview_bottom_2014-12-10_1127.png

      The new Jive Community Overview page looks great, right?

 

What does the Overview page do?

 

It's important to understand the function of the Overview page so that you stay focused on what's important. Also, keep in mind that the Overview is only that portion of content shown within the white area itself. If you want to change the very top header of your community (such as where it says "Jive Community" above) you will need to edit the Theme, which is a different thing altogether and not part of this conversation. Anyway, I think the Jive Community Overview is a great example so I'm going to outline what we've done.

 

The top functions of the Jive Community Overview page are (in order from the top of the page to the bottom):

  • Featured content (should be fresh and frequently updated, consider using images to add interest to the page) - We've built a content carousel based upon CSS style sheets and HTML coding. If you don't have those skills, you can either contact Jive Professional Services, a Jive UI/UX Partner, or hire a person with the right skill set for building something similar to this in your community. Or see Image Rotator - Start Here.
  • Welcome people (new and returning) to your site - We're using an icon with a link to our About the Jive Community place.
  • Highlight your top three objectives in your community - In the Jive Community, these are Find Resources, Engage with Peers, Get Support. We provide key "call-to-action" links below each of these objectives. I wouldn't recommend having more than three boxes across the entire width of the Overview tab as space can get pretty crowded at different screen sizes.
  • Featured activity feeds that are your most critical to the site objectives - We picked our top two blog places: JiveTalks and Community Blogs in Social Business. Some people would argue that you can actually leave activity feeds off the overview tab. You'll have to decide what makes sense for the priorities of your Jive site.

 

How to design your Overview page

 

It's a little scary when you first realize that the power to design and change the Overview page is in your hands. And believe me, I know how to design both a bad Overview as well as a great one. I cannot over emphasize that the power of a really incredible Overview lies in the hands of a Jive UI/UX designer who has the skills mentioned above.

 

Below I outline the steps we took for layout and the widgets we used.

  • Open the Overview editor. For those of us on version 7, it's located under the site admin's profile pull-down menu: MANAGE > Overview Page
  • Select a Layout. We used the layout with a large spanning banner and two-columns below it. From my own experience, I would not recommend any layout for the Overview that contains three columns. Considering that the page will be viewed on different screen sizes, you want to select something that will accommodate smaller screen sizes.
  • Overview_Layout_2014-12-10_1154.png
  • Select the widgets and drag them into your layout. We used the HTML widget (found under the Other category) and the View Blog widget (found under the Content category).

 

No UI/UX designer? No problem!

 

If you are on your own without the assistance of a UI/UX designer, you could try some of the following tips. Instead of the HTML widget at the top layout area, you could use other widgets with a similar result. I've worked up a place to use as an example of some other options, see: Libby's Sample Place

  • Use an Image map in the HTML widget. Instead of using CSS/HTML to build an image carousel, you could use an image map inside an HTML widget. See How to create a clickable image map
  • Use tables in a Jive document to build call-to-action boxes. Instead of CSS/HTML Call to Action boxes, you could build them into a table in a document, then use the View a Document widget. To experience a "View Document" widget in action, visit: Libby's Sample Place then see the example document here:  Call to Action boxes - sample document


To compare the results, the non-CSS version could look like the image shown below. Not too shabby in my opinion!

JC_Overview_Homemade_2014-12-10_1127.jpg


And there's so much more!

 

The variations on Overview pages are more than can be covered in one blog. Each and every customer site I've seen has taken a different approach. I'd love to hear from you all about the approach you've taken and any tips you'd give to newcomers in the job. Please let me know what you think!

 

Internal Communities External Communities  Theme and UI/X Discussion