Hochschule für GestaltungHochschule für Gestaltung Schwäbisch Gmünd University for Applied Sciences

Fabian SchröbelInteractive Communication SystemsInteractiondesign 2

Roman KuhnAmanda Solano Román

Winter Semester 2017-2018

THE DOWNSIDE OF DRUGS

INTRODUCTION

Thank you very much for reading our project documentation on our topic of illicit drug use and drug abuse.

The first intention of the project was to decide how to work the major topic »drugs«, to show the downside of them. Everybody knows drugs are a big problem not just because the consumption, but also because all the hidden bussiness behind it. We basically wanted to treat the topic in an open way, letting the user get involve with some facts that are prohibid and generate awareness about how many people die by drugs not just by consumption, but by trafficking worldwide.

Somehow, was very important to cause an impact on people who think that they don‘t harm anybody else but themselves by taking drugs. Unfortunately, the information we found in the amount of time we dedicated in researching through news articles and statistics, did not show what we were exactly looking for. We barley found numbers on mortality through drug trafficking and not consuming further out than ”just” the drug war in Mexico.

So based in the research, some articles, inspirational images, we got closer to a formed idea about what can we show to created a tool of information.

Our main source was the annual Drug Report from the United Nations. They‘ve accurately listed up many numbers we could work with very well. Also they already had visualisations of trafficking maps, which we re-visualized and took for our project.

Some numbers how ever didn‘t really add up for us. So we asked the UNODC (United Nations Office on Drugs and Crime) in Vienna for further explanation. Within a few hours we got a reply to our questions.

First ideas about information

In this scheme, we were setting a first brainstorm of the information that was considered important to be represented in the interactive.

TASK

Our task in this course was to create an interesting interactive communication system. The project had to be design and take into a prototype. For the process we used tools as Adobe Illustrator, Adobe Photoshop, Tumult Hype, and Framer. This last one is a program based in javascript, working with coffeescript.

Before being able to realize our project we needed to set input.

At the beginning, it was essential to define the final information, and for that it was important to find enough information about our subject so that the visualization could be well done. It was not easy to find information of the first intention (to show the unknown disadvantage of drug use: the impact that changes the lives of people who, by chance, get into trouble or die for and due to drug trafficking).

So, it was re-focused on the drugs themselves. In the project, it was thought that it would make sense to make a communication system about four drugs. Two rather “less addictive” and two with a very high addiction potential. We decided to focus on cannabis, LSD, heroin and cocaine; respectively.

Also, the information found about deaths by drugs and traffic of them was also taken to be shown. So, the project keep part of the idea for that it was born.

As it was done, more and more information was selected to a point where it was enough to start. The next step was to discard uninteresting information, also very complicated information to visualize and very ambitious projects that would take more time than the result really deserved.

RESEARCH

First things first. The research started right after we got our topic aprove. Since the very beggining it was important to show how the lives of people are being affected by drug trading, drug war and drug farming. Bringing light to the dark spots that consumer tend to not think about. Unfortunately couldn’t gather enough reliable information on that. Here and there some numbers were found. But it was about the death toll in the Mexican drug war – not on other countries. Mostly numbers were found on amounts of drugs being transferred to certain countries around the world.

After we found more very precise information about drugs in general, the trafficking of drugs, death tolls due to drug abuse and infectious diseases, we decided to chance our topics content.

Our main source was the international drug report annually published by the UN. They had the biggest amount of information on illicit drugs. We also trusted their information more than the ones we gathered together out of newspaper articles. After we had all information we needed we decided to focus on what we wanted to show and then filter out everything we didn’t need.

The drugs we wanted to show were Cannabis, LSD, Cocaine and Heroine. So to say from the least addictive drug to the most addictive drug.

Other informations we wanted to visualize were trafficking routes, death tolls, effects of consumption, compositions of each drug and maybe some kind of statistics on how many poeple took drugs in general within one year, how many got infected with Hepatitis C and HIV.

IDEAS ANDINSPIRATION

What should the project transmit?

Along the research some ideas about how our communications system should look like appeared. The topic defined a dark feeling, a quite uneasy feeling, also kind of psicodelic impressions.

The intention was to have an impact on the users through the information. So the main task was to created a educational tool to get know about drugs (effects, types, what they are made of and how they are “distributed“), but creating a app which is happy wouldn‘t respond to the idea of prevent users about them. So a dark look and feel was chosen also to generate this dangerous and insecure feeling.

As another parameter of our design concept we wanted to implement some kind of “disturbance” right in the beginning – like a glitch on the application screen to get peoples attention walking by.

The inspirational research started in different resources to understand which colors, fonts and effects the interface should had to transmit the desired look. The main idea was represented trhough o moodboard.

ARCHITECTURE ALPHA

Once the amount of information was gathered a basic architecture for the project was necessary.

The architecture was necesary first at all,because the information should been organized with some sense so users can easy find the topics. Second at all, was necesary to decide which information was going to stay and which should be taken off.

In the following squeme you can see an sketch of the very first architecture.

FIRST SKETCHES

This page shows the first map of navigation of the project.The squeme shows easily the routes the user have to do to get into a screen and how to go to another.

NAVIGATION

SCROLL DOWN DESIGN

At the begining the team talk about an interactive that was going to be show in the computer as a web design. Starting with a video to capture user‘s attention, the main idea was to have a scroll down screen to show the different main topics proposed in the first architecture.

First distribution of topics

The image at the right shows a fast representation of how to organize and represent the information that was going to be on the final interactive.

Where is this going to be?

A more detailed sketch is show to you to understand how was the information distributed in this scroll down design.

SCREEN DESIGN

Analyzing the information that was established in the navigation, the distribution of the information took another type of nature. Because the information for each medication was not brief enough for a scroll down design, another navigation proposal emerged. This separated the information corresponding to each drug in a different screen, but maintaining a main menu that could provide an easy navigation to change screens very fast and that would be more natural for the user.

Talking about the contexts in which the interactive would work the team decided that because the educational porpouses of the project it would be a better idea to create an app. Converting the interactive in a tool that can be exposed in schools, recreational areas, and even in places which people should be informed about the danger of drugs like a police station or hospitals.

So, basically the design kept the same but the size of the screen was readjusted for be exposed in an ipad.

In the next images you can see the evolution of the basic wireframe of the screen design of the interactive.

FROM WEB TO AN APP

information of each drug menu bar

main menu drugs bar

information displayback home button

switch between screens icons

Web screen design

information of each drug menu bar

information display

information text display

back home button

First app screen design Second app screen design

main menu drugs bar

information of each drug menu bar

information display

information text display

main menu drugs barcomparison

section button

FINAL ARCHITECTURE

Based on decisions regarding work times and consistency between the information, there were some changes in the content of the interactive. As a result, an architecture more pertinent to previous changes was proposed and it turned out to be the final architecture with which the interactive works.

This architecture focused on defining and detailing the information of the four types of drugs that were decided at the beginning. In addition, on the part of trafficking and deaths by drugs around the world. Therefore, the „comparison“ section was deleted and the „menu“ screen was also removed.

FINAL NAVIGATION SCHEME

Below is a map of the final navigation. It shows that indeed the menu screen was removed, therefore the home button as well. On the other hand, there is a constant menu at the bottom that allows quick access to all parts of the interactive. In addition, in the upper right, there are the different „tabs“ with information corresponding to the selected section.

Because it is an app designed to show information as an exhibition and not an app with which the user would constantly be interacting, the entire design of the project seeks to avoid long routes in the navigation to reach certain information. On the contrary, it is desired that the user understand and quickly learn how to access from one point to another in the interface. So in a time of less than 5 minutes the user can explore around the interactive and also go back to the main points of it‘s attention.

GRAPHIC DECISIONS

Regarding the graphic decisions, the development and justification of the look and feel of the project will be shown in this section.

COLOR PALETTE

Based in the moodboard, the team decided to use a grey scale palette for impregnate this dark and dangerous feeling in the user.

Also for the icons of each drug, the colors of the molecules were used but just for this especific porpuse, they weren‘t part of the main colors.

And finally, for the map image, an scale of red were used to represent the mortality around the word caused by the drugs.

The brightest grays correspond to texts, icons and even images. While the darker grays will be used in the background colors.

Red scale for the representations of deaths. The darker red was related with a high number of deaths in that country. While the pink one should represent a low rate of them.

FONT SELECTION

The search for a typographic font started under the filter of the need for a web font, which is recommended for readings on screen due to its simplicity and the contrast with the brightness emitted by the electronic device. Therefore, a source with enough weight varieties was searched, and its size was tested on the device to ensure readability. In the image, the selection process with different typographies is shown.

Also, because the recomendation of the professor, the sizes were tested also according to modular scales. For this stage we used the following resorces:

- https://getbootstrap.com/docs/4.0/layout/grid/- http://www.thegridsystem.org/wp-content/uploads/2015/11/gridlover-typography-system-baseline-grid.jpg- http://www.modularscale.com/?34&px&1.067

possible ways of interact with the project in the ipad

FONT SELECTION

The search and tests concluded with the selection of a specific typeface: Assistant

In the graphic design the typo was used in the following way:

WORKING IN THE SCREENS

Now you can see the progress of some of the parts of the interactive. This ones are the ones that required more time and planification.

MAIN MENU DESIGN

As already said, at the beginning a design was proposed with a main menu, however this was changed by a constant menu in the lower area of the interactive to speed up navigation.

The two main parts are separated by a line to indicate the left options are about the drugs themsleves, while the right option is something related but different.

PRODUCTION INTERACTIVE SCREEN

The team was looking foward to create an interactive in which the user could also get involved at some point. The production section was a good oportunity to implement this task. But planning and designing this screen took a lot of patience and work. Was not just deciding how to involve the user, but also the implementation of the „game“.

At the end a serie of animations that the user activates for develop the process was the solution that was implemented in the project.

ANIMATIONS

This is the final result in which a sign shows the user what to press to activate the animation and also to continue with the process of each drug.

The animations were made with the help of the tool “Tumult Hype”. In which a first video was created for being placed in Framer then.

DEATH BY DRUGS MAP IMAGES

Another part of the inceractive taking a lot of time designingit was the correct representation of the world map showingthe mortality rate due to drug abuse. It was important to show the correct ratio of the given numbers for each counrty so that the viewer got to see the correct visualisation of the statistics.

EFFECTS SCREEN

Although the design of this screen was decided quickly from the beginning in common agreement, it was necessary to work a photograph to achieve the purpose of letting the user experience how is the perspective of the environment of a person under the effects of each drug.

In the next page you can see the transformation of the original image into the effect of the four drugs. This process was possible thanks to Adobe Photoshop tool.

Screen design

Original photo (no effects photo)

Coca

ine

effec

t

Her

oin

effec

t

Cann

abis

effe

ct

LSD

effe

ct

IMPLEMENTATION

In the functional development part of the interactive the team relied on the „Framer “ tool to achieve the objective. From the code the instructions were given to the program so that it generated a functional interface.

Unforunately we also had a few complications with our project. The prototyping tool we used, often couldn‘t get alsong with all the data we put in it . It started lagging and took much longer to load the further we went on. Also it often crashed so that way we had to spend much more time in waiting for the programm to rerun; that occumpied more time than we actually wanted it to.

All in all we were still able to implement everything we needed.