openBC/XING Redesign-Contest

openDESIGN

Gewonnen! Nach 5 Wochen hat sich der Entwurf „Weil Erfolg glücklich macht“ gegen insgesamt 142 andere Einsendungen im Uservoting durchgesetzt und sowohl die Wochenabstimmung überstanden als auch den Sprung ins Finale geschafft. Und auch die prominente Jury ist sich einig: Platz Nummer 1 im Redesign-Wettbewerb von openBC/XING 2006!

Die hochkarätige Jury:

Michael Arrington, Senior Editor, Owner, TechCrunch
Cal Henderson, Yahoo! Inc., Engineering Manager for Flickr
Chris Shipley, Executive Producer, DEMO Conferences
Thomas Gad, Brandflight, Author “4-D Branding”

Der Preis

10.000,- EUR, ein Workshop zur Benutzerprofilseite in Hamburg mit den Xing-Designern sowie Ruhm und Ehre.

Entwurf der openBC-Profilseite in eingeloggtem Zustand.
Entwurf der openBC-Profilseite in eingeloggtem Zustand.

DE: Das Konzept

Wer sich mit dem Redesign von openBC beschaeftigt, dem wird rasch klar: openBC muss openBC bleiben. Ein Erfolgsmodell sollte nicht ausgewechselt werden – aber getuned.

Der Mensch im Mittelpunkt

openBC lebt von seinen Mitgliedern und jede Profilseite repraesentiert einen potentiell interessanten Kontakt, Kunden oder Partner. Der Seitenaufbau wurde daher neu gegliedert: Wo derzeit eine schwere Aktions- und Informationsleiste klebt, faellt im neuen Entwurf der Blick direkt auf die wirklich relevanten Informationen: Name, Status, Bild,Verbindungen und die Businessdaten.

Alles Wichtige im Kopf haben

Der Header-Bereich wird groesser, schoener und informativer: Hinter jeder Information steht auch eine Aktionsmoeglichkeit. Zusaetzlich mit einer Linkgrafik visualisiert sind nun ohne zu scrollen alle wichtigen Bereiche wie “Kontakte” oder “Nachrichten” direkt zu erreichen.

Web 2.0 suchen – Mensch 3.0 finden

Warum die Detailsuche hinter einem Reload verstecken, wenn doch das schnelle und unkomplizierte Finden von Kontakten openBC zu dem macht, was es ist? Waehrend also die regulaere Suche wie gehabt funktioniert, wird bei Klick auf “Detaillierte Suche” eine Box mit den erweiterten Suchoptionen in Groesse des Headers ausgefahren. Egal, auf welcher Seite sich der Nutzer befindet: Die Detailsuche ist ist bereits dort.

Entwurf openBC-Profilseite in ausgeloggtem Zustand.
Entwurf openBC-Profilseite in ausgeloggtem Zustand.

Serioeses Blau – frisches Grau

Klar, funktional, ruhig und freundlich: Die vorherrschenden Blautoene (nicht nur die beliebteste aller Farben sondern auch assoziiert mit Seriositaet, Raum und Weite) wurden aufgehellt, die “Beigetoene” mussten einem hellen Grau weichen. Als Kontrastfarbe wurde ein warmes und energetisches Orange beibehalten, nun aber einen Tick mehr orangefarben.

Stylesheet statt Blindgif

Der vorliegende Entwurf benoetigt ein Minimum an grafischen Elementen. Lediglich 12 kleine Bilder (zuzueglich Avatare) werden fuer die aufgezeigte Profilansicht benoetigt, den Rest macht die CSS-Datei. Das sorgt fuer kurze Ladezeiten, macht die Seite skalierbar und verringert das Trafficaufkommen.

Anpassungsfaehig

Das flexible Layout passt sich jeder Bildschirmbreite an – mindestens 1024 Pixel sollten es jedoch sein.

Ich sehe was, was du…

Ein Mitglied hat sein Gaestebuch oder die “ueber mich“- Seite in seinem Profil deaktiviert oder keine Inhalte hinterlegt? Dann werden diese Menuepunkte auf auf Kontaktseite auch nicht dargestellt.
Galerie der openDesign-Entwürfe

Entwurf der Ansicht
Entwurf der Ansicht „Seite editieren“.

EN: Design Approach

If you deal with openBC-redesign, it occurs to you in the first place that openBC has to stay openBC. The success-model should not be changed but tuned.

The central point is a man

openBC lives on its members and every profile page is representing a potential interesting contact, customer or partner. The layout has been rearranged: in place of the heavy action and information bar we have positioned the most relevant elements like name, status, photo, connections and business data.

Important stuff comes first

The header area is bigger, prettier and more informative. Behind every information there is an action possibility. All the most important fields like ContactsӔ or MessagesӔ are additionally visualized by link graphics and are easily available without scrolling.

Screenshot: OpenDesign-Contest Webseite
Screenshot: OpenDesign-Contest Webseite

Searching for Web 2.0 – finding a Man 3.0

Why hiding such an essential function as Advanced SearchӔ behind ReloadӔ? After all, the fast and uncomplicated finding of contacts makes openBC it to what it is. While Default Search stays on its old place, one click on Detailed Search displays a large window with enhanced search options. It doesnt matter on which page you are now, the Advance Search is already there for you.

Serious blue – fresh grey

Clear, functional, calm and friendly Ԗ the leading blue tones (not only the favorite of all colors but also associated with seriousness, space and wideness) has been brightened, the beige tones are replaced with bright gray. A warm, energetic orange maintains as contrast color.

Stylesheet instead of blind gif

The presented design requires minimum of graphic elements. Only 12 small images (plus avatars) are needed for a full profile view, the remain is completed by CSS file. Thanks to that the loading times are optimized, the site is scalable and the traffic is gravely reduced.

Flexibility

The new, flexible layout adjusts itself to every display up from 1024 pixel width.

I spy with my little eye…

Did the member deactivate his visitors book or his about meӔ page in his profile? Did he fill it at all? In this case these menu items will not be displayed in his contact page.

EN: The Interview

Well, it took a while, but here is a short interview, which introduces Carsten and Dominik, who are behind the winning entry:

1. So, who is the winning face of the openDESIGN Challenge? Would you introduce yourself briefly for us?

CT: The winning entry comes from East Westphalia, from Herford, which is near Bielefeld. We work there in a web agency called “absofort Erfolg im Internet GmbH & Co. KG”. To be precise, we are myself, Carsten Thöne, and Dominik Schwarz. Since we founded the company in 1999, I have been the Managing Partner and Creative Director. So Design is one of my areas of work. I am also involved with online software and Internet marketing. All in all, there are about 30 people working here.

DS: And I am working here at “absofort” as an Online Marketing Manager. So my job is to come up with ideas and turn them into concepts and reality, as was he case for our openDESIGN entry.

OpenDesign Pressefoto
OpenDesign Pressefoto

2. Why did you participate?

DS: One morning, I clicked on the openBC website news and saw the posting about the openDESIGN Challenge. By chance, we had already talked internally about how we would change openBC a few days beforehand. So we quickly decided to participate over a coffee. Not really to win, but to demonstrate how we would interpret the idea behind openBC.

CS: We finally posted our entry during the fourth week. At that point there were already about 50 entries entered in the Challenge. Some came from really well-known agencies, which really motivated us, of course.

3. What do you think about the new brand and the new design?

CT: In general, I think a redesign must always have a clear purpose – a means to an end. Just doing it for the sake of it makes no sense. And a complex design should not stand in the way of being able to work efficiently with a web app. So I’m happy to see that the new design has reduced the elements on the site down to the absolutely necessary things. It looks like speed and ease of use were your focus, so that’s good. To be honest, I didn’t really like XING when I heard it for the first time. But over the past few weeks, after seeing the new design and CI, I have gotten used to it. I really like it now. Especially the green, which looks fresh and stands for growth. After all, it’s our company color too. So I’m looking forward to the re-launch with the new name, not least because of the future features.

DS: Of course it will take some time for people to get used to the new name and layout. B ut that’s the case with any re-launch. People tend to forget that most major Internet companies use generic names, which didn’t hold any meaning when they were introduced. They seem familiar words to us now, but only because we’ve become used to them over time.

OpenBC: We have a winner!
OpenBC: We have a winner!

4. Xing will start with a provisional contact page. You, as the openDESIGN winner, will work together with the openBC/XING designers to produce the final version. What will you be focusing on?

DS: Like all participants I’m sure, we put a lot of time and effort into our entry, discussing every single pixel. So I am really looking forward to having a chance to incorporate some of our ideas into the new XING site. For me personally, it will be important to give users a good overview of their data like messages, invitations or contacts, and quick access to search. Certain menu items like “guest book” or “about me” should only be visible when there is actually data stored there.

CT: Of course we don’t expect our entry to be integrated 1-1 into the new layout. The whole structure has changed since we did our design. But I am sure that some ideas and features conceived by us can be adapted and put into the new site. That’s why I am also looking forward to the workshops with the openBC/XING crew and am anxious to see the final result of our collective work. I would like to put simplicity up front. A simple and intuitive interface which is easy to use. I think XING is already well on the way to getting there.

– Interview with XING, 25. Oktober 2006

Did you enjoy reading this article?