Etsuri is a topic-oriented news app that provides and organises all news on any topic you want to follow into a simple timeline. It is a news aggregator and writing platform aimed towards journalists. 

Etsuri works in a way that the user can select which topics he wants to see news of, that will be displayed in his dashboard. Additionally, he can also write news and follow other users. In addition to following topics, users can also add their own topics if they can't find the one they are looking for.

While the mobile app was already in alpha version in App Store, the team wanted to build a web version to give the users full experience in writing articles. The goal was to give the same user experience, keeping the consistency and with what the user already familiar with of the mobile platform. But at the same time, using common design patterns, visual language and user flow native of the web.

Before I begin I always start with pen and paper to build my ideas. Right after, I've decided on a certain look, I will head over to create the wireframes digitally.

I worked on the web app and a few items on the mobile app. Here are some pages that I created. 

This is the first page the user will always see when they visit the platform. In the mobile, it's very easy to decide on how will it look. But for the web where the screen is wider, I found it complicated at first.

I worked on many variations until I came up on this final look in which the team liked and approved.

I took a step back and placed myself in the user's shoes. If I'm gonna browse and read news, I want to easily scroll through and focus on each item if I want to. Having a grid display is good because it displays many items at once but it doesn't give the user a chance to focus on 1 item. 

Slim Menu. Although this has already been the default for all of the variations, I just want to point out that we went for this slim-looking menu so it wouldn't be distracting to the users. It's meant to be sticky to give users easy access on the site but not distracting.

Shortcut menu above the articles. I put that menu there so it'll be easier for the user to notice in case he wants to write an article. Originally, it is only in the top menu, but I added a bigger version of it so the access would be more easier. I also added additional options depending on what media type the user wants to create.

New items displayed on 1 column. I scratched the idea of multiple columns and grid display because they do not focus on the content. They are only good on displaying media like photos. And to give more options to the user to browse news, I added an excerpt in which he can quickly read through. This way, with the 1 column display, the user can have a quick view of the news he picked to show on his dashboard.

Topics Sidebar. Because the dashboard is user customised, meaning the news displayed are pre-selected by the user according to the topics he wants, it is pretty enclosed only to the user. So, to have the user get more aware of what's happening, I added a sidebar on the left that displays which topics are trending. To make it more attractive, I put these topics in a container with related backgrounds.

Trending News. The trending topics may not be enough, so we added this section for the user to have more news to look through. In the prototype above, it's only item on the sidebar, but on production up to 3 were put there.

It is crucial to onboard the user into your app so he would feel comfortable and familiar while using it, that he wouldn't have the need to explore and learn by himself. Here, I created the onboarding as a 3-step process to make the user familiar on Etsuri.

Here below is the screen when the user has search for something. The search bar is above in the menu so he can access it easily. The page looks similar to the dashboard so the user wouldn't feel different when looking at the search results. On the right, he also has an option to change his query to Topics and Writers to give him more search results.

Here below is the Topic Page, the page that will appear when you click on a topic. Here will appear all articles tagged with the topic. Most pre-made topics has a description. The user will also have the option to follow the topic and to share it to social media. 

The layout of the news items here almost identical with the dashboard, only removed was the sidebar because it didn't have a function here. 

The last phase of this project was for me to turn my designs into code. At this point, I worked with the Rails developer to make this, since I was on Windows during that time and there was no way for me to get into the git repo without using a virtual OS. 

To work on this, I coded every screen into HTML and CSS, and it was the developer's job to put it in rails. I used Bootstrap as suggested by the developer for easy integration. When coding, my toolkit usually includes Gulp for automation of many tasks and LESS, my favourite preprocessor.

Working in a small team of 5, I loved the tight-knit communication we kept. Iterations were quick and changes had to be done fast. With great communication, we regularly checked for feedbacks and tested the app. We shared progress within the team often, so there was frequent direction. I learned a lot from working on this project, and I consider this opportunity that enhanced my communication skills.