mar 2015

MFA Housing NM and Home to a new website

MFA was ready for a design update on their website, but also needed to add more robust content management functionality. We created a design that supports their mission of providing the comfort and security of a home to all New Mexicans by utilizing warm, home-sweet-home images as back drops for the extensive information. The user interface is simple, big, and easy to navigate—and also easy to update and manage for MFA. Fully responsive website built in Expression Engine.

MFA Housing NM ExpressionEngine Website

MFA Communications Manager, Leann Kemp, tells the whole story of the website redesign and what has been achieved since its launch:


One of the ongoing challenges of websites is that they have a fairly limited shelf life. Like a closet that gradually gets cluttered, sites accumulate piles of outdated material that make it hard to find anything. While it’s tempting to just move things around to try to accommodate and organize new items, things never seem to fit quite right after a while. 

The New Mexico Mortgage Finance Authority (MFA) is a small housing finance agency with a small budget for marketing and promotional materials. Our website is the primary way we make ourselves visible to the public. It is also the principal way we communicate information to our partners and sub-grantees.


Strategic Objectives

When MFA designed its website in 2008, it was an enormous improvement in terms of function, structure and ease of use. Organizing the site from an end user perspective rather than following the internal departmental structure made the site friendlier, and rewriting the content in a non-bureaucratic style made it more understandable. However, staff members still took multiple calls each week from people unable to find information on the website. In addition, the site was looking dated, and the consumer stories were old.

MFA began a complete overhaul of its website in January 2014 to make it fresh, vibrant and even more searchable and friendly. Every file, photo, story, form and piece of data was taken out of the “closet,” and evaluated, updated and reconfigured. In addition to updating the content of the site, the goal of the redesign was to visually communicate the positive emotion of home in a way that every website visitor could relate to. We wanted to deliver the site’s highly technical information in a way that was not overwhelming or intimidating. In short, we wanted people to feel “at home” and comfortable navigating the website so they would stay longer and learn more about MFA and how we could help them find quality affordable housing.


As part of MFA’s strategic goal to position ourselves as the go-to organization in the state for affordable housing information, we decided to add a housing library to the website. MFA had an internal housing library in the shared directory of our network, but we realized the information it contained would be even more valuable if shared with the public and our partners. A final objective was to involve more MFA staff in the maintenance of the new website and keep the front page populated with current MFA events and activities. 



One staff member from each department was designated to lead their section of the website redevelopment. There were multiple meetings with each lead, the communications manager and an IT staff member to think through what a website visitor would encounter in each section of the site. Processes were evaluated to ensure that documents were organized in a logical way, information was prioritized on the screen, and that the consumer knew where they were on the site at all times. In several cases, this brainstorming resulted in complete overhauls of the way information had been presented on the previous site.

Simultaneously, meetings occurred with the website designers, Ripe Inc. The imagery that was selected for the site captured the comfort and security of having a quality affordable home by portraying the little things that truly make a house feel like a home. The advantage of an image of a coffee mug or a vase of flowers or an apple pie, for instance, was that the viewer could mentally create their own version of home, which make it instantly meaningful to them. And the images, unlike the consumer stories and photos, are not quickly outdated. The pages of the website were laid over seven rotating background images, creating warmth, openness, and a less content-heavy feel.


The front page was designed with a section for MFA news items. Brief recaps and photos of events, links to new publications and other MFA news was displayed in a succinct format to keep viewers up-to-date on MFA activities and accomplishments.  


MFA’s website has eight sections, each with a different target audience. 

The website was designed with eight primary sections. Four of the sections—Homebuyers, Homeowners, Renters, and Emergency Housing-- were oriented toward the general public and consumers and were promotional in nature. The other four sections—Lenders and REALTORS®, Developers, Asset Management and Community Development – were designed for MFA’s partners and contained technical information, forms and manuals. When a viewer hovered over a button, a short description of that section’s content appeared to help them quickly determine where to go.


Multiple navigation options were designed for each page so that information could be accessed through more than one path. In addition to side navigation bars, each page was created with customizable tabs at the bottom for quick access to frequently used information. There were also options on each page to add quick links as needed. A top navigation bar and a bottom bar remained constant throughout the site, and a title graphic on each page reminded the viewer what section they were in. All of the icons were large and simple, making the site’s organizational structure obvious and easy to navigate.

The decision was made to change the website’s content management system from Drupal to ExpressionEngine. Expression Engine allowed for a custom design of the entire site rather than having to work within the confines of a template format.  Also, ExpressionEngine’s content management system was much more intuitive, which made for easier editing. About 20 percent of MFA’s staff received one-on-one training on how to update and maintain the website. Because the technology was so easy to master, the training sessions were only about 15 minutes long on average.


Last but not least, MFA improved upon its internal housing library and added it to the website. Our housing library now contains featured articles which are updated regularly, downloadable .pdfs of recent studies and reports such as the State of the Nation’s Housing by the Joint Center for Housing Studies at Harvard University, as well as links to other housing data sources. The housing library also contains state and local information including “quick facts” data and graphs for New Mexico on topics such as homeownership and foreclosure rates, affordable housing plans developed for various communities in the state, MFA’s strategic plan and HUD-required plans including the New Mexico Consolidated Plan, Action Plan, CAPER and Analysis of Impediments to Fair Housing Choice. 



Since the revamped website went live in January 2015, website traffic is up more than 9 percent. Further, viewers are 22 percent more actively involved when on the site – measured as “sessions” -- and they are visiting almost 21 percent more pages. In short, our partners and customers are comfortable searching and getting information from the site -- one of the main goals of the redesign. In addition, the average amount of time viewers are on the site has dropped. When the viewing time data is combined with staff reports of fewer calls from confused website viewers, there is strong evidence that people are finding what they need on the site quickly. And since viewers are looking through more of the site, it is functioning as a promotional tool.


Efficient Use of Resources

The total cost of the website redesign was just under $40,000. Ripe Inc. managed the project and acted as the liaison with the developer, which reduced MFA staff time on the project. This relatively small investment continues to pay off by saving staff time directing people through the website and by promoting MFA’s programs and services. 


— Leann Kemp, Communications Manager, New Mexico Mortgage Finance Authority


The latest buzz at Ripe.

ripe inc. branding, design, marketing communications. Albuquerque, NM