Creating Citizen Journalism Website from Scratch
vivaHiba is a popular open-ended citizen journalism platform that enables freelance reporters and amateurs to share user-generated content and multimedia. The project originated from Gezi Park protests in Turkey when the government tried to limit protesters communications by media censorship. Nevertheless, people could spread the word using social networks and online messengers. That's when future vivaHiba cofounder Baris Sarer came up with the idea of a non-censored social news site with the mission to protect freedom of speech and let people spread the truth about dramatic events in Istanbul.
Launched in November 2013 in New York, today vivaHiba is run by a team of volunteers and has roughly 8,000 subscribers with hundreds of them actively producing textual and visual content.
The Problem and the Goal
The client turned to Gearheart, setting the task to create easy-to-use yet powerful social platform where anyone could publish news, photo or video, and express their honest opinion. The thing is that there was only the rough idea of what the project should be like. Hence, we had to shape the website from scratch, including frontend, backend development, and design.
We improved and expanded the website’s initial concept, aiming vivaHiba to be minimalistic, but emotional and colorful. The site should be dynamic and simple to use, but at the same time, have 'gravitas' and sophistication. To match the concept, a vivid adaptive design was offered, as well as straightforward content management system for users, and simple moderation tool for website administrators with Python and Django being the major programming language and web framework respectively.
To come up with catchy but minimalistic style for vivaHiba, we partnered with DUDKA Design & Branding. As a result of our collaboration, the site has got a design, meant to manifest its "around the clock news from the street" dynamism. To point it out, the hand-written “News that you share” slogan (as a symbol of citizen journalism) is present at the logo.
Initially, website's logo included a penguin in a prohibitory sign The story behind this symbol is that when on June 2, 2013, police brutally crushed an environmental activist sit-in at the Gezi Park, CNN Turk chose to show a documentary on penguins instead of covering this event in the news. Later vivaHiba removed it.
The web page's design also shows that the vivaHiba is colorful (but not messy), sophisticated (but doesn't take itself too seriously), and socially aware/responsible and emotional. To reflect vivaHiba’s 'emotional' part, the Hibarousel was created – a visual and functional piece of design that combines the idea of being inside the event and focusing on the most important things. It’s powered by images, uploaded by users without any manual editing. The ‘in focus’ effect makes even low-quality pictures look impressive.
The page zoning under the Hibarousel includes Articles Flow section (the main information zone with the latest news + Top 3 most popular) and Extras section (where Trending topics, Columns, and Editor's Choice zones are located). Such structure sorts out a lot of identical items and presents them to a reader in an easy for perception, convenient view.
vivaHiba site is written using Python. As long as we were building a social news platform, we knew that we would deal with complex, database-driven website. To ensure its reliability, we used Django along with jQuery, AngularJS, PostgreSQL, etc.
As a result, by using these technologies and their best practices, we created Hibarousel, integrated vivaHiba with social networks (collecting 'Likes' and 'Shares' data to rank the news), developed a banners management system. Eventually, we've built a stable, secure, and fast website that can process many concurrent users.
Of course, nowadays, when Mobile is replacing PCs as 'the first screen', vivaHiba is fully responsive and available on mobile devices. Also, there is an iOS application; we developed an API for it. Thus, news and stories may be uploaded to the site via mobile Internet browser or a smartphone application.
In total, website creation - from concept to final approval by the client - took 16 weeks.
- We created a citizen journalism platform from scratch, including concept and frontend/backend development.
- We teamed up with a specialized design studio that created a vivid and engaging visual style to match the site's concept.
- Thanks to minimalistic design and implemented technical solutions, vivaHiba is straightforward to navigate for readers; simple to use for authors; and easily handles concurrent access by multiple users and editors.
- With its adaptive design, the site is fully responsive and smoothly accessible via any mobile device and ensures truly fast download. iOS app makes it even more convenient to use for Apple gadget adopters.
- Today, vivaHiba has roughly 8,000 subscribers with almost 1000 actively producing content for the site from 25 different cities in Turkey.
- vivaHiba was mentioned in 2014 Freedom House Special Report 'The Struggle for Turkey’s Internet' among several other sites to demonstrate an "outpouring of creativity and new media development online".
- After successful launch and several years operation in Turkish, vivaHiba plans to expand the site into different languages, including English, German, and Arabic.
The major conclusion of Gearheart's vivaHiba experience is that given the right concept and proper technical implementation, a social media platform with user-generated news content can successfully compete with professional online news media.
Citizen journalism and live-stream broadcasts not only helped to fill the gap left by the traditional media but they also usurped the traditional media’s functions by allowing participants and users to directly share and verify valuable information about rapidly developing situations
− Freedom House Special Report 'The Struggle for Turkey’s Internet' on vivaHiba and other citizen media websites