B

inCity

Have you ever missed an event? It won't happen again!

Sector

Public Administration, Administration of Housing Programs, Urban Planning, and Community Development, Community development agencies (NAICS)

Target audience

Tech-savvy residents and visitors of Gdańsk

Problem

Gdańsk, like many cities, faces negative socio-economic trends that impact social integrity. The problem was to create a solution that could enhance community integration and improve access to social services.

My role

Research, UX/UI Design, Prototyping, Testing

Project time

6 weeks (Oct - Nov 2022)

Tools

Figma, Figjam, Googole Meets, Dovetail, Google Docs, Adobe Illustrator

Reading time

6-8 minutes

Overview

inCITY is a mobile app concept designed to tackle the pressing challenge of social integrity and engagement in the city of Gdańsk. The app aims to bridge the information gap between residents and service providers, empowering individuals to access vital resources and fostering a stronger sense of community.

Challenge

The challenge involved identifying and addressing the root causes of low social integrity and engagement. Once these factors were identified, the task was to translate them into practical design solutions.

Goal

My primary objective was to create conditions for active citizenship. I also aimed to bring benefits for the business, such as the growth of the city's competitiveness and the optimization of financial outlays.

Process

I followed a Double Diamond Framework to guide my process. Through research, including interviews, and analysis of policy documents, I identified the key drivers of social involvement. To address the need for accessible information, I generated and refined ideas, resulting in a prototype. I conducted usability tests to ensure an intuitive user experience.

Discover

I conducted an analysis of strategic documents and several Q&A sessions with stakeholders (i.e. cultural institutions and district councils) to gain insights into the problem of social activity.

Graphics and quotes from the Gdańsk 2030 Plus City Development Strategy. The image highlights the challenges, priorities, and goals outlined in the strategy, providing a visual representation of the city's vision for the future. — *Image: Graphics and quotes from the Gdańsk 2030 Plus City Development Strategy*

What is the plan?

To guide decision-making I developed a Strategy Blueprint. I uncovered the key challenges and devised a way to reach the desired outcome.

The strategy blueprint showing challenges, aspirations, focus area principles, activities and desired outcomes of the project — *Image: Strategy blueprint*

Setting research goals

This led me to develop a Research Plan. Specifically, my focus was on individuals aged 16-70 who engage with digital technologies on a daily basis. Throughout the research, my objectives were to:

Deep dive into IDIs

To better understand the problems and needs of users, I conducted 7 interviews with Gdańsk residents. The interviews revolved around their social activities, exploring insights from both active and less active individuals. I organised the gathered notes using an Affinity Diagram. Through several rounds of grouping, I extracted the key insights.

Graphics presenting research insights: 1. Time Efficiency: Users expressed a reluctance to spend excessive time searching for events. 2. Missed Opportunities: Many participants reported frequently missing out on interesting events or learning about them too late. 3. Desire for Involvement: Users expressed a desire to be more socially involved but often hesitated to explore new activities independently. 4. Audience Reach: Event organizers faced challenges in effectively reaching their target audience. 5. Mobile Usage: People predominantly relied on their mobile devices when planning and organizing their activities.‍

How do others do it?

I researched and prioritised competitors. Using the information gathered, I conducted a Competitive Analysis to evaluate user engagement and feature offerings. This helped identify the unique value our product could provide to potential users.

Graphic showing competitive analysis matrix, compering different features of competitors' products — *Image: Competitive analysis - feature comparision matrix*

I was intrigued to discover that despite Facebook's numerous features, users chose trojmiasto.pl as their go-to source. The website's well-structured event calendar and advanced filtering options gave users greater control in exploring events. This finding reinforced my focus on prioritizing categorization and data presentation in my design.

Define

I wanted to focus on developing empathy towards users, and to achieve that, I utilized empathy maps as a starting point to create personas. Through this process, I identified two primary user roles: participants and organisers.

‍
Connecting dots

By understanding the needs and goals of each persona, I strived to establish a connection between users and the business value. This approach guided the development that would effectively deliver significant value to the intended audience.

Image: Value Proposition Canvas - Persona 1 (Kamila)

Image: Value Proposition Canvas - Persona 2 (Przemek)

Develop

To fuel the brainstorming session, I transformed the POVs into "How Might We..." questions. To prioritize the generated ideas, I utilized the MoSCoW (Kyiv) Matrix. I identified the functionalities that should be addressed first based on the users' needs, allowing me to narrow down the scope and concentrate on the most vital elements.

MoSCoW matrix showing prioritization of the app functionalities, i.e. searching for events and activities, creating events and activities — *Image: MoSCoW (Kyiv) Matrix*

Benchmarking

I circled back to the competition, this time zooming in on their specific features. I closely examined their usability and usefulness. Armed with this knowledge, I gained clarity on how to incorporate the desired functionalities into my product and steer clear of potential pitfalls.

Graphics presenting pros and cons of chosen platforms used by users to explore and create events in the city: Locals.org, Trojmiasto.pl, Facebook

The architect of information

To keep the bigger picture in mind, I needed to align different app functionalities. It was time to structure and organize all elements in a logical and coherent information architecture.

Task flows that flow

I narrowed down my focus to the core activities the app would support: exploring and planning events, and organising events. I dissected these task flows into individual steps. My goal was to understand every decision users would make and create a seamless, step-by-step process.

You better... sort

Arranging filters and categories for the events posed a challenge. Among the competitors, trojmiasto.pl stood out with its extensive options. Using it as a starting point, I decided to conduct card sorting to progress. During 3 sessions, I was able to develop a more consistent structure. Nevertheless, refinement through further iterations will be necessary.

The results of card sorting session conducted with the participant 2. The categories were sorted by 6 main categories: sport activity, education/work, culture, entertainment, occasional, food — *Image: Examplary card sorting of different types of events - Participant 2*

Pencil in hand

Time for the fun part... sketches! I had a clear idea of how many screens I needed to create. To speed up the process, I utilized rapid sketching for initial concepts.

*Image: Sketches of different ideas for the layout of the main screen content - sections / lists / tiles*

Starting low, aiming high

I chose the ideas that seemed to best meet the users’ goals and transformed them into wireframes.

Sample wireframes showing different screens of the app: main screen, event screen, search results - map view, date picker, search results - grid viewi — *Image: Sample wireframes*

In my first attempt at visual design, I aimed for a clear and vibrant look with an orange color scheme. Accessibility was also a priority, with a focus on contrast ratios and font sizes.

Sample mockups showing the further development of visual design - from simple wireframes to mockups — *Image: Sample mockups - Iteration 1*

I was eager to translate all my efforts into a prototype, especially since this was my first project. I was excited to see how users would interact with it.

Usability testing

During the usability tests, two participants completed the tasks with few difficulties. The feedback was positive, emphasizing clear processes and extended filtering options. However, they expressed concerns about the potential complexity of data organisation and lengthiness of the process, suggesting it may not be ideal for everyday use.

Graphics presenting insihts from usability test: time consuming process and too complex data organisation

Design critique

After the usability test, I consulted experienced colleagues who also advised me to improve the app's visuals and align them with design guidelines like Material Design or Human Interface Design. I refined the interfaces, reducing the number of screens and steps, and providing more flexibility for a smoother user experience.

Graphics presenting areas of improvement in further iterations: to increase flexibility of the process, to enhance the visual design, to reduce the number of screens and steps

Deliver

After completing the design process, my objective was to create a comprehensive prototype that showcased improved clarity and user experience. To achieve this, I made design enhancements such as:

Graphics presenting enhancements in the design: reducing shadows and increasing the use of white space, incorporating more flexibility, user flow optimization, introducing Android native elements

During the design process, I sought to explore different Figma tools and incorporate a range of interactions. It's worth noting that not all of these interactions have been fully developed, which could potentially lead to performance issues when interacting with the prototype.

Sample mockups presenting the further development of visual design - Iteration 2 — *Images: Sample Mockups - Iteration 2*

Design styleguides

Moreover, I aimed to establish a solid foundation for the design system by developing design styleguides that encompassed all the elements used throughout the project.

Graphics presenting different states variants of navbar component — *Image: Different states variants of navbar component*

Lessons learned

Being my first project, I felt the urge to showcase my full range of skills. It was an exciting and challenging experience that allowed me to delve into various aspects of the UX design process. The most valuable takeaway was identifying areas where I can continue improving my skills. Now, I have a clear sense of direction for focused practice and personal growth in the field.

‍

Try the prototype