Agora is a digital platform and a product ecosystem that enables citizens’ activities within urban spaces to be rendered legible and support civic engagement. It allows citizens to share and interact with various social events and activities via different touchpoints. It can also aggregate all of the events and activities from different social media channels. This digital system notifies citizens about various types of social events and activities in different settings. For instance, a citizen might be notified when he/she uses the city’s public transport, or another citizen might be notified of the same event through a smart-phone application. The main focus in the design investigation was on mobile application, users will be able to create and initiate an event or activity when they are in an urban setting and share them quickly. Users can also generate content regarding events and activities and share it with other attendants. Therefore, this application reduces multiple steps that usually people take in common experiences with existing event-based social networks when interacting with events and activities everywhere and anytime.

Design Process

This project was one of the three design investigation of my master’s’ thesis project. The design process began with understanding the different user groups and potential audiences of the product ecosystem. The initial phase was creating different persona and mapping a user journey map and UX scenario for all of them. Diagram 1 shows the design process in this design investigation.

Fig 1. Design process timeline that shows the cyclical nature of my process and how I moved back and forth from multiple iterations to the initial design research.

This user journey map has three related story line that shows the experience timeline of three personas. Each of those three personas have different interaction with Agora digital platform via multiple platforms and in different settings.

This isometric illustration shows how different layers of information are organized in the smart-phone user interface. User interacts with general information up-front and goes to subsequent layers in case he/she needs more information.

Information Architecture

As far as the architecture and the organization of the information, the mobile application has three major sections through which users can interact with the app. These three sections are search/explore, create events and activities, and personal settings. See below IA diagram that illustrates the structure of different sections of the app.

User Interface Design

The user interface in the smart-phone app is based on a visual system for representing events and activities as color circles. As illustrated in the information architecture diagram, the four modes under the search and explore section are four ways through which users can interact with different events. Below are four modes of interaction.  Also, there are icons on the bottom of the screen by which the user may switch between four different modes, create an event, and set up filtering and other personal settings.

• Location Based: Map
• Augmented Reality
• Event List
• Time-based: Calendar

The circles are in seven color, associated with seven days of the week. The color coding system helps differentiate events based on time. In addition, colored circles are interactive elements, which may have different kinds of labeling. Through these form of representation the user gets general information of an event and then if it is necessary he/she may go to other layers  for further information.

The hierarchy of information is organized in such a way that users gets the most important information up-front, and if necessary, get further information in other layers. This structure prevents the user from being overloaded by too much information regarding events.

In addition, the “Create” event section is structured so that the user can define the event quickly, and other information will be filled later by other attendants.

Colored dots represent different events with title, location, and date. On the backside of the dots the user may see the organizer and his memo. The big number also shows number of attendants.  The bar around the circle represents the occurrence of the event. Once the event finishes the bar disappears. Each dot also has a dynamic indicator that shows the direction to the event’s location. The indicator is an arrowhead out of the dot.

The user may see the list of attendants by swiping right the picture on right edge.

Map Mode

In this mode the user may see a real time representation of events on an interactive map.

Augmented Reality Mode

In this mode the user can hold the phone and see events augmented to the camera picture.

Both Map and AR mode support animation of events. The user may see events in a fast-forward animation both in map and Augmented Reality modes.

List Mode

In this mode the user can see the events listed vertically and sort them based on proximity, time, or relevance.

The user may see the complete description of the event by swiping right off the title.

The user may tap on color circle and see the organiser’s profile picture.

If the user does not want to see events based on direction or proximity, he/she may search events by location by typing an address or zip code on the search bar.

Calendar Mode

In this mode, events are represented in an interactive calendar. The duration of events are represented in this mode. In addition, the user may synchronize his/her personal calendar with this calendar.

Filtering

In many use cases there will be lots of events and activities that a user might not be interested in seeing them on the interface. Therefore, a filtering system is necessary. In this app the users can filter events by time, subject and location. For instance they can use add specific locations and define searching distances for each. The user can also pinch or spread to change the searching distance. Another way to define a location based filtering is by drawing a boundary on map.

The user may filter events based on time. Each day of week has a specific colored disk through which user can define time frames to filter events.

The user may switch between days by swiping down the color circle.