This project is the visual result from my mostly theoretical bachelor thesis »Redesign Design Radar« which covers the subject of a kind of social network for archiving, documenting and clustering the design evolution and trends. If you like to know more about this project, you should visit the project site: Redesign Design Radar (only in German, sorry).

The Network

In this network people try to discover and connect design trends. Therefore the user can upload images and discribe them. Nothing new (very Pinterest like)! The difference is, that this network needs more metadata, which could easily turn into a big survey. To avoid that I designed an UI concept that makes answering the demanded questions playful.

RDDR-01

On the Landing Page the application asks for your opinion of an object’s appearance. There are several pairs of choices. Now you, the user, have four options to interact with a swipe.

RDDR-02 RDDR-07 RDDR-08

Up will lead you to further information about the object. By swiping left or right you’ll make the decision which answer seems to be the correct for you. An increasing font size provides a feed back. Down will skip the object and the application will show you another one.

The user has to drag the object for a certain distance, until the object turns magenta. If he let go of the object before, the object will return to the middle with a nice bouncy animation (this is very addictive). Try this CodePen to get a feeling:

See the Pen Draggable by Pete (@PDXIII) on CodePen.

For every object three kinds of information are available. provides data like the designer, year of issue, nation etc. Description gives you an subjective insight about the product by the user who put that object into the database. DNA is the result from all decisions made about the object’s appearance. To go back to the landing page, you’ll just have to swipe the object down.

RDDR-03 RDDR-04 RDDR-05

If you made an decision between left or right an result of all made decisions pops up. And allways your decision first (additionally indexed by a magenta outline)!

RDDR-11

One of the main features of the application and the network is the ability to collect similar objects into Cluster and arrange them with the biggest freedom possible.

RDDR-12 RDDR-13 RDDR-14

The user is able to add more objects to his cluster, either by his own choice or by suggestion. Like the single object, the cluster provides information, too. But in a more generic way, e.g. the DNA of a cluster is an analysis of all its containing object’s DNAs. To make the authoring of the description more appealing, the application provides an distraction free writers mode instead of the common textfields.

RDDR-15 RDDR-16 RDDR-17 RDDR-18

And when you are done, you are ready for the next!

RDDR-19

Epilogue

This site covers just a little overview about the project. As I mentioned before, if you are interested in more, visit Redesign Design Radar or try this Prototype (works best in Google Chrome). This project was realised with Sketch App and Framer.js.