Abductedcow | Loveisrespect.org Usability and Relaunch

Usability Test and Site Redesign

Loveisrespect.org is a project run by the National Domestic Violence Hotline (NDVH) and Break the Cycle (BTC), two national not-for-profit organizations. The site is aimed at youth, educators, and social service providers, offering informational chat, text, and phone support for victims struggling with relationship abuse. Implementing an intuitive and well-designed information architecture strategy is an important element of any site, but especially important for public service sites like Loveisrespect.org. Since the site provides abuse support, it can be assumed that some of the target users will be experiencing trauma or be in threatening situations. Therefore, it is essential to establish clear and reliable pathways to information. The old site had an acceptable visual design, but the information architecture was confusing and would benefit from restructuring. I worked with two teams on this project – as a member of a group project at the School of Information, we developed and tested prototypes based on usability principals and current best-practices in the field. In my role as Technology Director at NDVH, I lead a team that facilitated the final build-out of the site.

Analysis and Inquiry

Content Inventory

A content inventory provides an important piece of any information architecture project: an understanding of a site’s structure and the quantity of information involved. Until an information project team understands the existing content and structure of a project, it is impossible to build a new and effective organizational scheme. Our team created a content inventory of loveisrespect.org by examining the site map and the navigation menus on the site. Through these methods we determined the scope of the site’s information, and we were able to begin redesigning the site’s architecture.

User Surveys

In preparation for this project, the National Domestic Violence Hotline (NDVH) undertook several informal surveys regarding the the loveisrespect.org (LIR) website.

Three separate survey tools were utilized:

A survey from the LIR website, launched from the side bar. The goal of this tool was to gather feedback from the casual user of the site.
Following chat sessions, users were given the option to provide voluntary feedback on their experience with the site.
Advocates who helped chatters find resources were surveyed on the site’s usability and what feature or features they felt were missing.

These survey audiences also roughly correspond with the persona’s our team developed later in the project. These survey tools helped guide our redesign; we identified the following ideas and issues and incorporated them into our redesign plan:

The overall site aesthetic was well received by both end-users and advocates.
Accessing the chat function of the site – one of the primary functions of the homepage – was confusing due to the design and placement of the button.
Advocates were frustrated by the poor quality of the search function, specifically when trying to share blog links with chatters.
End-users found finding information on the site to be either “difficult” or “very difficult”
Advocates suggested the addition of a recovered system or related posts
While the overall response to the aesthetic was positive, respondents suggested that a more image-heavy layout would be welcomed.
Advocate responses also overwhelmingly favored a redesign of the primary navigation system, finding it difficult and confusing to utilize with chatters.
All surveyed users indicated a need for improvements in the mobile version of the site.

Using these broad points as a roadmap for the project, our team undertook our redesign with the following goals:

Improve primary navigation system through user testing
Make the chat system easier to access
Preserve the existing aesthetic, but utilize more images in the site design.

Competitive Analysis

Competitive analysis is a key part of any information architecture project, providing project managers with detailed information on how similar organizations structure information. This might include how they structure their services to meet the needs of users, or an overview of website usability problems.

For this portion of the project, we chose four similar not-for-profit organizations. We chose the sites based on conversations with LIR staff and a basic internet search for national victim service providers that focus on a youth audience. Each similar organization features a web- or SMS-based service facilitated through their website. The following sites were evaluated:

Polaris Project: Human trafficking text-for-help line.
National Runaway Safeline: Serves runaway and homeless youth through web-chat, toll-free phone and other channels.
CrisisTextLine: A catch-all, text-for-help service for teenagers facing a comprehensive range of issues.
Trevor Project: Focused on LGBTQ youth and bullying.

While these sites address issues that differ from LIR, their missions remain relatively similar – engage young people on multiple channels, both traditional (i.e. phone) and newer, digital ones. At the same time, these sites hope to provide content that allows their users to make informed decisions about their own personal situations. We focused on three primary issues in our analysis:

Navigation
Access to Services (web-chat, SMS, phone, etc.)
Search Function

Competitive Analysis Conclusions

Each one of LIR’s peer organization websites offer unique lessons that LIR can benefit from. All of the peer organization sites offer simple and easy-to-use navigation menus at the top of the page. The users of these sites often want crisis support information quickly, and all four sites offer simpler menus than LIR. From studying these sites, LIR can adopt clearer and more obvious methods for crisis support access, such as clearly labeled buttons and drop down menus that focus on simplicity rather than comprehensive information.

LIR can also benefit from this analysis in terms of search services offered by the peer organizations. They all rely on a basic Google search function, which is, in some instances, poorly integrated into the organizations’ sites. LIR can integrate a site search using a service like Google, but if it does, it must ensure that it does so in a manner that is clear and obvious to users.

In conclusion, LIR’s website is comparable to its peers but it can be improved by redesigning with simplicity and speed of access in mind.

Cardsort

Cardsort testing assists in the evaluation of the information architecture of a site design. We chose to implement a cardsort to help establish user expectations of the site’s global navigation, asses the overall usability of the site design usability, and gain understanding of user challenges with the site’s existing IA structure. We used Concept Codify to perform a closed cardsort test, receiving 18 responses. The results of the cardsort assisted in our global navigation redesign.

Ideation and Design Process

Design Personas

Personas are models of typical site users based upon the site’s target audience and actual visitors. Personas provide an easy way to study an information architecture to see if it meets key user needs. As noted by Usability.gov, “The purpose of personas is to create reliable and realistic representations of your key audience segments for reference.” (“Personas.” Home. Usability.gov, n.d. Web. 21 Nov. 2014.).

Loveisrespect.org is focused on meeting the information needs of four key user groups: teens in need of counseling and support, loveisrespect.org advocates and counselors, educators who want to know more about relationship abuse, and counselors who want to do the same. These categories were created based upon the goals of loveisrespect.org to provide teens and adults with information about relationship abuse. By creating personas for these groups, our project team was able to better understand the different motivations and needs of the website’s users.

Ideation & Sketching

After reviewing the data collected during the competitive analysis, our team began brainstorming ideas on how to reduce the screen clutter associated with the site’s primary navigation. Each heading within the navigation contained an overwhelming number of options; the navigation heading titled “Get Help” contained 31 options, all displayed at the same time. Many of the selection options had lengthy titles or contained ambiguous wording. We sketched out ideas and came up with suggestions for new headings, or for shortenings and rewordings that would preserve the meaning of the pages while making them more accessible to users.

Low Fidelity Prototype

Wireframe

Wireframing was created using Axure, with the intent of minimizing the screen clutter associated with the primary navigation system, simplifying the blog layout, and increasing accessibility of the chat feature. Data gained during the cardsort, combined with our earlier developed sketches, provided the groundwork for our cascading navigation menus. All incorporated features in this design were implemented with our four personas in mind, and the understanding that primary users of the site often need the information quickly. Information was grouped by subject into large horizontal bands that we ordered by use and importance to the site. At the top is the essential navigation and support links; in the middle the popular blog area; followed by quizzes; and last some brief information about the organization and its sponsors. This design allows users to view a significant amount of information on a particular subject area without having to dive deeply into the navigation menu.

User Testing
Our selected tasks were created from the perspective of the primary users, via the persona of Jennifer Talmadge. For each of the four tasks, we requested that our participants record the number of steps necessary to complete the task (12 steps, 34 steps, etc., or “I could not complete this task,”) and note the difficulty level of successful completion. The assigned tasks are as follows:

Start a chat with a loveisrespect.org advocate
Learn how to volunteer at the organization
Find legal help for yourself
Take a quiz on how you would help a friend

Testing Results
Twelve participants were selected to perform the assigned tasks, and the results were consistent. The first two tasks were achieved in 12 steps by all participants, and the third task completed in 34 steps. All participants rated the first three tasks as “Very Easy.” The fourth task, related to taking a quiz, varied from user to user in number of steps, but no difficulty level above “Easy” was selected.

High Fidelity Prototype

The final, high fidelity mock-up was created using a website prototyping tool called Sketch and published via Axure Share. The design follows the tested wireframe closely, with minor changes featured in the footer area and quiz design. One primary goal of the design is creating clear entry into the chat system – the chat button and primary navigation would be fixed relative to the scrolling position in a standard desktop environment, while in a mobile device environment, the chat would realign to the top right of any given screen. The site also features a heavier use of images to appeal to the youth audience, and multiple entry points to service provision via three call outs to chat, text, or the toll free hotline. The final home page design can be accessed here.

The primary navigation system has also been significantly reworked, to provide a simpler system than the original expansive menus. Using both the data from the cardsort exercise and feedback from wireframe testing, we designed the menu system, accessible here. The menu system combines redundant pages and presents the user with a more user-friendly hierarchy.

The blog entry page (available here) features an improved archive system, as well a recommended grouping of related posts in the right column. A system of bread crumbs has been added to the blog post page to help users establish their relative position within the architecture. The comments section has also been reworked to accommodate threaded replies and a Reddit style up/down voting system.

Final Site Design

Team Structure and Migration

For the final site design, I oversaw a cross-departmental team, pulling in content creation and graphic design specialists form the communications team, fundraising perspective from the development team, and my own staff from our then newly-formed technology team. The immediate challenge was migrating and organizing content, moving from a Drupal 5 structure to WordPress 4.1. This was facilitated (with assistance from a long-time sub-contractor) through custom MySQL queries. The team then moved through each content section, using the previous user testing as guidance, building new pages as needed, and removing or combining content as necessary to accommodate the new information architecture. Extensive modifications were also required on the selected WordPress template to accommodate the live-chat system.

Quality Assurance

Following the migration and page building process, the team undertook a thorough quality assurance review of the staging site. This review revealed problems with the responsive pages that required the creation of custom media queries in order to accommodate older phones. In some cases, the (sometimes difficult) decision was made to hide interactive elements on mobile devices in favor or prioritizing content and advocacy-related elements.

URL Mapping and Site Launch

The new site involved extensive revision of the permalink structure. As such, great efforts were taken to re-map all popular posts and pages to their new home. The team prepared mapping documents prior to launch, reviewing popular links in Google Analytics as well as remapping blog elements to the revised category taxonomy.

The site launched on April 1, 2015, almost 11 months after the start of the survey process. As we had devoted ample time to a QA process in prior months, the launch was very smooth, with only a few minor hiccups in the URL mapping. Overall feedback has been positive, particularly from the digital services advocates who use the site on a daily basis.

Team

Andrew Florance
Patrick Maples
Sara Pedrosa
Breanna Rollings (NDVH)
Kiah Wagner (NDVH)
Kathryn Robinson (NDVH)
Veronica Fox (NDVH)

Completed: Feb 6, 2015