UX and App Dev Copy

Hi, XXX

We’ve hand-selected these case studies to show you our range and depth in joyful, actionable, and easy-to-use web application design and development. As you wade through, you will see that we’ve got the strategic, creative, and technical chops to help XXX deliver an airtight web application, inspired creative, and outstanding results.

Welcome XXX

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.

Howard University “The Dig”

Unifying the news hub of a flagship HBCU.

View Case Study

Howard University “The Dig”

Designing an Integrated Web Platform for University Communications

Howard University’s Office of University Communications (OUC) manages an extensive portfolio of print and web properties, including the University’s main site, Newsroom, and Howard Magazine.

With its Newsroom, Calendar, and Howard Magazine websites in Drupal 7, scheduled for an end-of-life in November 2022, the OUC had an opportunity to create a new platform to meet its long-term communications needs.

50

Number of Howard web properties that receive distributed content from The Dig.

"Helping Howard showcase their excellence, community, and vision through this redesign was intensely rewarding. We were committed to re-imagining multiple aspects of their news hub: how stories are discovered, the themes guiding those stories, and the visual language."

Pat Balasavage

SR. USER EXPERIENCE AND INTERFACE DESIGNER

The Strategy

A project with an overarching goal this ambitious—to create a communications centerpiece that would speak to the internal and external audiences of one of the country’s leading historically Black Colleges and Universities—needed to start with extensive research. Our work began with a thorough Discovery process, including remote workshops with members of the Howard communications team that helped uncover internal editorial governance gaps and define the overall spirit of the project. From that collaboration, three themes emerged as central to the Howard story: Research, Community, Philanthropy.

The site also needed to highlight the achievements of Howard’s students, faculty, staff, and alumni, as well as celebrate the “change makers”—those in the Howard community who actively commit to positive social change. With themes and imperatives agreed upon, the idfive team developed an information architecture and wireframes with taxonomy terms to represent the best of Howard University. The taxonomies enabled the Howard team to implement a more effective Create Once Publish Everywhere (COPE) strategy across the institution’s major communications platforms.

UX Design

During user research, we discovered the need to balance the traditional brand look, but address the Howard team’s appetite for boldness and pushing the brand. While the site keeps the recognizable Howard blue, we made sure to use well-placed accents and white space to create areas of color and contrast. Angled elements and a variety of layouts were incorporated throughout the site to “break out of the box,” countering the grid-heavy structure of many news publications. We also emphasized high-quality photography, especially when featuring faces of the Howard community.

The final design leaves site visitors feeling:

Educated, as a reliable source of information with a unique perspective.
Uplifted, with a sense of success and progress.
Trust, that Howard is a worthwhile investment.
Pride, in the tapestry of the Black community.

And how users feel is central to our “neurodesign ux” practice.

Development

idfive developers took extra care to make sure the user experience came to life through hover effects and subtle animations, which help increase the feel of interactivity sitewide. The team also developed a wide variety of hero treatments to keep the different pages fresh, enhance engagement, and drive action.

african american woman with light hair holding coffee

https://idfive.com/wp-content/uploads/2022/07/Text-Two-Images-1906x1372-1.png

The Result

The Dig has become the “single source of truth” for Howard University, with relevant content that can be easily shared across platforms.

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.

Four chickens peck at the ground in a meadow in front of a coop building

FoodPrint

Making the website that makes sense of food.

View Case Study

FoodPrint

The Challenge

As a website that promotes food sustainability, FoodPrint strives to make people more conscious of how the food that they eat, buy, and cook impacts animals, the environment, and humans. You’ve likely heard of your “Carbon Footprint.” But FoodPrint wants to popularize the “Food Print”—and make it easier than ever for you to reduce yours. Partnered with the nonprofit, idfive sought to create an engaging and informative website that amplified this mission.

UX Design

The purpose of this website is challenge understanding and reeducate. It’s uncomfortable for most to find out they had it all wrong all along. Our UX threaded a thin line to meet these goals head on. We practiced with extreme empathy and created simple, guided, and additive experiences that progressively revealed facts and impact that lead visitors to new understandings, and ultimately to action.

Personalization

As part to the website experience, an interactive quiz application was developed that provides each user with personalized, actionable opportunities based on their input.

See the Quiz in Action

https://idfive.com/wp-content/uploads/2020/07/Two-Images-Text-1906x1372-–-1.png

The Solution

FoodPrint’s new website cuts through the cluttered dialogue around food sustainability. A comprehensive resource, the website places a broad array of stories and tools related to food sustainability in the hands of consumers. An intuitive food label guide; encyclopedia-level articles for 200+ foods; an innovative FoodPrint Quiz; and more are all organized by a sophisticated taxonomy system and site architecture. Optimized for search engines and shareable over social media, the website’s content has the potential to educate and assist countless consumers looking to make more ethical food choices

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.

University of Hartford

Banding together under a bold umbrella.

View Case Study

University of Hartford

Designing the Cross-Platform Launch of a University's Bold Strategic Vision

The University of Hartford created their UHart Start Strategic Action Plan as a guiding light for the next five years, then they partnered with idfive to turn their action plan into a rallying cry that would generate excitement and share their vision with stakeholders and the community.

The Strategy

After analyzing UHart’s strategic plan, idfive got to work by reorganizing the plan’s contents to lead with a shared vision in its realized state, and then use goals and objectives as proof points, creating a compelling narrative for the next five years and beyond. We also reformatted the action plan into a glossy, full-color 20-page booklet that puts the University’s future in the actual hands of key stakeholders, as well as a bi-fold mailer summarizing the plan for additional audiences. Finally, we built a robust and engaging landing page hosted on the main site that detailed UHart Start’s story while granting full transparency into the plan’s details and responsibilities.

Print Collateral

It’s nice to have a plan, but policy and strategic documentation can often look and feel sterile and calculating. Our job for UHart was to make it fun, dynamic, and useful. We started by remixing the UHart Start plan into a 20-page booklet. Leading with a bold visual representation of the UHart community’s vision, the spread showcases each goal with flair. The result is a tangible representation of UHart’s promise.

For those in the extended UHart network who are curious but not directly involved in the strategic action plan, the mailbox still offered an opportunity to showcase the vision for their beloved institution in a way that still feels real. The mailer succinctly summarizes the plan with a call to participate and engage. But even more importantly, it delivers a physical reminder of the benefits of buy-in to a donor base that rose to the occasion with a 30% increase in unrestricted donations during 2020.

Landing page

UHart’s vibrant brand color palette and pattern library beckon users to dig into strategic action and find out how to engage in key initiatives. The website rewards curiosity and exploration by progressively disclosing information to increasingly specific user questions. Along the way, custom module designs keep things visually interesting as users progress from passing interest to downloading the fully ratified policy document.

https://idfive.com/wp-content/uploads/2022/12/CS_Landing-Page_2_University-of-Hartford.png

The Result

Getting people excited and engaged with a strategic plan with just policy and strategic documentation can be herculean. Using the sum of its parts and remixing it into something exciting, compelling, and full of enthusiasm is how we did it.

Since deploying the landing page, the average time-spent-on-page was around 2:28, showcasing a higher-than-average engagement rate, rather than the average of 0:52.

2:28

Landing page engagement rate

Deep space photograph displays a distant star cluster and nebula

Center for Astrophysics | Harvard & Smithsonian

Building a universal brand for astrophysics.

View Case Study

Center for Astrophysics | Harvard & Smithsonian

The Challenge

Since its founding over half a century ago, the Center for Astrophysics | Harvard & Smithsonian became one of the leading astronomy and astrophysics centers in the world. But brilliant research didn’t necessarily translate into a brand that told a clear story of who they are and how their discoveries continue to expand humanity’s knowledge of our universe.

Research

We began our engagement with CfA with a two-pronged approach, reviewing existing communications and interviewing some of their top researchers and leadership. To gain an outside view, we also interviewed research partners, funders, and advisory board members. We had two clear goals in mind: understand the CfA, and find out how they’re perceived by the world.

850+

Researchers and staff.

For a life-long space nerd like me, working with CfA was an amazing experience. It was such an incredible privilege to get to interview some of the leading astronomers and astrophysicists in the world and learn more about the discoveries CfA has made and continues to make every day. I know all of us at idfive are immensely proud of the fact that our work is helping CfA tell their story better so they can continue to expand humanity’s understanding of the universe.

Sean Carton

Chief Strategist

Strategy

Our research revealed two key data points: 1) The CfA is regarded as one of the world’s leading astrophysics organizations; but 2) nobody really understood their structure, and that misunderstanding often led to difficulties in securing funding or recruiting scientists. They were doing some of the most amazing science in the world, but outsiders were confused about who was doing it.

Branding

We realized that in order to tell the true story of CfA, their name had to change. We wanted it to communicate CfA’s preeminent position in astronomy and astrophysics while communicating the equity of Harvard’s and the Smithsonian’s contributions. The new name – The Center for Astrophysics | Harvard & Smithsonian did exactly that, emphasizing science over structure.

Design

We wanted to create a visual presentation of the new name to reflect the CfA’s long commitment to science and collaborative discovery. The symbolic gradient of the logo is reminiscent of a stellar spectrum—a key tool of astronomy instantly recognizable by their external audiences—while the logo’s contemporary typography speaks to both today and tomorrow’s discoveries.

CFA RED

CFA VIOLET

Website

The redesigned CfA website, published in March 2021, features copy guided by updated messaging and a design informed by updated brand visuals. The website’s content strategy puts science first by prioritizing ongoing research via a “Big Questions” section, and highlighting research, people, and facilities within the navigation.

Conclusion

Through all of our work, idfive has helped the CfA navigate a complicated institutional environment to ultimately implement a clear, compelling, and consistent brand that speaks to both internal and external audiences. United and energized by the new brand and marketing, communications, and fundraising tools, the CfA can now focus on the incredible research and discoveries that lie ahead.

There’s more where that came from.

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

Show Me