Neighbors Public Safety Portal

Product Design

A web application that allows public safety to play a crucial part within neighborhood safety.

The landing page which is the neighbors feed, as well as the mobile version.

Overview.

After working with Ring for 2 years, dabbling within product design here and there a full time position opened up for product design for a project called Neighbors Public Safety Portal.


This project was mostly kept secret for some time but eventually made press releases which had both positive and negative connotation.


In terms of the tech stack, this was a react web app and one of our biggest challenges was eventually setting it up for mobile use cases.


The Challenge.

In terms of the challenges that we faced while starting off our redesign + mobile platform.


  1. There was no mobile optimized experience.
  2. Massive amounts of bad code from a technical perspective which made new updates very challenging.
  3. In terms of branding within this web app, it was far off from the core Ring branding –– thus making it look like a faulty product.
Some of the business goals we faced when tackling this challenge.
Old Neighbors Feed Designs.
Old manage videos designs.
Old admin screen designs.
All of the sections within the web app.

Neighbors Feed.

Within this app there is data fed through the Neighbors App (consumer facing) and this page will allow law enforcement to view this feed not on their phone.


Which allows the user to interact with other posts within the feed, and also browse posts through a map view.

All of the sections within the web app.

Video Requests.

One of the main features in demand for this app is allowing the law enforcement to request videos from a given area if it correlates with the case investigation.


  1. The officer must go through a flow of creating the case, including the area and details about the crime.
  2. The ring user will receive an email or in-app notification asking if they wish to share video with the police department within their area.
  3. The ring user is presented with two options.
    1. Share all videos at once
    2. Or review videos through a selection user interface, allowing them to watch their videos.
  4. Once the officer creates this request over time the videos within the given case they created with begin to populate and they can then review the content.
On the left side it's the ring user side, and on the right side it's the law enforcement user.

Manage Videos.

This is where the user can see all of the content they've requested per the given area organized by case title.


  1. Filter through the videos from requests made, labeling them as they go.
  2. Watch videos an notice any particular patterns within location
Intital landing for users to look through all of the cases as well as notice location.
Case details, showcasing when videos are expiring.
Case detail page while viewing a video.
Mobile view for manage videos screens.

Settings and Admin Screens

So, within our team at Ring there's constantly an on-boarding process for agencies and with that come admin duties for some on the team.


Which could involve,

  • Removing users from the database.
  • Access to activity from particular users.
  • Changing the location or area for users.
User profile.
Viewing all of the users comments..
Mobile version of the screens above.

Design System + Handoff

When these concepts designs are completed how do we get them to the developer?


Well, one thing that I mentioned earlier was that there needed to be alignment in terms of components and certain values like padding.


Once I first joined the team one of the first things I started working on was how do I develop a design system to begin to bring alignment to all of the new features and concepts.


Some of the lessons I learned while doing so:

  1. A design system is a living breathing feature and it will constantly need updates as we move onwards.
  2. Developer communication is massive, understanding how they process this sort of system is HUGE.

In terms of process.


Designing the components vividly → Process through Zeplin → Double check with developers afterwards.


I would say this is probably my favorite part of the project.

Small snippet of some UI components.

Conclusion

Overall I was a solo designer within this project and insanely grateful I worked with an amazing team of developers and a project manager ^-^.


In terms of what I've learnt from this project:

  1. It's easy to be surface level while you're the only designer within a team, but difficult to gain the time to go deep into several concepts without putting in the extra hours. (example: always balancing different tasks to keep the product afloat.. sometimes being marketing etc)
  2. Always keep your project as organized as possible with staying on track of all of the iterations and failed states, simply because you never will know when it'll be useful.

What would I have changed moving forward:

  1. Give more visibility to the core design team to make sure there isn't any overlap for certain components, no need to re-invent the wheel.
  2. Remain more in-sync to what's going on in the current engineering sprint and what they're building out — so it won't be too big of a surprise if you have to define certain details within the pages.