Overview
Vidivaka brings the most important news to your digital channels, providing timely, fair and honest information.

This project was presented to us while we were students at the Brainster UX/UI Academy. The company wanted to redesign their website and desided to put the trust of doing that in students.
  • The number of visits started to grow rapidly from mobile devices and they needed fully responsive website for both mobile and desktop aproach
  • We proposed that solution of this would be mobile first - approach, where we start designing the mobile version first and than we adapt the desktop version from the mobile version.
  • Usually they post 5 to 7 posts weekly, so they wanted their homepage to be dynamic and to look different for their viewers ( imagine visiting the site 3 days in a row and the same story pop-ups first )
  • We wanted all of the stories from this week to be seen from onboarding.(at least for the desktop version.). The priority will be given to the newest article, with big image, then in the left container will be two more articles with smaller images, and last,containing the right container will be the oldest news from this week, supported only by text.
  • The multimedia stories needed more storytelling.
  • Vidivaka has unique way of telling stories. They have stories supported by text , video and podcast episodes so the reader can pick his way of listening. We suggested that the user should be presented with the opportunity to scroll directly to the video or podcast player so they can get there faster and start to listen or watch. The solution was adding buttons visible with onboarding on site who would scroll you down to the player depending on what you clicked.
Research
During our stakeholder interview we talked about research that their team already conducted. They presented us with three target groups that they wanted the solution to be based on. The main target was the younger audience who were mainly users already but their numbers jumped high due to the websites authenticity of telling stories. The next ones were the older audience , mainly computer users who wanted to read about local stories, politics and also their comments about articles were increasing. The third group were the journalists who wanted unique way of re sharing the stories.

Next thing that we talked was their competition or websites that they looked up to.

They were thinking big, already having in mind websites like The Guardian and NewYork Times like some of the biggest websites in this field in the world, NowThis, The Vox were also websites that are worldwide famous and we added Al Jazeera in this list because of their ability to tell a story with videos, texts and also podcasts. From here we made a SWOT analysis of their pro's and con's and made a summary of what should our website learn from them.
Findings
The first part of our research began at our competition. Firstly we made a SWOT analysis, so we can better see at their strengths and weaknesses and we can clearly highlight their threats going forward and make sure that we dont make the same mistakes. Also we tried to find opportunities from it by conducting a brainstorming sessions where each of us presented an idea for a new feature or how should we design some parts of the website.

made a list with features that most of our competitors had in their websites and decided to compare them one to another to see which features are not consistent in their designs. We concluded and highlighted some the key features that we decided to go for and have a better experience for their users. We added social links , CTA button for loading more news when you reach the end of a site (automatically more news seemed confusing and fast for our older audience), and we added hashtags because they helped the users for easily finding what the article is about and fast searching for other article similar to the said article.
Building empathy
After the research we decided that two personas could cover the majority of our users. As the main persona we choose the younger audience. Works from office , always wants to be in time with local news , regular subscribers so they wont lose any news. They are mainly phone users who use their phone every chance they can. The second persona is the older audience, people who mainly uses their personal computer for reading. They also want to read every news , they want to support the local journalists and website which they think have accurate news. Main part of their usage of the website is the comment section where they comment and communicate with each other.
The flow and journey of the “every day” user
Because its a newspaper website the user didn't have any complex flow or journey while on the website. They simply find an article read it and if they feel they have more time they will continue reading another etc. The flow that we wanted to cover was about the user who wanted to contribute to the website after reading an article. They will visit the website search for an article, they see a category they like, click on it, then see articles similar to one another , clicks on one , read them and at the end of the article there is a cta who leads them to card donations page. They chose their plan , choose their payment option, complete the form and it takes them to a thank you page. There you have a button that sends you back to homepage so you will be inspired to read another story and don't live the site.
Structure and architecture
After conducting our research , next on the list was creating the structure of the website. The main logic was colorful homepage with blocks from every category of news. Next were links to pages who contain the main type of news , from all of those pages you could visit every article from said category. While you are on an article page you can visit article pages similar to this , or if you feel inspired you can access the form for sharing your story , you can contribute to the website or join our newsletter.
Starting the drawing process
Sketching helped me to understand the patterns and layouts that i needed to follow so i can have consistency in the design. It also helped to identify the screens that were similar in the layout type and where i could reuse components so the design part would be much faster.
Digitalisation the sketches
While the low fidelity wire-frames were fun and helped me understand the flow a lot i still needed an example in which the frames were more visual and more understanding. The high fidelity wire-frames gave me what i wanted exactly. I used lorem ipsum text for textboxes and one color filled squares for media such as video , image etc... This looked more understanding and visually adaptive.
High fidelity prototype
The high fidelity prototype helped me to present the project to the clients. They were able to scroll through the pages, see how the news page were constructed, the storytelling of the multimedia page news and all of the main flows that the users would make using the website. If you are interested in the desktop version , or the whole Figma file you can view it from here.
Building the design system
We talked a lot about the design system on the stakeholder interviews and we concluded that they wanted the main colors to stay the same . About the fonts we wanted to types : 1. paragraphs font we choose Helvetica an open sans type of font with clear design easy to read and understand. For the titles we choose Uni neue, more styled type of font that catches the attention of the reader . We have a variety of icons that we used in the design. Part of them are for video and podcast player , or just for the accordion menus or the main menu.
INSIGHTS & PROPOSITIONS
While we were designing the project we had a few brainstorming session and we talked about insights and we wanted to present them what we think they should implement in the future.
1. The header should contain more links with specific categories (best would be to see what are the categories that the users visit the most).
2. Ability to create a personal profile will be good for the younger audience because they can easily share to socials like that.
3. Due to security reasons and hate speech , they should switch the comments section from anonymous to profile commenting.
4. While its good to have podcast player on the website, the more experienced users, or to say the users who listen to podcast regularly might want to listen them on other platforms. The option to switch to another platform would be better for them.
LESSONS LEARNED
This was my first full project presented by a real client, and also a first team project. During this time i found out that not everything is the same as it is told in books.

As my first real project i wanted it to be perfect so i tried to implement every feature or idea that the client wanted to. I learned how important is to ask question about their idea of the project, their idea of the design and what path they wanted to follow.

The main part was how to communicate with each other. At the start everyone just informed the others what he is going to do and isolated to work. Then when we saw that we are not in sync and design cannot be done without communication, I kinda took the lead role. After finishing the research we were on the same page as how we would need to continue. It was fun !
THANK YOU FOR YOUR TIME !