My role: UX researcher and designer

Duration: 2,5 months (Mid June - August 2020)

Tools: Wordpress and Adobe XD

Designed the website for the live exhibition "Drogen und Stadt eine Alternativ Planung" one of the outputs of the research project DRUSEC (Drugs, Securities and Urban Policies), a collaboration project between Goethe Universität (Frankfurt) and Université Bordeaux.

Website: https://drogenalternativeplanung.wordpress.com/

Academic research project which works with methods and concepts from critical cartography and counter-mapping practices involving drug users in French and German cities. Aims at reversing the perspective on substance users. Their voices, experiences and ideas should be taken into account while discussing urban drug issues, implementing countermeasures and planning the city. They should not just be the objects of urban drug policies but also subjects in a public and political debate.

Aims at showing the results of the DRUSEC research project, focusing on the diverse workshops (Emotional mapping and Ideal City mapping) performed in Berlin and Frankfurt with more than 100 drug users. Marginalized drug users have a special knowledge of the city in which they live. The exhibition shows the city as the participants in the study experience it and a role model for how it could become. It shows what you can contribute to addiction support, public services and urban planning.

Dr. Mélina Germes (CNRS, Université Bordeaux)

Dr. Louise Klaus (CDR, Goethe Universität) 

Francesca Guarascio (Fixpunkt gGmbh)

Project Coordinator: Mélina Germes

Content production coordination: Mélina Germes and Louise Klaus

UX researcher and web designer: Denise Pereira

Exhibition design: Studio Achtviertel

It was a very small team sitting between Berlin, Frankfurt and Bordeaux.

The scope of the project was to build the website for the exhibition “Drogen und Stadt”.

The main constraints for this project were:

On one hand, I joined the team mid June and the exhibition started on the 18th of August, and the website should be live on the same day, however, containing more information than the exhibition (background, methods and research outputs).

Several members of the research team had holidays during the website building phase and I depended on different people to obtain content for the website which delayed the content design phase;

Time of reply to some of my requests (content and UX research) was quite long, and several attempts had to be made.

Academic researchers privileged factual content, long and faithful description of research output or methodology, and complex language and sentence structure;

Users expressed the need for appealing visual content, short text and possibility to skip undesired information while navigating.

Almost all meetings, interviews and testing were made online. Either on skype or in a few cases via email.

Wordpress (free version) was used as the platform to build and host the website which doesn’t allow for much design flexibility.

 - Kickoff meeting to understand the problem, define scope and goals

 - Discovery and empathize phase: Interviews and Competitive Analysis

 - Develop user personas

 - Creating website header

 - Define Sitemap and homepage structure

 - Content design phase

 - Website launching and internal testing

 - Usability test

 - Feedback session

There were weekly meetings between me and Dr. Mélina Germes to share updates, give feedback and define action points for the week. Communication with other team members was mainly made via email.

For creating the header of the online exhibition, I accessed the material designed by Studio Achtviertel, which was responsible for the designs of the live exhibition. I followed the same colour code (yellow:#f2eb45 / Purple:#5f59a6) and similar typography (Source Code Pro), and designed it in a circular fashion in order to meet the same shape which is predominant throughout the exhibition, and which started in the research workshops. This circular shape is also seen in the cards designed by the participants in the Participatory Mapping Workshops. In these circles they drew places, structures, actions, services or people which could improve their personal experiences of the city on a daily basis. 

I interviewed 3 people in order to understand the needs/challenges of the website users. 

One was a research partner of project DRUSEC, another person was a social worker and the other, who had no connection with the research, represented the general public. I am aware that the sample was quite small, and also, it was already biased by our assumptions, about who the main users would be. As will be discussed in further sections, this was due to our main constraint: time restraints. More people should have been interviewed and from a more varied sample. However, since the researchers had already defined their main target, and their measurements of success for the project (number of newsletter subscribers, new network members, number of emails received, number of visitors of website and live exhibition, number of people participating in the events) focusing on these 3 main groups ended up being crucial for reaching their goals.

Due to covid restrictions, all interviews were done online (1 via email and two via skype).

The interviews informed the creation of the following user personas, representing the 3 main user groups: academic researchers, social workers and general public.

I looked into several exhibition websites, and focused mainly on the 3 here displayed. One of them was actually suggested during the interview phase by one interviewee. I was looking to get inspiration on:

- Main menu and homepage

 - How to balance exhibition data and documentation of research

 - Structure and sitemap

 - Newsletter subscription

 - Content design (how to articulate different research output types)

It really helped to inspire the structure and site map, but also the design of the galleries with both the photos of the workshop material outputs and the events. It also helped me to ideate how  the content would be displayed and the subscription of the newsletter section.

It was also crucial in negotiating certain design choices with the research group of project DRUSEC, and to show them real examples on how to enhance the user experience through visually appealing designs and intuitive navigation, and to illustrate the user experience design principles, which were areas totally unknown to them.

For creating the header of the online exhibition, I accessed the material designed by Studio Achtviertel. I followed the same color code (yellow: # f2eb45 / Purple: # 5f59a6) and similar typography (Source Code Pro), and designed it in a circular fashion, the shape which is predominant throughout the exhibition, connected with the cards generated in the research workshops.

Based on the competitive research, user personas and also in the different categories which compose the live exhibition, it was decided that the homepage should display the 3 exhibition main categories (Landscapes/ City Feelings /Ideal City) + an extra category (Memories), to provide online visitors with a experience that simulates the live experience, and also with access to the photos of the exhibition and live events. We also wanted the homepage to have intuitive menus which allowed them to navigate easily and to access all relevant information about the project, the research group and the working partners. A "subscribe" section was also a must-have to help the group to expand their network and establish contact with the users updating them on the further dates of the exhibition.

We allowed the visitors, throughout the exhibition to always have two pathways: one that is less concern with the academic details and another one which goes progressively deeper into the details.

Let's consider the two main sections of the exhibition: "Stadtgefühle" and "Ideale Stadt". These two sections exhibit the results of the project workshops. For a lay person, the visual results of the workshops are the highlight. The methodologies are important, but they should be introduced in a clear way, without dense or technical contents. However, for academics or social workers the details of the methodologies and the way they were applied are as relevant as the results. Sometimes even more, if they want to replicate or enhance the methods. Therefore in this category, the sitemap was built in a way that the more detailed information is always present in the daughter pages, while the parent pages are lighter in content and richer in visual outputs. Also, methodologies and results are presented in independent pages. 

The sitemap remained quite faithful to the original one (below). The main alterations were: 1) the section names (the project coordinators made some alterations while preparing materials for the live exhibition); 2) the subdivision of the sections Stadtgefühle (here translated as Emotions) and Ideale Stadt were condensed into two only, since we decided it was much more organised and clean to gather all the different portfolios under one main gallery.

Homepage main menu reflects the main aims of the online exhibition: online navigation through the exhibition different sections (home); news about events and future exhibition dates (events); information about the research project and groups (about us) and a list of academic resources.

The website content mixes the research project outputs (workshop materials and outputs), design material created for the live exhibition and extra written content which contextualizes the research project and achieved results, also allowing users to deepen their knowledge in the methodologies and academic publications.

We tried to create a good mix of verbal and visual content (single images, short text, galleries, slideshows) . 

This was one of the steps of the workflow where longer meetings were needed since academic researchers are used to privileged detailed and accurate information and needed to be convinced that too much text would distract and demotivate users. Also, they needed to adapt the language and text structure, sacrificing a bit of the academic accuracy, to attract more visitors. Links were added to allow curious users and professional peers to access the academic outputs and methodologies. For this, the sharing of UX design principles and the initial research results were crucial, to inform Mélina and Louise on how to create content. 

During this phase (the one which lasted longer) we worked together daily to ensure that we reached a good compromise between keeping the structure and intuitive navigation while preserving the meaning of the research outputs.

Some content was added during the live exhibition until the end of August, specially the one which directs users to research publications.

To reach the goal of launching the website on the same day of the exhibition, under the aforementioned constraints, the user testing phase happened a week after launching. We tested it internally before without experiencing any issues. The number of testers was also limited and only two tests were moderated (remotely). One of the users submitted their reply via email. Recruitment was made through our personal networks.

Some issues were detected in tasks number 4 and 6. After talking with the two testers we understood that the issue was the German Language and browser. There is a button under the map which allows to enlarge the picture, but because German isn't their native language they mistook the words and failed to find the enlarging button. Other participant told us afterward that the issue seemed to be their browser, because they couldn't even see the map. Once she updated the browser the problem was fixed. The other issue, the one with task number 6, seemed to only affect this one tester. Everyone in the DRUSEC project team and collaborators, who tested the website, encountered no issues in finding the clickable text which allows the visitor to return to the main gallery.

All users described the website as intuitive, straightforward and engaging.

The outcome was the website of the “Drogen und Stadt - eine Alternativ Planung” Exhibition: https://drogenalternativeplanung.wordpress.com/

- Better define roles and responsibilities early on. This would have given me more time to sketch and create templates for them to fill in with content and to do more user research and documentation.

- Meeting with both researchers and exhibition design studio. Since we didn’t meet all together and communication was made mainly through Mélina, this delayed communication and created some miscommunication issues.

- Would have done user journeys and user flows.

- Would have tested earlier on and document the testing that was made internally.

- I would have done more interviews to develop and validate the user personas or sent out questionnaires.

- Subscription box located higher on home page.

- Usability test with at least 10 different participants. We didn't validate with academic user persona.

- Accessibility wasn't considered in design and in testing.

The website was launched on time with minor issues which were easily and readily solved, and the numbers chosen to measure success by the research group (number of subscribers, number of new professional contacts, number of website visitors) met their expectations and in some cases exceeded them. Some months after the launching, I received the following feedback from the researchers, who were thrilled with the results: