Unifying via modular design systems

Unifying via modular design systems

Unifying via modular design systems

Throughout the years, Spokeo's phone page results grew out into different directions, creating an inconsistent experience. This initiative was focused on bringing it all back together and looking for opportunities for improvement.


I help consolidate Spokeo's main search result pages.

My Role

Product Designer — Discovery, User Research, Design

Modular design

We started the first phase with an audit of our current designs. This narrowed down the number of pages needed for every possible user journey. A modular approach allowed us the flexibility to adjust the design based on the needs of the current user.

All pages
The following are all the use cases our users can run into. We concluded these working with our data team. They range from Exact Match to Business Match.

The use cases were built as a way to work around data inaccuracy. The modular system helps our data scientist and project managers to prioritize certain elements more depending on the level of confidence they have in the data.

We decided to keep some elements from current designs and stayed true to our style guide. Where new layouts and elements where created, we made sure to work with development to keep everything in sync.

Reputation score

While unifying the phone page, we came across opportunities for improvement. One of which was adding a reputation score to the phone number being displayed. This would tackle one of our user's bigger pain point — knowing if the number was verified, safe, and/or valid.

Focusing on communication
With our data scientist doing a lot of the magic behind the scenes, we were given the green light to create a section dedicated to a reputation score. This also had to be reflected on the header, right when someone lands on the page.

Here, you see how we use the stroke around the avatar on the billboard as an indicator. The risk number label will then anchor you down to the section expanding on the more details.

Mobile designs

Knowing that our billboards already had a lot going on, we wanted to make sure the addition of a reputation score didn't overwhelm our users. We focused on first getting the experience done correctly on mobile and expanded out from there.

Billboard Explorations

You can see many of my first exploration for the billboard were struggling to set a clear hierarchy. I had multiple smaller details that I didn't want to bury, since were still very important.

Explorations - Reputation score

Context matters. When introducing a new feature, I wanted to make sure it was easy to understand and clear how we got to that point. Adding the right amount of context to the graphic itself helps, but adding too much, overwhelms.

Process of elimination

Throughout this exploration, the main goal was clear— this was a rating system to understand the risk evaluation of a phone number. Internally, the team was conflicted on what designs to go with from a visual perspective.

So we ran a few usability test, with the questions focused on personal preference. Luckily the results matched with what the stakeholder preferred.