Design of an Information Resource Model for a New Orleans Community

Synopsis

Nearly four years after Hurricane Katrina, the Gentilly neighborhood in New Orleans lacked a single resource where residents could access up-to-date information about rebuilding their homes and businesses. I teamed with two classmates and joined the University of Washington's Jim Diers, Fritz Wagner and Robin Moeur, as well as community leaders from New Orleans' Gentilly neighborhood. The goals of this project were to aid the Gentilly neighborhood rebuilding effort, promote both the Gentilly neighborhood, and the New Orleans community at large, and build a community by providing a place where residents could exchange information. We designed a model for a web-based resource center that would act as a proof-of-concept to aid our sponsors in securing funding for the next phase of the project, which includes content gathering and development. For the model I worked on creating website wireframes, page flow diagrams and a sitemap. These documents were based on user research and testing that I conducted with my teammates.

User Research

I along with help from my teammates conducted several forms of research to learn about the problem and the context in which it was taking place. The research included:

• Phone interviews with members of the Gentilly community as well as website owners from Seattle
• Reviewing websites that could be considered information sources for New Orleans residents
• Reviewing our sponsors' original project proposal
• Screening Hanson Hosein's documentary "Independent America: Rising from Ruins". This documentary focused on business owners trying to lead the recovery in post-Katrina New Orleans

After conducting our research a list of user needs was created. This was meant to be a list of specific information needs that we found were commonly provided or had been asked for. The purpose of creating this list was to synthesize our research and also to form an outline of the content that would be available on the website.

I ran three card sorting exercises with the user needs list. Due to constraints of both time and distance, I chose to have users from Seattle perform the exercises. There is a possible danger that arises from this and should be kept in mind if the website is eventually developed for use in the Gentilly community. The card sort subjects were not familiar with the situation in New Orleans and therefore lacked a certain context that may prove very important. The subjects' mental model of how an information resource website would be used may in fact be very different from that of Gentilly residents. I felt that this was an acceptable risk because the goal of this phase of the project was to create a model for how the site would eventually work. In the recommendations to the sponsors, I noted that when the site is developed, user testing will have to be done to ensure that the navigation structure makes sense to the Gentilly community.

Wireframes

The wireframes (see pages 10-25) for our website were created using Visio. They were designed to show the basic layout of the major pieces of information contained on the website. Navigation menus, buttons that users could interact with and active links were all included on the wireframe pages. The actual content however was not included as it didn't exist and may have proven distracting to users.

Generally, wireframes would have only been created for the pages that contained unique interactions. I wanted to use the wireframes to do usability tests so one of my teammates and I created one for every page that users might navigate to during a usability test. For the first round of testing we created nearly 30 pages of wireframes.

After the testing phase, I refined the site's interactive elements and created a new set of wireframes. This set included only the pages with unique interactions and will be handed off to those who will work on the developing the website.

Page Flow Diagrams

After using the original wireframes in usability tests, I created page flow diagrams (see pages 1-9) for the website. The feedback from users led to design changes that affected the site interactions. These changes are reflected in the final page flow diagrams. They were based on the visual vocabulary designed by Jesse James Garrett (http://www.jjg.net/ia/visvocab/). The diagrams link to both the sitemap and wireframes allowing a developer to gain an overall understanding of how the site works.

Sitemap

The sitemap (see page 1) was a single page diagram that was meant to show how the user could interact with the website. It differs from other sitemaps in that it doesn't show the entire hierarchy of pages within the website. The reason for this is because the site is meant to be dynamic in nature and as users continually add content the site hierarchy will change over time. The core interactions though will remain consistent so this was a more important document to show to developers.

Designing Usability Sscenarios

Before conducting testing, I needed to consider what our team wanted to test the site for? While testing the navigation scheme was important, I felt it was more important to test the functionality of the site based around the following ideas:

• Giving information context
• Sharing of knowledge
• User generated content

I created scenarios that asked users to complete tasks where they would have to ideally use an interaction button. The second benefit to framing the test scenarios around interactions was that we could still observe how users navigated to the pages that they were directed to. This allowed us to note if there were any large disconnects between the navigation scheme and our users' mental models.

Use Cases

The use cases were simply what I felt were the ideal steps that a user would take to complete the tasks in the usability test. This included not only how to navigate to the desired page but how to complete the interactions. There were two reasons for creating the use cases. First, they mapped out the sequence that we expected users to follow. This helped my teammates and me when administering the test and playing the role of the "computer".

Second, by forcing me to think about the interactions I gained a deeper understanding of the site design. This was valuable when the users behaved differently than expected. Having this understanding helped give us greater insight when analyzing the results and making necessary changes.

Implications of User Testing

Due to time constraints and worries about access we chose to conduct our tests with users from Seattle. The main concern in using this group for testing was in possible differences in exposure to the Internet and its conventions. During our research, we learned that access to the Internet in the Gentilly community is generally not as high as it is in Seattle. Due to that, there are some concerns that the usability of site may be misrepresented. During the test some of the users made comments about elements such as drop down menus and pop up windows. We decided not to incorporate them in our second prototype because we weren't sure if these conventions would test well with users in New Orleans. If it turns out that users are comfortable with these elements, they can easily be added to the design. Aside from the concerns about differences in familiarity, we felt that testing with users in Seattle was appropriate. The biggest advantage was that we had immediate access to test subjects. The second advantage was that we could conduct the tests in person as opposed to virtually. This was a critical factor because a lot of the understanding of the users' difficulties comes from being able to sit next to them and watch them complete the tasks.