SpotCrime
SpotCrime is a crime aggregator site accessed daily by thousands of users where they can easily find recent crimes near them and also receive alerts for an address of their choosing.
SpotCrime has been active for more than a decade and was in need of a technical and design refresh to keep up with the latest technologies and UI best practices. I was tasked with leading the design effort for this update.
We identified the following key areas for improvement:
An initial research phase was conducted to lay the groundwork for the remaining design work.
Three Hotjar surveys were used as a baseline; user trust score, overall rating (NPS), and alert awareness. Surprisingly, both the trust and NPS scores were higher than I had anticipated, given my assumption they would be low based on my own inherent bias. This was a good level-check for me as I continued thinking about design solutions.
There were two main insights from these surveys. This first was that many users were not aware they could sign up for alerts and that they would be interested in doing so had they known they could. The second was that if they were receiving alerts it was difficult to modify these alerts in any way.
A competitive analysis matrix was created that focused on landing page, map experience, onboarding and signup, and UI patterns.
Insights included:
See the complete matrix below:
My design process tends to be as lean as possible, in that I only create artifacts when it will help communicate the feature and maintain alignment with the team.
The general design process included:
Each of the above processes included conversations with both the client and developers followed by iterating on each artifact after a consensus was found on any changes needed.
Below is an example of user flows that were created to describe the existing and future state of the app. This helped to articulate a new password-free experience.
The following is an example of low to high fidelity and the changes that occurred during each step.
LoFi Wireframe
HiFi Mockup
Production
The main landing page was redesigned to include who SpotCrime is, how it works, and why users can trust it. There was also a reduction in ad content as the hypothesis was this was causing a drop in signups.
The existing account signup process proved to be primary obstacle to conversion. Pain points included to much cognitive load put on the user by having all input fields on a single screen.
Solutions for account signup included:
I designed all screens as mobile first which was a primary goal of this project; to unify the mobile and desktop experiences. This was instrumental in helping to keep the app streamlined and with only features that were absolutely needed. This also made designing for desktop extremely easy as I only needed to add more columns to the grid to evenly space content.
Another new addition to the signup flow was the ability to signup via a social login. Because of the demographics of this app, this feature is considered a secondary login flow, so I placed these options under the primary email input.
If we wanted to promote social sign-in more in the future I would recommend placing the social options above the email, and potentially hiding the email input altogether behind a secondary click.
A user can disconnect a social account and still log in with the associated email if they choose.
For users to gain a level of trust with the app, I recommended a passive signup alert as opposed to a full page popup. Full page popups are effective in increasing signups, but the value of these users is usually relatively low because they signed up before trust has been gained. As a result there is an increased risk of more content being marked as spam when using these methods to gain initial users.
This popup appears after 10 seconds (I would argue longer is needed prior to this appearing) and does not get in the way of the user using the platform, i.e., it can stay there and they can still view the map.
If the user dismisses the alert, it minimizes and does not appear again as a full-sized popup for 24 hours.
Initial State
After Delay
After Dismissal
Throughout the app there are consistent error states that help the user when an error occurs.
An example is if a user tries to sign up with an existing address, the system will ask if they would instead like to log in. We had discussed internally if we wanted users to be automatically moved to the login flow if this occurred, but ultimately didn't chose this route because research showed that users expect different things when signing up vs logging in, and automatically moving the login flow could have potentially confused users and prevented conversion. More testing on this would be needed to test this assumption.
Another scenario that was introduced, but did not get implemented due to timeline and other technical complexities, was if a user attempted to log in with an email that was not on file, the system would ask if the user would like to sign up instead.
One of the biggest improvements would be to the address lookup feature, which until now did not give users any feedback on what they were typing in for an address. This would lead to users not knowing if what they entered was accurate or not. I argued that users expect there to be some sort of auto-suggest functionality as it is an established pattern.
We used the Google Places API to implement this functionality. However, this would increase the total cost, so to counteract this, we removed the map from the homepage to reduce the geolocation costs when first entering the site. This was accomplished by instead giving users a choice when landing on the site for the first time, either view a crime map, which would then geolocate them, or search for an address.
Other improvements included locating the account signup CTA consistently in the top nav across all pages.
Various prototypes were created using a mixture of Sketch and InVision* to convey to the client and developers how certain interactions should work.
Interactions that were prototyped included:
*We now use Figma for design and prototyping.
Our main KPI was amount of signups before and after the update. The primary goal was to increase signups by 400%. The actual was a 60% increase post redesign.
I used Hotjar to test where users primarily clicked after the update and the new placement of content was enormously effective in getting users to where they needed to go.
Before
After
Customer complaints after the update also remained low so the passwordless signup was considered a resounding success.
The passive alert popup proved to be unsuccessful in getting users to convert and in nearly all recorded sessions they clicked on dismiss.
Recent updates include moving more content behind a login so that it is still free but signing up is required to view the additional information. We have also experimented with full page pop ups to encourage signing up for additional features.
In the example below, we implemented a content wall that is only viewable after signing up or logging in. I also created the CSS example to assist engineering in creating the overlay.
To track success of this feature, I used Google Analytics G4 to create a signup funnel from this button and discovered overall signups increased around 30% day over day from this location.
Fewer ads resulted in a significant drop in revenue so we strategically added additional ad content to get to pre-update levels of revenue, while also trying to maintain a high level of user experience satisfaction.
The updated site is level AA compliant in nearly all aspects. I worked closely with the development team to make sure images included proper alt text, interactive content was accessible via a keyboard, pages have logical tab orders, buttons have proper contrast, all pages have proper heading structure, and that the content is fully responsive on multiple devices.
To conduct QA on multiple devices I used Lambadatest.com, which enables us to test many different devices under various scenarios.
There were many improvements made to help SEO, including programmatically using unique page titles and meta descriptions. The information architecture of the site was redesigned to include more page nesting to allow for more organic discovery while browsing.
We incorporated Open Graph so Twitter and Facebook shares were more cohesive. Screaming Frog was used to crawl the hundreds of pages to ensure every page contained the proper meta tags.
For passive feedback, I created custom toast notifications with animated SVGs noting the time remaining for the notification.
Because the map page may take more than 1 second to load in some cases I created a loading animation to provide feedback while the user waits for the map to fully load. The intention is for the user to see this for no longer than a few seconds, otherwise an alternative animation approach would have been used.
A largely unnoticed but important detail was the frontloading of a low resolution fullscreen JPG on the landing page for users that are on very low bandwidth devices. After the SVG fully loads it is then displayed over the low resolution JPG.
Low Resolution JPG
High Resolution SVG
