Case study: UX & UI redesign of Nepali news portal- Koshionline (Web)
OVERVIEW:
Koshionline News Portal
Koshionline is one of the most popular news sites in Eastern Nepal. You can read the news in both English and Nepali language. It is an officially registered news portal by Republic Herald Media & Publications Pvt. Ltd. The online portal delivers the national and international news of different sectors like finance, sports, politics, education, sports, etc.
PROBLEM STATEMENT:
“To redesign the user experience of the website and improve the overall UI of the news portal”
A sneak peek into the old design of the Koshionline portal
PROJECT GOALS:
- To have a fresh new design for the website.
- To add extra pages to the site.
- To make the site design cleaner and less crowded.
Client’s Goals:
The client of Koshionline wanted to redesign their portal completely. They wanted to have a fresh look for the portal which was clear and coherent so that the readers can stick to the portal for long.
I sat down with the clients from Koshionline to understand their priorities and the pain points and to understand what was their goal for the project.
Client’s Pain points:
- The old design was messy and looked very crowded.
- No proper hierarchy.
- The colors used were too loud.
- No consistency in the design.
- Too much information on a single page.
- No proper space for the ads.
Client’s Priorities:
- To have a cleaner-looking website.
- Have consistency in design.
- Have an adequate amount of news on a single page.
- Have a good amount of ad space.
GETTING STARTED:
User Research
We didn’t have much time to perform proper user research as the clients were in a hurry to get and release the redesigned website. So, we performed a quick survey by sending the old Koshionline news portal to our friends and families and asked them to go through the site and give their feedback on the design.
Research findings:
The following were some of the feedbacks:
- The color is too heavy on the eyes for a news portal.
- The hover colors on the news were too flashy.
- No distinct buttons to navigate.
- The colors of the font weren’t clear enough.
- Information overload on a single page.
- No proper distinction between the categories.
Competitors’ Analysis:
After we had the feedback from the users, the next step which we took was doing a competitors’ analysis. For that, we did an overall study of the design of several similar portals such as Setopati, Khulamancha, and Online Khabar.
After we had gathered enough idea about what the competitors’ portals looked like, we then again sat down with the client to discuss further the project goals. We showed them a rough sketch of the new design that we had made and asked them to review it.
After we got the green signal from the client, we started working on the hi-fi wireframes including all the necessary changes suggested by the client.
They already had a new color theme and logo design and wanted us to work accordingly.
FINAL DESIGN
Navbar Redesign
For the navbar, first thing whe changed was the purple color used in the old design. We removed the unwanted categories and divided the whole news category into two different sections. We put the most important categories such as Home, Notification, Pradesh, Trending and Koshi TV at the top along with the search bar and language translation button. We also placed the new logo beside the menu items.
After that, in the bottom section, we put all the news categories such as Politics, Economy, Sports, etc. It made the menu bar look cleaner and eye pleasing as well.
Category section on the homepage
The next thing we did was tackling the messy category section problem. As we can see that the old design had a very messy-looking category news section (in this case, Politics). The text over the images wasn’t legible.
Thus, we decided to divide the news category into two columns. In one column, we decided to put news related to the category as main news, and then in the second column we put three news in a row.
The texts were now written at the bottom or on the side of the images which made it look cleaner and easily readable.
Video Section
As we can see in the old design they had a black background which did make the Video section look comparatively better than the rest of the homepage sections but when we looked at the homepage as a whole the video section looked out of place as it was inconsistent with the rest of the sections.
Thus, to make our design look consistent, we used the same design elements from the 'category' section and again divided the video section into two columns. With one main video news in one column and 4 video news in the second column with two news laid out in a single row and the other two in another row. We also decided to put a gradient overlay on the video thumbnail so that the play button could be distinct and noticeable easily.
We also put tags in the colored boxes. The tags represented the topic of the news. For example: 'Covid' tag represented that the ness was related to covid.
Video section inner page:
Honestly, according to me the old design of the inner section of the video news looked better than the new one. I liked how cleanly the news were laid out category wise in the old design. But to maintain the consistency of our new design, we had to change the old design completely.
We also added the tags at the top of the page just beside the category heading. The readers could just click on the tags and all the news related to the clicked tags would be shown on the page. It would make the experiencem of the readers better as now they don’t have to sceoll down the page searching for the categories they want to read first.
We also made sure to give ample amouny of space for the ads on the page.
Inner Pages
For the inner pages or simply the news detail page, we placed the news image, headings, and the news inside white boxes and gave enough padding to maintain the consistency of the design. We placed the related news besides the main news detail area with the heading of the news placed over the image with a black overlay with 50% opacity.
We also added the 'About Author' section and a button which when clicked would direct the user to the profile page of the author/reporter/writer where the users can read all the news written by the author and also get their social media links in case the user wants to connect with the author for some reason.
Similar changes were made for the remaining pages as well and our redesigning process was completed. We then set a meeting with the client and showed them the new design. The client was satisfied with the new design and thus the development of the new design was started by our developers.
Take Away
With this project, I got to learn a lot of things such as:
- How to deal with the client? It was my first project where I was the lead of the design team and I was given the responsibility of dealing with the client.
- It helped me gain more insight into the news portals and their designs as I had to do a lot of research during the competitor’s analysis phase. Thus, I was able to accumulate the idea about the standard news portal design.
- After this project where I got the opportunity of leading the team, I can confidently take on more such projects as a lead in the future.
Current Status:
- The site is in the testing phase and minor iterations are being made.
- We have started working on the wireframes of the mobile application of Koshionline.
My social links:
