Hands All TogetherSafer citizen-police encounters
- Technology Advisors
- Technology Development Team
- UI / UX
- Design
Overview
Answering the question “What to do and what to say” with the goal of encouraging safer encounters between citizens and police was the impetus for this digital experience.
Conceived by The RANE Institute, this app is a non-profit source for information in advance of potential police encounters and events. The result is a collaborative effort of the RANE Institute, Citizen’s Crime Commission, The Justice Department, FBI, Red Cross, and many others.
Hands All Together is a true platform / screen agnostic experience. Its design transitions seamlessly from web to mobile, tablet to native app.
Hands All Together is both a responsive web experience with companion native mobile apps, which provide information and guidance through a series of articles aimed at both citizens and police. All the parties involved took this effort on, on a broadly collaborative basis, with the confidence that empathy and understanding between all sides is both desired and achievable.
Taking a service oriented approach Hands All Together is able to be ported to any new screen or device with ease. The entire infrastructure is built on a custom Node.JS Content Management System with custom end points on a per screen basis. Site launch – November 2015.
Wireframes
Mobile App
Key Features
- Fully device agnostic (desktop, tablet, mobile)
- Native iOS and Android
- Custom Node.JS CMS
- Content available offline, immediately updates with connection
- Share content
- Users may increase/decrease font size for readability
Responsive Website
Key Features
- Fully device agnostic (desktop, tablet, mobile)
- Responsive Web Enabled
- Custom Node.JS CMS
- Share content
Desktop
More Examples
Case study
Hands All Together | Digital Product Case Study | Genome Studio: strategy, craft, and momentum
Hands All Together | Digital Product Case Study | Genome Studio: strategy, craft, and momentum began as a question about community-centered communication. The people involved needed an experience that could explain the value quickly while still leaving room for the detail behind it. We started by looking at the moments when people looking for a clear way to participate need to decide, compare, remember, or act, then used those moments to establish a clearer order for the story.
The central design challenge was using direct language and welcoming pathways to make a social mission easier to approach. Content, layout, and interaction were considered together so that the page could carry atmosphere without hiding the information that gives the project its purpose. Early prototypes helped the team test tone and rhythm before visual polish made any single direction feel inevitable.
The finished community-centered communication experience is shaped by real conditions. People may arrive from a small screen, enter at a deep link, skim between sections, or return later looking for one specific answer. Headings, labels, imagery, and responsive behavior therefore work as a connected set of signposts. Each detail has a job in helping people looking for a clear way to participate feel oriented.
Implementation for community-centered communication carried the same care into the working system. Reusable patterns make future updates easier, while thoughtful loading behavior protects the first impression. The structure can support new stories, products, or campaign moments without asking the team to rebuild the entire experience whenever the content changes.
The lasting value of Hands All Together | Digital Product Case Study | Genome Studio: strategy, craft, and momentum is the shared understanding it creates. Stakeholders can see how the experience supports a wider goal, content owners have a clearer way to work, and technical teams inherit decisions that communicate intent. That alignment gives this project a better chance of staying useful long after its launch moment.
Compare this community-centered communication case study with other digital work, explore the supporting services, or read the studio journal for practical thinking about products and experiences. To discuss a similar challenge, visit contact.