Platform for protestors to keep each other safe and informed
concept
Elevator Pitch
OYAN is a platform that supports protesters by helping them coordinate the demonstrations using GPS and Bluetooth technology. It provides users with an interactive map that displays area safety status, ongoing protest-related media, and a live chat for protest participants that runs without the Internet.
Name History
The series of protests that broke out in Kazakhstan at the beginning of this summer was tagged as #oyan protests. "Oyan" from Kazakh means 'To wake up'. By using this tag, the political activists and other demonstration participants agitated the citizens to finally start taking actions towards making a political statement, rather than hide or stay quiet about the issues.
about this project
This project has been developed in a small design team. We conducted domain research, explored various solutions, designed wireframes and mockups, prototyped the solution, evaluated our interactive system through user testing, and refined the application according to the feedback.
- IAT334 Interface Design | 6 Week Project
- Team: Alina Lapushkina, Claire Huang, Kiki Zhang, Kenzhe Omarali
- My Role: UX/UI Design, Copywriting, Web
- Tools: Sketch & Figma
why this particular context
Protests play an important part in the civil, political, economic, social and cultural life of all societies. They inspire positive social change and the advancement of human rights in all parts of the world.
For instance, in 2019, Ivan Golunov, a Russian investigative journalist, was arrested based on drug-dealing charges. However, the charges turned out to be fabricated as they were an attempt to halt his widely reported articles on Russian government corruption. The only reason why the charges were eventually dropped and Golunov was released is due to an international solidarity/protest campaign that blew up both online and on the streets.
Target user research
To define the application persona along with the journey map, we conducted several interviews with the people that come from Kazakhstan and Hong Kong. At the current moment (early 2019), these two countries are experiencing a lot of political changes, which became a reason for mass protest outbreaks and arrests.
- Hong Kong
- Hong Kongers are protesting a controversial extradition Bill, which if passed, will allow suspects to be sent to other jurisdictions, including mainland China. Protesters worry that the Bill would erode Hong Kong's judicial independence, and be used by Beijing to target critics.
- Kazakhstan
- Kazakhstan’s first president, Nursultan Nazarbayev, has stepped down after a nearly three-decade-long tenure and his successor, Kassym Jomart-Tokayev, confirmed his position after taking nearly 71% of the vote in the election. The demonstration, decrying what protests called a “dictatorship” in the country, is the largest Kazakhstan has seen in recent years.
design process
To finalize the application workflow and design, our team went through numerous iterations. At first, to understand and evaluate planned functionalities, we created preliminary sketches and grey box wireframes. Then, we started refining our visual direction and creating interactive prototypes of the interface workflows for further testing.
discover protests
Participate in protests
create a protest
Initiate a movement and take action by creating your own protest.
Choose ‘Public’ protest to let anyone see and search for it.
Choose ‘Private’ protest to prevent it from appearing in search
and to restrict the access to a group of invited people only.
enter protest mode
One of the main features of the application is the Protest Mode.
This mode lets the user access the protest’s live chat,
upload media and safety status as well as view other users’ posts.
share media
Upload and share media from the protest to keep other users
updated. Add text or graphics to the media to provide more
context of the situation. The uploaded media is displayed on the
media layer of the interactive map.
keep users alert
Alert other users of the safeness situation in your area by
submitting a safety status report. Indicate whether the area is
safe, risky or dangerous, add a time frame and an optional comment.
chat with others
Chat with other users that are attending this protest even
with no Internet access using built-in Bluetooth network.
view map layers in protest mode
In the protest mode, toggle between different map layers to access
the safety status heat map, the media uploads map or both.
Design iterations for map layers
One of the key application features is the interactive map in the protest mode because it has a high frequency of use and it provides important information about area safety during the protest. For this feature, users will use the interactive map to view safety status and current media uploads. Therefore, information architecture and graphic design of the app are of the most importance.
design 1
As the interactive map communicates various types of information to the users, such as safety status and media uploads, the screen could get unnecessary crowded. We wanted to give users freedom to view the data that is most relevant to them at any given time. In order to tackle this issue, we adopted the map layers approach that is widely used by most of the maps applications. The users can switch between the safety heatmap, media uploads or view both at the same time.
design 2 and 3
The original design of the interactive map was in a dark mode, with red location icons representing media uploads. However, after careful revision, my team and I made some changes to the approach. We realized that the dark mode would not be comfortable to use during the day due to the low contrast between the map elements. We also introduced a new warning icon to represent safety status alerts. Thus, we changed the location icons to circles for the media uploads in order to better differentiate the icons. While in both design 2 and 3, we used the same methods to communicate map data, the main navigation bar is only present in design 2.
final design
After testing the application with target users, we used the insights to improve the functionality of the map. All of the test participants stated that the blue colour in the safety index was confusing. The suggested improvement was to use the traditional colour palette that uses green to indicate the safest status. We also changed the appearance of the map layers dialog to match the overall style of the application.
Conclusion
Currently, there is a lack of digital platforms to safely state your
opinions regarding political situations and bring attention
to the social movements. This project has explored the
possibilities of using digital devices to raise awareness about
political issues and take action towards solving them.
