Community Connections Update

DrivingSales Community Connections Update

Adobe Photoshop DrivingSales.com Before and After UI

There were a few places in our website redesign (DrivingSales, a social network for car dealer professionals) where functionality evolved as it was built but there wasn't any time to run it through design cycles. The "connections" portion of the user profile was one of those.

After hearing feedback from some of our users about confusion on this page, I reviewed the functionality and immediately saw the problem(s): There were a million priority buttons to press (green everywhere), and the various types of connections (follwers, those you're following and connections, i.e. following each other) were all lumped together in no apparent order.

This is what the connections tab looked like before the revisions

Before the revisions

I was able to break apart the different connection types, introduce a section for connection requests, and alphabetize all lists. If a request is pending, you're defaulted to that view. Then I defaulted all buttons to a secondary gray and cleaned up the dropdown menu. I also cleaned up the profile cover while it had my attention, adding valuable at-a-glance metrics and relocating the follow and connect buttons.

Separating different connection types and addressing priority cues really cleaned this page up
Creating a separate tab for requests made actionable items more clear

After the revisions

Takeaways

Listen to your users (of course), remember button hierarchy/emphasis, and make sure the user can easily accomplish the goal of the page.