OurStories+Mockups

toc **OurStories** **Design & Mockups** by **Payam Azadi** (azadi@umd.edu), **Brandon Britto** (britto.brandon@gmail.com), **Dan Sonthichartkul** (dsonthic@umd.edu), **Kevin Heiting** (kheiting@terpmail.umd.edu)

(draft) mockups for the actual implementation of OurStories in a web interface. Possibility of following through with mobile mockup/implementation is currently being considered
 * Key: A= Brandon, B= Dan, C= Kevin, D= Payam

=Abstract= Having incubated for some time on what the implementation design should look like, and armed with a powerful set of required tasks and target users for OurStories, we decided to individually create mockups of what the final site might look like, and then compare notes to see, overall, which features we like, which ones we don't, and how to lay everything out.

Having "compared all notes", we broke down the design by page (home, search, view, and tell), and decided what components each one should have. As part of our discussion, there were a few key points that presented themselves, which are how the main content area of the homepage should look, what kind of searching mechanisms we want to offer, and how to build the site-wide navigation.

As it stands, there are still some grey areas we are not sure how we want to implement, in particular the site-wide navigation. The ultimate goal is to present a navigation that is very useable and that permeates the entire site so as to keep the user on the site as long as possible, however, we don't want the navigation to become intrusive, compete with other content, or impede accessibility.

At the highest level for our higher fidelity prototypes, we made certain to begin with a very widely used screen resolution of 1024x768, because we want the system to be as internationalized and universal as possible, and many areas of the world have yet to catch up with more modern screen technologies. The site will of course still be elegant for users with the highest resolutions.

=Prototypes=

Prototype A
There are several features in this prototype that really stood out. A major one of these is the fact that the header does not have a search bar, but instead uses header area as a user "profile" area which would contain sign-in/register links, or if the user is signed in, links to user-specific content, such as the user's favorite stories.

Other things we liked about the prototype is the left-hand navigation, and the presence of story-feeds that are present throughout the site - 'latest stories', 'currently being viewed', etc. While navigation to a search page is not obvious, there is a powerful advanced search page with several important filters that would be used to narrow down a story selection.

Mainly what we didn't like about the prototype is the main content on the homepage - there is one story that is chosen, and that takes up most of the area.



Prototype B
This prototype seemed to have an interesting twist on the interface for what the task requirements are. One major thing that stands out is the use of a 'tag cloud' in the left panel. While we originally mentioned strictly categorizing stories according to a pre-defined set, after some discussion we figured that there's no harm in going both ways in this type of organization. Wordpress CMS uses categories and tags, so we could do the same thing. The only concern is what to call a "category" since 'category' seems limiting.

Other interesting ideas here include using a tabbed navigation in the left side panel for story feeds, instead of breaking them down into individual boxes. The fact that the tabs are shaded makes them more easily-seen. Also, there is a notion of 'time' in the different search areas, allowing you to filter by date. This was something we had not considered, but it led to further discussions about how to lay-out the story submit form, and how to collect biographical information



Prototype C
This prototype was significant in our discussions because there has been this central question on what to do with the idea of using a map as a navigation feature. We saw that in the previous OurStories implementation, the homepage featured only a giant map, and one problem with it was that if you have many stories in a certain area, you can't tell the difference from when there is only a single story in a certain area. Furthermore, the break-down of the map by globe, then region/content, then country, then city, and drilling down at every level, seems to provide little utility compared to an open-ended search but is very complicated to implement, as well, takes up a lot of space.

However, we only came to these conclusions as solid once we looked at the interface design that included the map. As soon as we looked it, we each said "nah, that's not going to work".

Other interesting pieces of this is the notion of having a single feed, called a "hall of fame", as well, an approach that keeps the navigation at the minimum. Here we also see inclusion of user-account information inside the header, and lack of a search box.





Prototype D
In general, we found this prototype to have a balanced approach in what features/items to display, and consideration of navigation. What it lacks is advanced search functionality. Having discussed it, we agreed that it is a good idea to include an advanced search form, rather than just a basic search-box or a quick-form in the left navigation that will allow you to do a quick search.

Features we liked about this are the use of a "feeling lucky" feature for the search, having "more from .." (author, city, etc) on the view story page, the layout of the home-page content in "Facebook style feed" mode, and the prominence of the share/jump links in the header navigation.

The main questions presented by this implementation is the "stickiness" of the header, as well as the bottom 'status bar' which includes links to trending stories. Someone asked whether the header would be sticky, and thought that it was a good idea. However, the original intention of the design seemed to be that the header would not be sticky but that the bottom side-bar is sticky. We feel that these are huge considerations to make that could have significant impact, positive or negative, on the design of the site.

The other concern about this layout is the top-right space - this implementation does not have much room for user-account specific actions, and uses the right-header area as a search box instead of for user account actions. After discussing, we believe that the right header area should be used as account actions.

= = = = =Evaluation and Refinement=

Comparing each prototype to each other gave us a large insight into how we want to do the design. In particular, the central questions asked included how to organize home page content, whether an advanced search feature was important and if so how to build it, how to best engage the user, and how to keep navigation as simple and useable as possible without instituting tradeoff, and how to build the 'submit story' form. We guided discussion on a "by page" basis, and then connected thoughts that overlapped between the pages.

Home Page
The main question we asked is which features from our 'pool o features' we want to display on the homepage. Having established this, we wanted to figure out how to place everything.

We agreed that it would be a good idea to have "trending stories" (which actually means stories other people are currently reading), your recently viewed stories, and popular stories. Also, we liked the idea of doing 'feed style' stories for the home page, and including user-account navigation features. We also liked the idea of introducing tagging, and including links to an advanced search feature.

Next, we discussed how to arrange the search features and account management area. After a long discussion we came to the conclusion that the right header area should be used for user account purposes, and that instead we would move the search feature out of the header. We believe we should have a search-box, for consistency, concept, and beauty, but that it is not a central consideration of our interface. Also, we decided in the user account area we would include a 'my favorites' link, a 'my stories' link, a 'my account' link, and of course, a logout link.

We also decided to put 'trending stories' on the left since we think that this would grab the user's attention more often, and put 'recently viewed' stories on the bottom, as this might make sense in the logical way people are navigating through the site. Further, we agreed that using a bread-crumb navigation is a good idea and would go a long way in navigation

Additionally, we thought it would be a good idea to include a site-wide footer, that would have links to a mission statement, maybe a privacy policy, a contact us, etc.

For searching, we agreed on a "basic" form, potentially to be in the left navigation, with fields of category, region, and keyword. We wanted to keep this form as simple possible because time, space, and complications are all issues, but we want a quick way for people to be able to filter.

Submit Story Page
We decided that we do in fact want to collect age and gender from the user, but that we would make these fields optional. The only mandatory fields would be a title, and of course a story.

The user would have the ability to upload their own pictures/media, and there would be a useful WYSIWYG editor to aid. We also want to include a drop-down menu that is our hard-categorization, and also an open text-input field that would collect tags that the user feels would help categorize their story.

Another feature we decided to add that we had not considered is a preview button.

View Story Page
In general, we want to stick with most of the principles we originally outlined in viewing a story. Obviously, the title, author name (or anonymous), and the story itself need to be displayed, but there are a number of "value add" features that are unique to the story but go a long way toward navigation and user-engagement. This includes having "more from" links, but also links to the same category/tag, and perhaps most importantly, content rating.

An idea in Prototype A that was really fantastic is the notion of using an icon to "flag as inappropriate", which is not necessarily a new idea (Youtube), however, he decided to use a hexagonal warning sign that has an ! in it. This might be crucial in an international arena. While we haven't given any thought to internationalizing the language of this site's interface, only the stories themselves, anybody outside of the United States would have no idea what a "flag" icon would do because it's unique to English, and even an English speaker may not understand the idiom that "flag" is tends to mean "put a warning on this".

The other great idea is using "+/-" buttons next to the content rating instead of having some arbitrary "like/dislike" or "thumb up/down". It seems to make more sense.

Of course, we want to have a commenting system, and similar notions of content flagging should apply.

We also want to include a language-dropdown, which, in this whole mockup process, we seem to have completely forgotten about language, but it is something that we believe while crucial, is easily fixable.

Advanced Search Page
This is a fairly straight forward page, but the major consideration is which fields we want to offer here as methods of search. For the time being, we have agreed upon search by author, date range, age, gender, region, country, city, keyword, and now, language.

The results, when displayed, should display identically to how the stories are displayed on the home page.

The only question we have with search is whether or not to include search-filters in the left navigation as an extra means of drilling down. This kind of navigation is common in commerce-based websites, e.g. Amazon, Newegg etc.

=Final Mockup=

=MS Word Original= Please note that this Wiki page is the most recent and authoritative source of the project; attached is the original document in MS Office 2007 before translation into Wikitext and accounting for minor revisions.

= =