Design Process

Desk Research

I started this project by familiarizing myself with the topic, using desk research. I asked myself the following questions:

• What is public deliberation?

• Are there already existing public deliberation platforms?

• What are important features for these platforms?

• Are there any already existing opinions about public deliberation platforms online?

• Deepdive into the already existing publike dialogen website.

Goals and Values

To stay on track with this project I decided to write down my goals and values for this project:

• Keep existing, familiar features and colors, but don’t be scared to improve or change  an element if necessary

• Use universally accepted, easily recognizable design elements

• Put a big focus on Accessibility, design for everyone

• For mobile design prioritize speedy quick  interaction, and comfortable thumb movements

• Work mostly with my own pace and solve problems on my own, but get feedback at key steps in the design

Information Structure

When converting the structure of the website to mobile, the horizontal nature of the phase layout with the expanding tabs proved to be the biggest challenge.  Additionally the many layers of information made it hard to achieve my goal of allowing users fast and easy interactions.

An important early step was writing down the hierarchy of information, at this point I had my own names for these levels: 

1. Project Level (Short description, Image)

   1. Topic Level (Short description, Image)

      1. Phase Level

         1. Module Level

            1. Chat (or other module)

This view allowed me to quickly and efficiently ideate about how this structure can best be translated into a mobile design.

Lo-Fi Wireframes

The process of Lo-Fi wireframing helped me a lot to precisely define what every page, Tool would look like. Without the burden of choosing colors, font, filler text, Lo-Fi wireframing allowed me to explore ideas quickly.

This is also where I had added ideas, and potential improvement possibilities to the tools, like the Canvas Tool, or Call- Channels, During Call Chat, Notes tool, Grid Chat and more. 

Visit the ->Figma File

Site Map

I created a Sitemap to showcase the information architecture and hierarchy of pages and features of the Public Deliberation Mobile App

Full Site Map ->Figma File

Final Design

Going from Lo-Fi to Hi-Fi, the first step was to establish a visual style for the app. 

As for the Typeface I decided to go with: Atkinson Hyperlegible.

The typeface is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. So it is perfect for an app that is for everyone. This also works towards my goal of making the app very accessible.

The colors used in the app stem from the colors of the website, with small changes. I have added a new Accent color to aid the Primary orange, and lighter more desaturated version for both primary and accent.

To ensure my designs are in line with today's design standards I used a lot of inspiration from already established big apps like (Facebook Messenger, Whatsapp, Zoom, Teams …). This ensured the usability and recognizability of the features.

After many hours of designing, I had a final design with some basic prototyping.

Visit the ->Figma Design