Our Approach

We are a design studio specializing in design for user interfaces and the underlying experience.

We turn user centered communication concepts and interaction design into enjoyable journeys that bring the look, feel and vibe of your digital product to life.

In addition we speak geek and are designers who think in code. We specialize in designing human-machine interactions and interfaces that are more human than machine.

we do

CONCEPT & DIGITAL STRATEGY CREATION

We support our clients in creating interactive advertising campaigns and communication concepts. After all we do come from the country of “Dichter & Denker”!

IA DESIGN & INFORMATION ARCHITECTURE

We create use cases, user scenarios, interaction flows, storyboards, wireframes & click dummies for
any digital screen size.

USER EXPERIENCE DESIGN & CONSULTING

We use analysis, research, interviews & persona development so our clients can base decisions on facts instead of fluffy sales speech. We also offer consulting and help our clients define business and user goals for their digital product.

ONLINE ART DIRECTION

We aim for more than just “wunderhübsch”! Our online art direction and visual design are delivered in style guides and GUI specs to make sure you don't go off track when scaling your product.

Our work

Sumitomo (SHI) Demag GmbH – one-pager for events

CLIENT

Brain Appeal GmbH
Brain Appeal, Internet Agency, Mannheim: TYPO3 & Frontend Development and Implementation. www.brain-appeal.com

WE DID

- Kick-off meeting with digital strategy definition
- Interaction Design
- Visual design

LINK

www.think-green-act-blue-at-fakuma2014.eu

1/4 Landing page with open sidebar navigation. The navigation includes the various sections but also allows the client to add information blocks.
Sumitomo (SHI) Demag GmbH

ABOUT THE PROJECT

After creating country specific landing pages for their client Sumitomo we continued our collaboration with Brain Appeal and designed a onepager, which Sumitomo wanted to use for numerous events. The company visits many fares throughout the year and the responsible department required a platform where they could communicate all event information over a period of time. The site had to be able to grow and add information as the event came closer. In some cases the promoted events were invitee only so one requirement was also that the department could turn the microsite into an exclusive and shiny experience.

At our kick-off meeting with the client we discussed multiple options and decision was made to create a one-pager as this could also be read from top to bottom as a written invitation building up the information density from top to bottom. We started with the interaction design that showed all possible content templates, which could be added to the page. Within the individual templates we created different interaction patterns that allowed the user to access various forms of content, which could be anything from product information to local restaurant tipps. After the client and we were sure that we had taken all possibilities into consideration we began with the visual design, which was based on brand guidelines.

2/4 Product slider with teaser information. If the user is interested in a product he can access additional bei clicking on “MORE DETAILS”. If he is not interested in the specific product he can scroll through the product portfolio by using the arrows.

Sumitomo (SHI) Demag GmbH

 

3/4 Requesting appointments: the visitor can request to meet up with one of the companies representatives. In the first panel (displayed) he can insert a name or a subject area, after which the particular contact is displayed. After the selection the possible dates are loaded in the second panel. The visitor can choose from these dates. In the third panel the user enters his/her contact details.

Sumitomo (SHI) Demag GmbH

4/4 Teaser (i.e. party at the exhibition stand) that can be inserted anywhere on the page.

Sumitomo (SHI) Demag GmbH

 

MOST CHALLENGING ASPECT

Creating a one-pager that could be adapted for completely different uses was very challenging, which required the design of best and worst chase scenarios.

MOST FUN

One-pagers can be a very, very fun project, to create and to use.

Sumitomo (SHI) Demag GmbH – Softlaunch of country specific home pages

CLIENT

Brain Appeal GmbH
Brain Appeal, Internet Agency, Mannheim: Coding TYPO 3 and Hosting. www.brain-appeal.com

 

WE DID

– Analysis of existing sites
– Culture Research
– Basic strategic Google Analytics Check
– Concept (Content Strategy, Optimizing, Google Analytic Action Plan) & First Mockup Sketches
– Visual Design

 

LINK

www.sumitomo-shi-demag.eu

 

1/5 Culture research phase: What are the differences in intercultural web design projects? – Here: of uncertainty avoidance, “a society’s tolerance for uncertainty and ambiguity”.

uncert

ABOUT THE PROJECT

Sumitomo (SHI) Demag is an international corporate group and one of the world’s largest manufacturers of injection moulding machines for the processing of plastics.

We were asked by our client Brain Appeal to do to basic strategic concept work in the form of a culture research for the countries Russia, China, UK, France and Brazil and basic analytics research, which were then to result in a new visual design for individual country home pages.

The goal was to find a way to address the cultural differences both, in visual language and content and to catch the attention of the culturally different user groups and to create a communication concept for the different countries.

A rough analysis of the existing sites was followed on research for intercultural experience design, which we based on Geert Hofstede’s hypothesis of cultural dimensions in terms of power distance, individualism vs. collectivism, masculinity vs. femininity, uncertainty, avoidance and long – vs. short term orientation. Those dimensions affect both, our cognition and our behaviour and tell us a lot about how we look for information, which things are more /less important, how we establish trust (and why) and much more.

We wrote a recommendation paper which included examples, do’s and don’ts and best practice examples and wrote a referral on how we should display the content modules.

Next we brought the Google analytics check and the recommendation paper in alignment with the company’s brief, containing their business goals and visions, their strengths and USPs, their existing communication concept and their requirements of what should be communicated better. This we used as a basis for our concept paper on how we should proceed in terms of digital content strategy.

After approval we started with mockups in form of Balsamiq wireframes and moved on with the visual design for the european landing page.

 

2/5 Culture research phase: comparing cultural differences of the requested countries.

overview

 

3/5 Analyzing the metrics of the existing site helped us figure out what to improve

Google Analytics Check

 

4/5 First rough sketch to discuss the concept with the client

first rough sketched Mockup of the new homepage

 

5/5 The new layout of the homepage

01_start

 

MOST CHALLENGING ASPECT

Diving into Google Analytics, which – at first glimpse – makes spreadsheets seem like fun.

 

MOST FUN

Diving into Google Analytics and seeing the huge potential if used as a resource for UX improvements!

 

 

medatixx – Marketing micro site

CLIENT

Brain Appeal GmbH
Brain Appeal, Internet Agency, Mannheim: TYPO3 & Frontend Development and Implementation. www.brain-appeal.com

WE DID

– Rough concept suggestion
– Visual design based on the suggested concept

LINK

www.der-charmante-westen.de

 

1/5 Detail of the CV section with the ‘Dr. Doxx’ – the mascot of the software provider

medatixx01_cv

 

ABOUT THE PROJECT

medatixx provides office management software for clinics, healthcare centers and doctors’ offices in Germany. Our client brain appeal asked us to design a microsite, which was based on a print marketing mailing the medatixx sales team had sent to potential and existing customers. The mailing was structured like a job application and resume and was sent to facilities, who were looking for staff.

The mailing – as most job resumes was very text and information heavy so we decided to spice it up with info graphics and turn it into a well structured web resume for better understanding and readability.

As the client had asked to apply the pattern of the print resume to the microsite and the deadline was lingering on the horizon there was no time to communicate our idea in an elaborate concept.
Instead we came up with first design ideas, which were directly approved by the client.
We then finalised the idea of the one-pager in a paper look and feel and equipped it with readable text elements, lists, typographically interesting headlines and an overall scannable content structure, including supporting graphics and icons.

 

2/5 The complete One Page design

medatixx_complete

 

3/5 Detail of the first section

medatixx01_start

 

4/5 Detail of the competence section

competences_detail

 

5/5 Detail of the reference/testimonial section

detail_referenzen

 

MOST CHALLENGING ASPECT

Translating a print mailing to the web medium within a very strict deadline, while also meeting our own demands to the project.

 

MOST FUN

The translation from print to web was quite fun as it made us aware of how different reading habits are within the two mediums, especially when taking a document like “the resume”, which is expected to have a certain shape and form.

 

 

Crytek – Crydev Forum Redesign

CLIENT

Crytek GmbH

WE DID

– Visual design
– Design specs and GUI
– Icon design
– Styleguide

LINK

www.cryengine.com

 

1/6 The new Crydev community landing page.

Crydev_landigpage

 

ABOUT THE PROJECT

Crytek is one of the leading video game companies and they are famous for their Crysis series and their CryEngine game engine, which has recently received a new visual branding.

We were asked to take over the visual design for the Crydev forum relaunch. The forum is based on the PhPBB Open Source Forum Software so a large part of the interaction design was defined. However, we were given the freedom to tweak a few aspects of the interaction design which we did during the visual design process.

The new visual branding was the basis on which we built the full visual design, which we later documented in a styleguide to make the development easier. We also developed a full custom set of icons that could translate the multiple statuses and types of messages within the forum.

 

2/6 List: profile messages with sidebar menu.

Crydev_profileMessages

 

 

3/6 Topic list view showing topic icons.

Crydev_forumLists

 

 

4/6 Topic detail showing all possible typography.

Crydev_Typography

 

 

5/6 Crydev community typography as displayed in the styleguide.

Crydev_Styleguide

 

 

6/6 Gallery detail page showing featured items of the week.

Crydev_galleryDetail

 

MOST CHALLENGING ASPECT

The Crydev forum has been a very busy forum, with numerous design teams not only discussing the product, the questions on it but also uploading their projects and updates. During the relaunch process we had to make sure that existing materials fitted into the new grid and visual layout.

The next big challenge was to take the existing visual design, which had already been implemented in the product website and expand it so all complex functionalities and features a forum brings could be displayed. This meant identifying the complete color palette, typography, all existing style elements and design patterns before being able to build on that.

 

MOST FUN

Changing interaction design within a set and therefore restricted frame and seeing that the new solutions better the product was really challenging, fun and fulfilling (when it worked).

 

 

 

Crytek – Arena of Fate forum

CLIENT

Crytek GmbH

WE DID

– Visual design
– Basic design specs and GUI
– Icon design

 

LINK

www.arenaoffate.com/forum

 

1/7 The Arena of Fate forum login page.

01_aof_login

 

ABOUT THE PROJECT

Crytek is one of the leading video game companies and they are famous for their Crysis series and their CryEngine game engine.
After the redesign of the Crysis community forum back in 2012 we were asked to give the forum for their brand new MOBA ‘Arena of Fate’ a visually appealing look. The look was to be similar to the game’s microsite. The forum’s functionality was predefined as it was based on the PhPBB platform.

First we tackled the grid and color palette and matched it to Arena of Fate’s mysterious and eerie fantasy aesthetic. We finalized our first layouts with the visual layouts for the forum and topic lists as well as detail pages.

After alterations and approval we finished up the visual page designs with the login page, which uses GFACE Login credentials and the user control panel. The process was finalized with the custom icon design of the default PhpBB Board Icons, in which we developed a visual language that could display the various message types and statuses.
All the other pages and sidebar components had to be developed on the basis of the visual layouts we handed over, so we had to be sure that all possible elements could be developed with the design given.

 

2/7 The forum list view.

01_aof_forumlist

 

3/7 Topic list view showing topic icons.

03_aof_topiclist

 

 

4/7 Topic detail view showing replies, quotes, possible text formatting and a reply form.

04_aof_topicdetail

 

 

5/7 The user control panel with tabbed navigation.

05_aof_ucp

 

 

6/7 A basic, small GUI specification for development.

06_basic-small-gui

 

 

7/7 The icon set

Icon set

 

MOST CHALLENGING ASPECT

Sometimes even subtle color changes affect a whole visual hierarchy and contrast as well as readability problems can occur. During the design process the color palette had to be adapted to changes in the game’s product design, which through our previously established hierarchy and good contrast contrast out of the window and meant that we had to re-think a few design choices to re-establish readability and clear visual structure.

 

MOST FUN

We like challenges, so figuring out the color/ hierarchy problem was both a challenge and fun!

 

 

Redesigning kino-zeit.de

CLIENT

kino-zeit.de – Das Portal für Arthouse-Film und Kino

WE DID

– Optimization of usability and user experience design in consideration of the client’s requirements of page impressions
– Interaction design and full set of wireframes in OmniGraffle optimized for desktop computers
– Art direction and visual design of selected pages and components.

 

LINK

http://kino-zeit.de

 

1/6 Suggestions for UX and IA optimization via sitemap and descriptions (not displayed).
kinozeitSitemap

ABOUT THE PROJECT

kino-zeit.de is one of the largest ressources for Arthouse cinema reviews. In the last ten years their database has grown to an extensive library of reviews (in German) on many Arthouse subjects, not only cinema releases.

The brief was to give the website a more polished look and to display the vast database in a way that users could easily find what was of interest while getting a glimpse the library’s size. After a review of the existing site and user patterns we began the work on the wireframes. As the framework for the relaunch was already set and was to be developed in-house we were able to have ongoing discussions with the developers to ensure that our ideas were manageable in the set time frame and framework.

We wanted to keep the art direction simple and clean and chose a limited color palette. Instead typographic variations in font type and size became the visual anchors. Repeating interactive icon groups allowed us to display the database without cluttering up the design.

 

 

2/6 Landing page design: ad banners had to be implemented in the design.
kinozeit_landingpage

 

3/6 Detail of one of many search forms (search for a running film title within a city).
kinozeit_kinoStaedteAZ

4/6 Detail of list of movies playing in a selected city.

kinozeit_kinoprogramm

 

5/6 Movie detail page and detail of 2nd level drop down menu.
kinozeit_filmdetail

 

6/Detail of result list when clicking on a tag.

kinozeit_ergebnisliste

 

MOST CHALLENGING ASPECT

Usability optimization is a hard goal to achieve if the product relies on page impressions and advertising revenue. kino-zeit.de is one of the best sources for Arthouse cinema reviews so balancing the need to make the expierence as smooth as possible (Arthouse movies are too important not to) and enabling the client to acheive their goals was quite challenging.

 

MOST FUN

We love Arthouse cinema almost as much as kino-zeit.de loves it! The whole team is very passionate about their work, which made the project extremely fun to work on.

 

 

 

Building a campaign for Honda V4

CLIENT

HAKUHODO Deutschland GmbH

WE DID

– Concept and digital strategy for a digital automotive campaign microsite
– Development of a communication concept for the campaign on multiple digital channels
– Concepts and idea definition for various mobile and facebook applications
– Milestone recommendation of campaign launch
– User experience design and user journeys
– Art direction and full visual design for the microsite

 

1/6 Graphic teaser on the HQ website that links to the campaign microsite.

hondav4_landinggraphic

ABOUT THE PROJECT

About the project
Hakuhodo asked us to support them with the development of the Honda V4 digital campaign. Honda V4 are a range of motorcycles that all have the use of a four-cylinder engine in common. Any similarities of the products stopped there. The goal of the digital campaign was to promote three V4 models, which each catered to a completely different type of riders.

We put our heads together and came up with a concepts that boiled the interests of the three target groups of motorcycle enthusiasts down to three aspects: experience, technology and models. We used these three aspects to explain the bikes, their distinctiveness and the adventures that could be experienced with them.

A sitemap of the microsite, communication milestones and the interaction plan of divers channels that gathered user generated content and provided content based on the user’s input were established. The microsite was to be embedded into the corporate site, which turned into the next challenge as the microsite navigation had to be distinct and simple to use.

The visual design was based on the V4 print campaign and expanded from there.

 

2/6 History page in the “Technic” channel. Each channel has it’s own color scheme.

hondav4_history

 

3/6 Finding motocycle tours that cater to the user’s preferences in the “Experience” channel.

hondav4_erleben

 

4/6 Overview of the model page.

hondav4_modelleOverview

 

5/6 Detail view of a model with an interactive image through which model features are made accessible via hot spots.

hondav4_modelleDetail

 

6/6 The planned content flow (from mobile apps to the microsote and media channels) of the campaign.

hondav4_contentflow

MOST CHALLENGING ASPECT

Telling an interesting story to three target groups on one page, with three main menu items.

 

MOST FUN

Managing to tell that interesting story and planning extensions of the story in the shape of mobile and Facebook applications.

 

 

 

 

Finding out what scientists need with bioRN

CLIENT

bioRN Cluster Management GmbH

 

WE DID

– Assessment workshop for target group, user goals and client goals
– Target group and business area research
– User experience design
– Axure wireframe of a scientist community, optimized for desktop computers
– Visual design.

 

LINK

www.biorn-network.org

 

1/6 Signup form in three variations (interactive Axure wireframe)

bioRN_Signup

 

ABOUT THE PROJECT

bioRN a cluster management that brings biotech companies and research facilities together for collaboration and projects asked for a solution that would help better communication and support their daily work.   The first meeting we had was an extended workshop in which we found out more about the cluster management’s work and the target group, which was completely new to us. We then discussed format ideas, which ranged from mobile applications to a community for scientists and biotech companies.   We then produced user stories and the wireframes as an interactive Axure project so the client could better imagine the final result. A simple and clean visual design supported the target group’s defined goals, which was to be able to have clearly arranged content tailored to their personal interests that could be accessed and used in a fast manner and did not take up too much time or require extended knowledge on social media user patterns.

 

2/6 The public view of the funding page teases the communities content.

bioRN_Funding

3/6 User dashboard, where he can find all content, relating to his profile or his saved searches.

bioRN_Dashboard

 

4/6 Advanced search form and result list  with tags.

bioRN_AdvancedSearch

 

5/6 Visual layout of the user dashboard.

 

bioRN_vLayoutEditMode

 

6/6 Grid used in visual layout.

bioRN_Gridh

MOST CHALLENGING ASPECT

The target group and area of business was virgin soil to us. “Cool functionalities and features” were of no interest but instead the project was centered around easy to solve and efficient tasks that catered to a target group of which some where accustomed to social networks and others had never seen one.

 

MOST FUN

When developing user stories we did a lot of research on science platforms and user patterns in science communities. This bit was most interesting and challenged us to really think about the user experience and interaction design.

 

 

Textilwirtschaft: helping the fashion industry find jobs.

CLIENT

dfv Mediengruppe

 

WE DID

– Analysis of the existing interaction design and problem definition
– Full feature wireframe in OmniGraffle for desktop computers
– Visual design of missing components, based on our previous re-design

 

LINK

jobs.textilwirtschaft.de

 

1/6 Visual design for job portal landing page.

textilwirtschaft_landingpage

 

ABOUT THE PROJECT

After we had successfully helped dfv Mediengruppe relaunch their online magazine textilwirtschaft.de we were asked to come back to finalize the project by relaunching their job section. We were commissioned to do the visual design optimized for desktop screens, based on our previous layouts. The online art direction was developed in cooperation with the in-house art department. The relaunch was to result in a more modern, fashion-magazine type look that made use of the existing color palette of the magazine.

 

 

2/6 Profile of a job seeker. All content can be added within an accordion.

textilwirtschaft_profil

 

3/6 OmniGraffle wireframe of the job overview page (descriptions not displayed).

textilwirtschaft_Stellenangebote

 

4/6 Visual design of a job detail (opens in new layer).

textilwirtschaft_StelleDetail

 

5/6  Job seeker landing page: logged in, profile not complete, not marked as “job seeking”.

textilwirtschaft_BewerberLanding

 

6/6 Young Professionals (user group in search of internships or design schools) landing page.

textilwirtschaft_YP

 

MOST CHALLENGING ASPECT

The dfv Mediengruppe has all development done in-house in an own CMS. As both magazine and job section were built to be able to grow it was most challenging to develop an user experience and visual design that can could be realized in a CMS we knew nothing about. In addition the communication of an interface design without having contact to the development department made us work meticulously on the styleguide & GUI specs.

 

MOST FUN

Before the relaunch textilwirtschaft.de was more of a side product of the print magazine. This changed with the relaunch and it was fun and challenging to bring a magazine into a new medium.

 

 

 

What our clients say

kino-zeit
crytek
dfv
brain-appeal

Meet our team

GeekettezTeam
 

The Geekettez

User experience design agency in Berlin and Mannheim

The Geekettez is the collaboration of Jennifer Moss and Stefanie Kegel. The duo – also known as missmoss and guerillagirl – teamed up in 2011 and has since been working as a design-pair in the fields of user experience design, interaction design and visual design.

GeekettezMissMoss
 

Jennifer Moss - Miss Moss

UX and IA Designer, online Art Director

I am a freelance art director for digital media & an user experience and interaction designer based in Germany & working with clients from all over the globe. I love telling stories, which I initially started doing as a film student. However I moved straight to to internet after graduating, shortly working for a concert agency as a digital marketing manager before I started working as a freelancer in 2006.

Now I help my clients create digital communication strategies, design information architecture as well as user experiences for their target groups, create visual design concepts & scalable, responsive GUI.

You can find more of work on www.missmoss.de

GeekettezGuerillagirl
 

Stefanie Kegel - guerillagirl

UX and Interaction Designer

After graduating from Cork Institute of Technology and University of applied science Darmstadt in 2007 I’ve been working in the field of UI Design and User Experience – first for agencies, later as a freelancer. I come from the classic web design days back in the early 00 years and have a strong frontend development background, but I do not code for clients anymore. Since the web got more and more complicated and task-based as well as information heavy one natural result was to take the step into thinking about the term ‘user centered and goal centered design’.

Member of the German Usability and User Experience Professionals Association. Taking a part time course in Psychology (B.Sc.Psychology) at the distance University in Hagen since 2013 to dive a little bit deeper in the fields of human computer interaction and cognitive science.

www.guerillagirl.de

GeekettezNetwork
 

Our network

various

When we moved the Mannheim office into the Raben-Engel-Odenwälder co-working space we did not only move shop but also became part of a collective that hosts graphic designers, CGI, motion design and VFX designers, photographers, front end developers, illustrators, painters and even a screen printing studio.

Check out the collective’s website at www.raben-engel-odenwaelder.de

From the blog

How to end a relationship. Ein UX Point Of View

How to end a relationship. Ein UX Point Of View

Let’s face it: Nirgendwo klaffen die Bedürfnisse von Nutzern/Kunden und Management eines Produkts/Services soweit auseinander wie beim Punkt ‚Account kündigen‘ – also wenn Kunden – aus welchem Grund auch immer – sich verabschieden möchten.

Es gibt wie in jeder Situation verschiedene Szenarien WARUM jemand ein bestimmtes Produkt oder einen Service nicht länger in Anspruch nehmen möchte.
[…]

What roller derby taught this freelancer other than hard knox

What roller derby taught this freelancer other than hard knox

Four years ago I was the person who barely made it to the gym or out for a run once a week because it seemed that I NEVER HAD THE TIME because I so much work to do. Four years later everything has changed! I initially started playing roller derby not only because the sport seemed like A LOT OF FUN but also because the team I was training with at the time had one three hour training session once a week. A team sport that only requires one three hour our session a week? Hell yeah! Sign me up! I had wanted to get back to a team sport for a while then but had shied away from taking up basketball again (the previous team sport I had played) because of the many hours you had to put in for training as well as the many weekends you spent at games, simply because:

[…]

Anatomy of a design pitch

Anatomy of a design pitch

A case study of our first pitch experience

In the midst of last summer’s dog days we were following our morning routines containing smalltalk, twitter coffee, dealing with waking up, more coffee, slowly getting into workmode, opening mail, when – bam! – _the_ email appeared in our inbox. Now, we were fully awake.

[…]

Are you a freelance project manager or frontend developer? You just might be the person we are looking for!

Are you a freelance project manager or frontend developer? You just might be the person we are looking for!

Hi, we are The Geekettez! We are two freelancers based in Berlin and Mannheim, who have been working as a team since 2011. We teamed up to work as a design pair but also to be able to oversee our growing client base together and enhance availability and service for our clients. We currently offer UX, IxD, IA, online art direction and UI design. Development is either done by the client’s team or a developing company from our network and it is working well. However, we would like a little bit more. […]
The Geekettez 2014 retrospective

The Geekettez 2014 retrospective

The beginning of the new year is always a good reason to take a look at the past year, the ups and downs, our objectives and results and what we learned and accomplished. February is still considered the beginning of new year right? We think so and thought we’d take a few minutes to write up what happened for The Geekettez in 2014:

[…]

Human – machine touchpoints – a love story by Spike Jonze (HER)

Human – machine touchpoints – a love story by Spike Jonze (HER)

Being ill during the holidays can have it’s benefits. I got to watch A TON of movies that I had missed throughout the past year. One of the films I saw was HER by Spike Jonze  and it blew me away! So much so that I immediately jumped online to read through all of the articles written about it in the past year. In the process I also found an amazing blog AND book on SciFi interfaces and what interaction designers can learn from them. But let’s start at the beginning.

[…]

Find us in LinkedIn

Check out our facebook page

contact us

We are looking forward to hearing from you!

CONTACT DETAILS

Email: hello at thegeekettez.com

Berlin: 0171.12 45 07 3
Mannheim: Werftstraße 15-17 | 68159 Mannheim  | 0177.71 38 208

BUSINESS HOURS

Monday to Friday: 09:00 to 17:00-ish
Saturday: closed
Sunday: closed



Please leave this field empty.