Last Updated 11/16/2008

Tripod myManager CMS, version 1.1 UI Specification Document

Company Confidential

Last Updated 11/16/2008

About this Document

The UI Specification Document details the design and functionality of a product or feature. The primary audience includes UED, Engineering, Production, QA, and Customer Care.

Revision History
List the version, date, author, and any notable changes or milestones (usability testing, cognitive walkthrough, final sign-off). This information is essential for engineers, as they frequently refer to the specification during the development process. Its important to place this information at the top of the specification so readers can easily determine what, if any, changes have been made since the last time they viewed the document. Consider incrementing the decimal spaces for changes made on the same day, e.g., 1.1, 1.2 and so on. Version 1.1 Date 11/16/2008 Author DWatters Comments Initial release of wireframes

Product Team
List the UED team members as well as leads from other relevant areas such as Production, Engineering, QA, and CC. UED Production Engineering QA Customer Care

Table of Contents
List and link the specification sections and their respective page numbers. This is typically created after the body of the document has been written. 1. Section NamePage 1

Company Confidential

Last Updated 11/16/2008

Product Overview
Transform Tripods current Blog Builder into a comprehensive CMS application that can help build, edit, and maintain a Tripod users current web site, blog, and image galleries. The Content Management System (CMS) is used to create and update Web sites and blogs. The idea behind CMS is to make creating your site easy and instinctual by providing pre-built templates, and a work area similar to popular word processing programs like MS Word. CMS also eliminates the need to know HTML in order to create a site--though you can still use HTML if you wish. The system itself is Web-based, meaning that you do not have to install hardware or software on your computer to be able to use it and you can access it from any computer with an Internet connection. A single page or dashboard could provide the basic CMS controls. Objectives The main business objective of the website is to provide a tool for the millions of existing Lycos/Tripod customers that provides them with a way to build, manage, and maintain the web sites, image galleries, and blogs Tripod hosts. Currently, Tripod offers these features for free, however for additional functionality, users must pay additional fees. Advertising placed on the pages of the hosted material is a large source of revenue. By providing the CMS tool, Tripod would effectively be leading the way in providing efficiencies to the end user. The expected result would be that many new users sign up for the free service and then upgrade into the paid solutions. From a marketing standpoint, the CMS tool gives Tripod an opportunity to recapture some of the market it has steadily been losing over the last few years, by providing an innovative tool that complements and supports Tripods existing products and services. The marketing message needs to educate users that CMS makes building, editing, and maintaining professional-looking web sites and blogs a quick, easy process that anyone can do. Since the audience demographics are young, care must be taken to appeal to the youth market, without alienating older professionals and organizations looking to create and manage serious sites and blogs.

Links Initial Project Proposal Open Issues

List any high-level open issues related to this product. Consider categorizing these issues according to type, such as technical, business, user experience, and so on. Also consider noting which issues have been closed and why.

Future Release Items

List any high-level items that are postponed until the next release. Describe the item, why it was postponed, and the expected date that it will be implemented.

Internationalization
List the countries where the product where be internationalized and any relevant UI issues. If the product has significant international implications, the designer should coordinate with the International design team. In this case, a separate International section may be required to discuss the issues in greater detail.

Company Confidential

Last Updated 11/16/2008

Design Overview
Conceptual Model
The design concept for myManager CMS was based primarily on the concept of simplifying and unifying the tasks common to creating, blogs, sites, and image galleries. During the design process, the decision was made to unify the myManager CMS product into one dashboard or control panel module utilizing open-source technology developed by Laszlo Systems (http://www.laszlosystems.com/). The conceptual model of the system is to provide a fully functional web application that the user can operate without having to navigate to any other additional pages. All the necessary tools are available in floating, dockable, panels and can be accessed individually, or in the context of the entire scope of operations.

Primary Tasks
To better understand the primary tasks, consider a developed Persona Craig Stephens. According to Craig: He currently uses Tripod to host a small website and blog where he posts information about his latest interests and travels. He uses the free image galleries to store and sometimes show samples of his photography. He has heard a lot of good things about Blogger, but has been unwilling to leave Tripod because he is afraid it will be difficult to reset his pages and images. Craig would like to set up an online portfolio of his work and is looking for a way to do that, but he doesnt know HTML and is too busy to learn much about it. Recently he has been getting into blogging quite a bit, but he would like to get more comments on his postings. Craig, would like to upgrade and remake his entire web presence, but doesnt really know how The myManager CMS will help users accomplish the primary tasks of creating blogs, web sites, and image galleries. Additionally, the CMS will help users post content, publish web documents, and update and manipulate photo albums. Lastly, the CMS will help users maintain their current content and notify them of unresolved issues needing attention. While accomplishing these goals, the website will also provide a unique and memorable user experience that will motivate users to return often to work on their web projects and files.

Company Confidential

Last Updated 11/16/2008

Flows or Site Map

The first high-level site map reflected the concept of a traditional web site built to accomplish the project goals. The need for multiple pages, before even adding essential lower-level pages, contributed to the need for a simplification of the design. However, as the idea of creating the allin-one dashboard prevailed, the site map changed, simplifying the navigation structure considerably. Site Map v. 1

Site Map v. 2 All task interactions take place within the context of myManager control panel. The panels are essentially similar to the menus used in almost all Mac or Windows applications, and operate with a similar use pattern.

Company Confidential

Last Updated 11/16/2008

Navigation System
The basic navigation of the myManager CMS website centers around two basic operations. The first: login and enter the control panel from the Tripod home page. The second: complete basic tasks from within the control panel by expanding a selected area (such as my Sites), and performing various operations. Screen capture

The user enters the Tripod home page at www.tripod.com and logs in to use the myManager CMS application. If the user already has an account, and their password is valid, he/she is directed to the myManager page. If the user does not have an account, they are redirected to new account sign up page before they can enter the myManager CMS control panel. Once the user has successfully logged in, they have access to all the tools of the myManager CMS control panel. Essentially the control panel is a container for the various operations the user would like to perform (ex: the user would like to update their website). The myManager CMS contains separate activity panels for updating the users blog, website, image albums, and account information. An additional Help module is also provided. Each module in the control panel is expandable, and once clicked and expanded, will fill the users screen area, providing a large, uncluttered work area for the user to perform tasks. Design Rationale The design rationale for this design approach can be found in the original project proposal, which called for a progressive website design to lure new users to Tripods services. To change the audiences poor perception of Tripod, the new CMS tool must show the end user Tripod is ready to lead the way in providing the definitive experience for the end user. Furthermore, The new CMS tool must express a clean, forward-looking, vision-of-the-future point of view. To accomplish these goals, it is important the web site breaks new ground, and delivers an original, updated and improved design and user experience.

Company Confidential

Last Updated 11/16/2008

The design concept also makes sense because the user needs to navigate to only one page to accomplish all the tasks necessary to create web sites, blogs, and image albums. While the design is currently non-standard, I believe the improved user experience makes the work to develop the project worth the additional effort.

Error Cases For the previously described navigation into the control panel, the main error encountered would be new users that try to enter without a password, and would be redirected to a create new account page, and/or users who cannot remember their password and would be forced to try to login again.

Internationalization Since the site will be used internationally, it is important to follow standard web convention for login procedures. Also, it will be important to translate the links and directions into multiple languages.

The myManager CMS control panel:

Size: 760 x 420px

Panels expand to fill entire screen area

Company Confidential

Last Updated 11/16/2008

Template or Global Module Name

The myManager CMS has modules for managing blogs, websites, photo albums, and a user account. Additionally a Help module is provided to guide the user through any technical or operational difficulties. The modules are similar in design and operation, each performing different user tasks in a unified manner, providing a consistent user experience. While each module is similar, they perform different operations so while much of the functionality and look and feel is the same, they are each customized applications. Here is how a user might navigate through a simple task such as adding an image to a website document the user is currently editing

Screen

The panel expands by clicking here

The mySite panel as seen in Control Panel view, utilizes a small display window to present the user with the latest available status information about the website, providing at a glance reporting of operational status. Here is the mySite panel in expanded view, providing the user with an uncluttered work area to update and manage their website.

Company Confidential

Last Updated 11/16/2008

The expanded mySite panel provides a WYSYWYG page editor and other site editing and file management tools.

The Help module is designed to be available for every module without having to return to the main control panel. If the user is editing the website and needs help, they can expand the Help module and it will operate like a layer, expanding on top of the expanded website module for the user to look up additional information. These is helpful because it avoids forcing the user to stop what they are working on, or lose their place, while being forced to minimize the mySite panel to go look for help.

Company Confidential

Last Updated 11/16/2008

Design Rationale Conceptually, the ability to perform all these varied operations and never leave the same page makes the website much more like a desktop application, while having the advantage of being web-based. Furthermore, the idea of selecting a panel to perform a basic operation instead of navigating to an entirely different web page allows the design of the myManager CMS application to be very functional and compact.

Company Confidential

Last Updated 11/16/2008

Status display area

A design issue consideration was how to present relevant information for each module, first in a very small window (on the main control panel) and then in an expanded format once the user resized the panel to perform a task. I made a design decision to include relevant information for each module in a small window, easily viewable in the main control panel, and then use the same information as a page heading for the expanded view. This allows useful information to be presented in a small area, but doesnt affect or limit the operation of the expanded panel. For example, an earlier design allowed the user to scroll and edit a blog from within a minimized panel display. This proved to be a very cramped and ultimately unworkable approach, which I abandoned in favor of the system status alert, used in the current version.

Scrollable work area within minimized panel Another design issue was concerned with how to accommodate the possibility the user may have multiple blogs or websites or photo albums, and how to provide a way for them to access a possible list of blogs for example. This issue was made more difficult by the limited screen viewing area of the minimized panels in control panel view. My design decision and rationale in this case was to provide the following panel interface

Company Confidential

Last Updated 11/16/2008

Highlighted Blog

Blog list panel

New Blog panel For each and every module, for control panel display purposes I elected to allow only two main selection panels. For example for myBlogs: the current highlighted panel would be Planet HCI the name of the highlighted blog, and seen previously in the other blog panels. On the other selection panel would be tabs, currently providing selection options to Create a new Blog or Show my Blogs which provides a list of the users blogs (because we have to assume the user may have more than one blog). The user can drill down the list of blogs, and select a different blog to be highlighted, select the button Highlight and replace the Planet HCI panel label with another blog.

Company Confidential

Last Updated 11/16/2008

Create a new Blog

One of the typical tasks of a user might be to create a new blog with the myManager CMS tool.

Task Description
The act of creating a blog is relatively simple and can be handled by the minimized myBlog panel from within the main control panel view. The flow below illustrates the process. If the user opts to create a new blog, the main issue is if the domain the user selects is available. If the domain is not available, the user must reenter another name and try again. Once the blog has been successfully created, the user can expand the blog panel and begin editing the settings of the newly created site.

Flows

Screens

For example: The user is trying to create a new blog called The Blog Zone He/she has entered the name blogzone as the domain name but it is not available. A status message is returned saying Sorry! Domain name unavailable The user selects a different name for the domain and this time is successful

Company Confidential

Last Updated 11/16/2008

At this point, the user can expand the myBlogs panel and begin to create a blog post or edit their settings

Company Confidential

Last Updated 11/16/2008

Reference
Some additional screens:

Ajax-enabled dashboard created by Laszlo Systems

Company Confidential

Last Updated 11/16/2008

Company Confidential