Redesigning a social network

About a year ago we joined forces with werkenntwen.de to completely redesign their platform and make it tablet and mobile friendly. Werkenntwen is Germany's second largest social network with over 9.6 million users, only topped by facebook.

The Concept

Our goal was to simplify the structure and navigation for the new iteration of werkenntwen.

We achieved this visually by using strong contrasts between major structures (navigation, top bar, content) to reflect their evident functional difference.

We took cues from existing native apps, resulting in a small dark sidebar navigation and blue notification bar on the top. This design was created months before Facebook revamped its newsstream with a very similar concept, which, on the one side was a validation for our approach, but also a real bummer that we didn't present the results earlier.

In contrast to facebook's linear stream, we developed a responsive grid, that will show everything your friends share with the world, beautifully packed into nifty content cards.

Cards

Photo Albums

Photos are automatically organized in custom grids that make the best use of the available screen estate.

Check In

A feature not yet implemented: Check in at your favorite places on the new WKW, it'll even place the location on an accurate map!

Status

The most popular way of sharing; status updates! Notice how the comments literally fold up so save precious space.

Messages

The old message system for werkenntwen had to be revamped to fit in with the new design.

We brought it up to speed with nice speechbubbles, an element well known from the most used mobile apps. We found out that this structure looks great on a wide screen as well, especially when combined with media types regularly used in private and group messaging.

Conclusion

Redesigning a social network with millions of users is a challenging process. We had to keep in mind not to "destroy" the product die-hard fans love, while we had to envision changes that are necessary to fuel engagement and growth. We also wanted to create a more progressive look compared to their rival facebook.

Please note that we only worked on the design, the actual implementation might slightly differ from what you saw above.