Tampa Bay Regional Planning Council

Hi, TBRPC,

We’ve combed through the work we’ve amassed over the years and hand-picked these case studies just for TBRPC. There is a full range of creative, technical, and strategic know-how in these case studies for you to fossilize just what kind of partner you will find in idfive.

Welcome TBRPC,

On this page, you’ll find the case studies we’ve selected especially for you. All of them showcase the talent, passion, and ingenuity we put into everything we do. Reach out if you have any questions!

This website uses cookies to anonymously measure traffic and to improve your experience. Privacy Policy.

I consent to tracking cookies

A Baltimore City mailbox with an "I Heart City Life" bumper sticker attached to it

Live Baltimore

Recruiting residents to Charm City.

View Case Study

Live Baltimore

Placing Customized Web Tools for Baltimore's Premiere Resident Recruitment Nonprofit

Live Baltimore, a nonprofit organization whose mission is to recruit and retain Baltimore City residents, needed a new website that could convince a wide range of potential renters and homebuyers why Baltimore is the right place for them to find a home and stay long-term.

It also needed to offer them the tools and resources to do so.

278

Neighborhoods in Baltimore

We cherish every chance we get to work for awesome clients with incredible missions such as these guys. Live Baltimore is an important hometown brand charged with showcasing how Baltimore City is a fantastic place to raise a family, work, and play. And our website does exactly that for them.

Andres Zapata

Founder

Strategy

How do you promote a “city of neighborhoods” and connect potential residents to the areas that best fit their needs, priorities, and preferences? idfive developed an interactive quiz that matches potential homebuyers and renters with the City’s neighborhoods according to major criteria such as:

Cost
Neighborhood “vibe”
Commuting distance to work

Site visitors have the option to set up My Personalized Moving Planner, an account that stores neighborhood recommendations, provides access to financial incentive programs, receive one-on-one consultations with Live Baltimore staff members, and connect with participating real estate agents who specialize in select neighborhoods.

Webpages for each neighborhood offer a glimpse of what it’s like to live there, with “At A Glance” information providing:

Estimated mortgage
Estimated rent
Median Home Purchase Price
Home types
Percentage of residents who own/rent

UX Design

A “Meet Your Neighbors” callout section provides links to community organizations and homeowners associations, and many neighborhood pages feature residents who share an insider’s look and who users can contact directly for more information — a uniquely personal touch.

The nonprofit’s homebuying resources are also easily accessible through user-tested navigation, as well as information about Baltimore city services; public and private schools (with map); major employers; colleges and universities; and homeowner incentive and loan programs.

Development

Our developers love a challenge. Here’s what they loved about the Live Baltimore redesign, by the numbers:

The site has integrations with at least 9 supporting services—Salesforce, Google Maps, Recaptcha, Walkscore, YouTube, Vimeo, Eventbrite, Google Translate, and Sendgrid.
The design includes 14 different content types, 12 with the capability of being saved to user profiles.
The three different maps share as much code as possible, but serve different functions and have different requirements.

https://idfive.com/wp-content/uploads/2020/07/idfive_website_internals_casestudy-–-7.png

The Result

An engaging, entertaining, and informative website that is as unique as the city it promotes.

A scientist standing in a stream measures water depth for a study

COPEWELL

Improving community resiliency to disasters.

View Case Study

COPEWELL

The Challenge

The Composite of Post Event Well-Being (COPEWELL) project — part of the Johns Hopkins Center for Public Health Preparedness — uses an evidenced-based approach to help communities improve their resilience to disasters. For the project to be successful, complex data had to be presented in an accessible format to a broad audience with varied expertise.

Strategy

When you’re tasked with a data visualization project, it’s tempting to go the bells and whistles route and produce a complicated, impressive looking, but ultimately useless tool. Instead, the idfive team focused on function. In researching our primary audience — government agencies and departments at the township, city, or county level — it was clear that the majority of end-users would not have a background in disaster research or system dynamics. So, even though we were dealing exclusively with data, we had to make the raw numbers secondary to what those numbers meant.

Whenever possible, we provided context, anticipated questions, and connected results with actionable next steps. For example: A low value for this measure means that [name of county] is scoring in the bottom third with regards to Recovery compared to other census areas. Efforts should be made to strengthen this value.

To ensure that the tool met the needs of both the primary audience (local government agencies) and secondary audiences (federal government agencies and NGOs), data was presented by county and state as well as nationally.

It was equally important to describe and label the data so that it was easily understandable, including definitions where appropriate.

Complex data sets were presented in clear categories — model inputs and model outputs — with domains and definitions supplied for each category.

See Tool in Action

43

Validated measures in COPEWELL’s modeling tool

I loved getting in the weeds of how this tool worked, particularly on something where the potential impact is so significant. The interactivity is the ‘wow’ factor, helping policymakers make decisions to improve our lives.

Andrew White

DIRECTOR OF UX AND INFORMATION DESIGN

UX Design

Whenever there is data, there is a tremendous opportunity to tell a data story. We worked closely with our client to intimately understand every facet of the data so that we could engineer a data-powered interactive storytelling telling platform. In the end, we gave users the ability to author their own macro and micro story through discovery. The final expression is a user-centric tool that can be interrogated in multiple formats, including visualized and structured data.

Development

The idfive development team wrote a data processing application that does a minimum of 496,436 calculations ahead of time, so those values aren’t calculated every time a new user loads the page. The application then assigns the proper color value to every data point inside of every census area.

The Result

An accessible tool puts the power of data into the hands of community leaders and policymakers to improve community functioning and resilience to disasters.

A University of Maryland student in a space suit ties rope during an underwater equipment test

UMD Innovation Gateway

Designing a website as bright as the future.

View Case Study

UMD Innovation Gateway

Showcasing the Innovation of a Major State University With a Unified Web Experience

The University of Maryland College Park (UMCP) is the state’s flagship campus and a major engine of innovation, new discoveries, and entrepreneurship. The university boasts more than 57 innovation centers across campus, but most are part of a larger division and were often difficult to find. idfive built this site to link investors, partners, students, faculty, alumni, and businesses to the full range of opportunities on campus.

See it here.

57+

Innovation entities at UMCP

“There’s an incredible amount of innovation going on at College Park. It was exciting to have the opportunity to create a site that can serve as an ‘Innovation Concierge’ to the offices, programs, centers, and academic units blazing new trails at the University of Maryland.”

Peter Toran

Lead Strategist, idfive

Branding

The site needed to scream “innovation” while also sticking to the University of Maryland brand and guiding a wide range of users to the information and resources they need. idfive used vibrant colors and geometric shapes throughout the design to emphasize the core principles of the Innovation Gateway and invite people to explore, discover, and engage.

UMD Red

UMD Yellow

Accent Turquoise

Accent Blue

Accent Green

Accent Orange

2 boxes with search resources and categories for engagement

User Experience

The Innovation Gateway site exists to connect people to opportunities and knowledge at UMCP while also promoting the work of its more than 60 centers of innovation. However, with so many choices across so many disciplines, streamlining the visitor’s experience so they could find what they were looking for — when they often weren’t really sure what that was — presented a challenge. We utilized rigorous usability testing and an intuitive structure as a foundation for a site that was both visually stunning and highly functional across devices.

Mobile sized article about startups and businesses

Mobile size menu of the areas of impact for UMD Innovation

Development

Truly conveying a sense of innovation meant adding thoughtful, playful touches to the site through movement and interactive elements that match the feel of the design and elevate it into a full, immersive experience. And behind the scenes, we added a little innovation of our own by leveraging elements from the main university kitchen sink to create a flexible structure that allowed our team to focus on maximizing the impact of the homepage.

Innovative Functionality

The engaging, vibrant, and contemporary design of the homepage was enhanced with some innovative front-end programming. Utilizing CSS transforms and SVG, the geometry and animations of the site were developed to work across a wide range of browsers and device types including high-resolution desktops, tablets, and standard smartphone screens. Using those technologies allows the site to load quickly for users on a variety of network speeds and keeps animations feeling natural and smooth. Micro-interactions were tailored to create a consistent feel throughout the site that accentuated the site’s bold aesthetic.

Maryland State Arts Council

Constructing a new platform for local artists.

View Case Study

Maryland State Arts Council

The Challenge

The Maryland State Arts Council (MSAC) needed a brand new web platform to serve as a resource for Marylanders. Basically having an “Arts-one-stop-shop” for all their constituents; from arts and entertainment districts, to organizations and individual artists. Most notably they needed to directly grant artists access to highlight and sell their work.

See the MSAC website.

Research

idfive’s thorough Discover360 process uncovered the need to create a dynamic web application using a multitude of data sources, user roles, workflows, scenarios, and content types. We created streamlined experiences with the flexibility for integrated content like custom profile dashboards for organizations and artists, an interactive map of all arts in MD, etc.

Number of templates, including an arts registry.

Design

The site had to reflect the incredible diversity of the arts in Maryland with a visually arresting design and subtle, textural, illustrated backgrounds that touch on every genre of the arts. Infusing that with bold and modern design elements focusing on sensible layout of information made the site not only visually appealing, but practically enjoyable to explore.

https://idfive.com/wp-content/uploads/2022/07/MSAC_Two_Img_02.png

Development

To create a seamlessly integrated web application, idfive’s development team engineered an elegant, joyful, and simple to use profile dashboard to allow artists across the state of MD to manage their content. They also custom-built several JS MVS applications that allow powerful browsing of art work in the directory.

1.8K

Profiles Migrated

To maintain the integrity of the content of thousands of profiles and their associated artwork, idfive migrated thousands of pieces of content from the previous CMS to a new one. That meant mapping and automating a migration of hundreds of fields from one platform to another.

Client Success

Undertaking a complex site like MSAC requires “structured flexibility” and a truly collaborative effort with the client team. Through wireframe, design, and development, the driving imperative was to create an impactful site that serves a wide range of constituents to promote the arts throughout Maryland.

Baltimore Police Officer smiles, wearing sunglasses and holding a traffic control whistle in his mouth

Baltimore Police Department: A Force for Good

Recruiting a proud new generation.

View Case Study

Baltimore Police Department: A Force for Good

Messaging a Recruitment Campaign Around Positive Change

A changing economy, restrictive police qualification standards, and expanding responsibilities are challenging police department recruitment efforts nationwide. For the BPD, a strained relationship with the community it serves compounded these challenges. The BPD needed an authentic yet hopeful recruitment and engagement campaign that demonstrated commitment to constitutional community policing while initiating restorative dialogue.

See the recruitment microsite.

baltimore police department full width desktop ad

Strategy

Working with the BPD and the Mayor’s Office of Performance and Innovation, idfive uncovered insights from hundreds of hours of officer and community interviews. The message was clear: the traditional macho recruitment messages weren’t going to work. The community didn’t want “cops.” They wanted the police to be a force for positive social change.
We also realized that the best way to reach the community was through the voices and stories of the officers who had been tirelessly working to do good in their own communities. By focusing on their experiences, told in their own words, we knew we’d be able to inspire a whole new generation of recruits who were committed to doing good in Baltimore.

Branding

Bold. Honest. Unflinching. We knew that those three tenets needed to inform all aspects of the campaign. The design bucked the traditional blue often associated with police, and instead featured a bold yellow and black, the colors of Baltimore City’s flag. The strong, condensed font modernized the campaign. Key elements include a main headline style, black and white photography, pops of yellow, custom icons, and the BPD shield logo. These design elements solidify the campaign’s goals and maintain brand consistency.

Black

Yellow

Male Baltimore Police officer in uniform

Campaign

The campaign tells stories of real officers who’ve made a real difference in Baltimore. It features honest portrayals of officers and messaging that focuses on the positive aspects of policing — without glossing over the challenges. The #aforceforgood campaign speaks directly to potential recruits who want to bring change to their communities.

Design & Copywriting

The campaign includes digital display ads, paid search, and social media video content as well as :60, :30, and :15 online commercials featuring interviews, body camera footage, and officer profiles. Developed in partnership with the creative agency Kapowza, #aforceforgood sparks an honest but optimistic conversation about the future of the BPD and the city.

Our strategy for this campaign was to let the officers (and their experiences on camera) we featured tell the story. The message — be a part of the greatest comeback story in America — stressed the need for positive change agents with a commitment to social good. As the campaign progressed, we provided a deeper, more visceral look into the impact of police officers. We evolved a conversation that was sparked by negative cell phone videos and court cases into the narrative of a department recommitted to community-based policing and a city’s rebirth.

Media

Online tactics allowed us to better target, measure, and manage audience segments. We focused on metro areas with demographics similar to Baltimore’s — but whose police department salaries were lower and costs of living higher. We appealed to their shared experiences and promoted the benefits of a life and career in Baltimore with social media, YouTube, display, and paid search. We also rewrote and promoted job posts on Indeed and on less traditional sites like Idealist — reframing the role of police officer as creative problem solver and community advocate. Tactics led to landing pages with promoting the audience-specific nuances and benefits of a career with BPD.

Results

The campaign has paid dividends. Between July 2019 and June 2020, applications to join the BPD have doubled and hiring is on pace to increase by 33%. In just nine months, the campaign logged 13,962,753 impressions and 265,055 audience interactions, which have driven the outstanding results.

33%

Increase to hiring pace

Nighttime photo of the Milky Way visible over a mountainous horizon

Johns Hopkins APL Civil Space

Expressing the wonder of space exploration.

View Case Study

Johns Hopkins APL Civil Space

DESIGNING AND DEVELOPING A SPACE EXPLORATION WEBSITE AT THE SPEED OF LIGHT

The Johns Hopkins Applied Physics Laboratory (APL) Civil Space project needed a brand new website to communicate the magnitude and “cool factor” of their work — from defending the planet from asteroids to unraveling the mysteries of the universe — to multiple audiences. And they needed it in nine months. It was rocket science. Literally.

Check out the APL Civil Space website.

Going Boldly

Sure, idfive developers had created interactive maps before. But to meet the challenge of galaxy travel, they created a destination map of the universe — going boldly where no developers have gone before.

Number of templates, including an interactive galaxy map

Strategy

Following our tried-and-true script, an idfive team kicked off the project with our Discover360™ process. We spoke with scientists, engineers, management, marketers, and educators. [A side note: These are some awesome, inspiring folks, some of whom worked on the country’s first space program in the ’60s.] We surveyed a wide cross-section of potential site visitors. We geeked out on web analytics and content audits (not to mention interstellar space), and scoped out what others in the field are doing. Armed with all of that data, we were able to share with our partners a creative brief and strategic direction that would inform everything from site architecture to design. Our aha moment: The site needed to appeal to a wide range of audiences — from middle-school students to rocket scientists — without confusing the one or condescending to the other.

Then COVID-19 hit.

But the idfive team and our APL Civil Space partners refused to let a global pandemic get in the way of our momentum. We switched our brainstorming workshop to a virtual format and presented the first rounds of a proposed Information Architecture and wireframes. Following revisions and approvals, we moved to the design phase and presented three concepts. Elements from all three were incorporated into the final design.

To meet the tight timeline and maximize budget, our developers completed the front- and back-end work concurrently with the design phase, relishing challenges like building a map-of-the-galaxy app. Our copywriters made sure that the final copy would appeal to space novices and rocket scientists alike.

Design

The visuals needed to be as awe-inspiring and compelling as space itself. Our design “North Star,” as pointed out in the project creative brief: “Think of the first time you saw the night sky on a clear, moonless night — away from artificial light or interference.” One picture = 1,000 words.

Development

idfive developers took the challenge of engaging site visitors to a new level by creating a Drupal 8 widget with Augmented Reality and 3-D assets that delivers state-of-the-art space instruments to your screen. Or maybe you have an iOS and want to drop the New Horizons spacecraft on your kitchen counter.

Conclusion

The APL Civil Space website engages school children, rocket scientists, and everyone in between with a richly visual, highly interactive experience — one that piques curiosity, encourages further exploration, and induces wonder. Just like the night sky on a clear, moonless night.

There’s more where that came from.

Explore our website, meet our team, and learn about idfive. Let’s Go

Show Me