Democracy for the Mobile Era


VotesApp is a platform for direct voting with an actual impact. More powerful than a like or a petition, its users vote on issues that personally matter to them. My job was to build an interface that empowers the people, not the system.


Project Summary

Initiator
StimmungsApp e.V., Berlin


Project Phase and Status
January – May 2016, currently on hold


Position
UX/UI Designer


Software
Sketch, Marvel, Pixate, Illustrator, Photoshop, After Effects

votesapp-ui-prototype-short

Skills

Information Architecture
Prototyping
User Testing
UX Design
UI Design
Visual Design

Prototype Video


Creating the User Experience


VotesApp is a complete rethought of the typical make-a-cross voting process. To create an innovative voting user experience the team learned from the shortcomings of paper-based voting and immature digital voting tools while doing extensive user research and testing.


Ideation Sketches

feature-headline-stroke-vertical
ux-ideation-sketches

Visible notes, scribbles and sketches helped the team to keep track of the ideation process. Most of our design ideas started on a sticky note or sheet of paper.

User Testing

feature-headline-stroke-vertical
ux-user-testing

With a complete departure from the typical cross-one-option voting process, we let users test interaction methods with real paper cards to prioritise and rearrange voting options.

Analysis + Evaluation

feature-headline-stroke-vertical
ux-analysis-evaluation

I created detailed evaluation forms in order to document the observations made during user testing. Evaluating the data we gathered was crucial for important design decisions.

Building the Interface


Developing the interface included all stages of a typical interaction design process: information architecture, wireframes, paper prototyping, animation of transitions and visual design.


ui-interface-steps

Information Architecture

feature-headline-stroke-vertical
ui-information-architecture

Intuitive voting and immediate feedback
To easily navigate through the interface the underlying information architecture needs to follow the users intention, providing orientation and quick access to all major features of the app.

Wireframe Diagram

feature-headline-stroke-vertical

Shaping the user’s interactions and attention
Wireframes help to pin down individual actions and information clusters. Leaving visual design aside, their black-and-white elements focus on user flow and interaction targets. Wireframes can be easily exported and linked for quick digital prototyping.

ui-wireframes

Visual Design

feature-headline-stroke-vertical
ui-visual-design

Reflecting transparency and plurality
The screens shown are a first draft built on my initial wireframes. My intention was to create a lightweight and clear appearance that represents the values of a democratic society. Colour palettes for the voting options were selected by my fellow design partner Mareka Pährisch.