Freelance Episodes

Ideas to market – web interface

for a research tool on

innovative collaboration

— HIRED BY

FU Berlin, Faculty HUMAN CENTERED COMPUTING


— PROJECT REQUEST

Design of web interface and development of the web application


— ROLE

UX / UI

Visual Design

Project Coordination


— PROJECT TIME

3 Months


— FURTHER LINKS

https://i2m.imp.fu-berlin.de/


https://www.cerri.iao.fraunhofer.de/

de/projekte/AktuelleProjekte/

ideas-to-market.html


— DEVELOPMENT

Room of opportunity


— DOCUMENTATION PUBLISHED ON

24th May 2020 from

Moscow, Russia




Background

For the first time Maximilian from FU Berlin contacted me back in 2017. The Objective was to develop an interactive prototype along with a component story book for an ongoing research project. For this certain project I have partnered up with Renato, a software developer from Guadalajara, Mexico – where I was living at that time.


Objective

This time, in the end of 2018, the goal was to design and develop a web application based on the previous prototypes and research work of Maximilian and the FU Berlin.


The Application contained a moderator and ideator views providing an ability to run so called “challenges”, to generate new ideas using crowdsourcing. 


Direct Stakeholders

Maximilian Mackeprang

Fabian Bitter





Main Moderator Dashboard

Edit challenge view

Knowledge transfer

Phase 0

Collecting information from the clients side like a Service Blueprint or Process Diagram to understand the underlying logic; creating a shared view between stakeholders.

Note: Images are blurred on purpose as this project is still in closed research.

Existing prototype analysis

Phase 1

Before simplifying and structuring the interface I had to understand the functionality and objective of each element.

Wireframes & Click dummy

Phase 2

Wireframes and a click dummy are very helpful tools to create a shared understanding between the client, myself and the developers. It helps to navigate through the expectations of the client and estimate the programming effort.

Font , Color, Elements

Phase 3

The decision on using very simple and big elements is based on the linear flow of this application. As it works like a survey tool with limited time to answer questions. So it should be functional and with less friction as possible.

Finalising visual design, UX and UI.

Phase 4

We start the development when almost every

element finds its place and finish the interfaces in

super short iteration cycles. This time again in close collaboration with room of opportunity.

Development

Phase 5

The Development of this web interface was achieved in close collaboration with Mof, who was coordinating the development team and taking care of client’s tech requirements.


By the end of this project we delivered a web application to our client.


Learnings

Phase 6

⭐️

It is pretty demanding to design for multiple user groups because you have to constantly switch perspectives.


⭐️

It’s fun to design interfaces for research purpose. You can use different UX patterns as in commercial products.


⭐️

Pretty incredible to see how completely new ideas which seem silly and out of context at first, can be led to potential new business and research opportunities.