Case Study — Redesigning Nairaland.com
Nairaland as popularly known, is the biggest internet forum and one of the most visited websites in Africa and it has been around for more than 10 years, yet it has still been able to remain relevant in this new age of multiple social media apps and websites fighting for users attention, with over 2 million registered members and over 4 million topics created till date, we can say its one of the most successful internet businesses or startup out of Africa with little to no investor funding.
There have always been different opinions about the look of the site, that it doesn’t fit into the current design standards and trends we have today, it's only a matter of time before it starts losing members because the website looks wack and so on. There are have been few attempts at getting the founder to make improvements on the user interface and general experience of the site, which he did make little improvements on, designers have also made few redesigns of the site as well, but the question is why hasn’t any of the nice redesigns made implemented?
Some of the reasons, I believe the founder has kept the site interface the way it is, is to make it as lightweight as possible, this will keep its load time the fastest possible so that all its millions of members (nairalanders) and daily visitors can always enjoy their time on the site despite varying internet connection speeds.
But another question is “can there be a way to give it a much modern “social network” look and feel while still keeping the user interface neat and simple without still compromising much on website load speed? This made me have a rethink of the whole site and I decided to come up with a design I believe meets these criteria.
Things I wanted to achieve
Improve the user interface
Improve the user experience
Subtle and appropriate use of iconography
Add some features of a social networking site
Major Targets Users
Nigerians both home and in the diaspora
First phase — Research and Brainstorming
As a member myself, it wasn’t hard navigating through the site, I browsed through the entire site itself to get ideas and brainstorm on how best the site can be improved on, then I went on to study some of the most popular websites we use to get inspiration and ideas on how best nairaland can be redesigned to keep it at par with design standards of today, facebook, twitter, linkedin, Quora and Reddit are some of the sites I checked out and also used as reference at some point during the wire-framing and prototyping phase.
Designing user interfaces and experiences to look and behave somewhat similar to what users are currently familiar with reduces the learning phase of the user because they quickly get to understand how the product or design works, that way as a designer I don’t need to reinvent currently proven and working design patterns but more on the value I want to give the users of a product.
Second phase — Creating wireframes and prototypes
Here I thought of different ways I could group similar elements, actions and content together to make the interface simpler, by using progressive disclosure I provide users only what they need to accomplish an action at a particular point in time and not just overwhelm them with many options.
Progressive disclosure is an interaction design technique often used in human-computer interaction to help maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand. — Wikipedia.
As you can see in the images below there are too many links on the current site.
Choice of Colours
I chose the default deep green colour, a lighter shade of green and a shade of red, the idea of red colour was gotten from the Eagle on the Nigerian coat of arms, it made perfect sense when I was thinking of a contrasting colour to add, the red made a good fit.
deep green colour #185518
lighter shade of green #298C29
shade of red #FC1F1F
Homepage Design
On the homepage, I was able to present the most important information needed to the user, which are
Header Section(Navigation menu)
The search form, login and signup buttons on the header, immediately below is the trending, recent and new links by the left and the most recent statistics of the site as well as date, I added icons to spice it up a little. Lastly, is the recommended topics pushed to the homepage by the moderators
For logged in Users
Logged in users have a little different menu which houses the home and notification icons that gives the user a indication of new updates, the profile avatar gives them access to their profile and links to some other useful pages such shared with me, followed topics, followed boards and log out all their corresponding icons, these aforementioned are also part of the many links that were all displayed on the homepage in the current nairaland site design, these were added to the drop-down menu for accessibility.
Image below
Homepage forum topic links
Just after the header section is a card that houses all the forum topic categories and their subcategories, as you can see in the image below,
the current site displays all the categories at once, i was able to section them into tabs so the user can easily click through the categories rather than having everything thrown at their face on the site. Below this are ads nothing different per say except that they now occupy a little more space as when compared to the current site design.
Frontpage(recommended) Topics Section
This is the most important part of the site, visitors and registered members spend time on this section of the page before they find a topic that interests them, the majority of site visitors also use nairaland as a sort of news website where they just scroll through all the front page topics to get daily updates.
In the current site design there are usually more than 60 topics on average displayed at any point in time, which are determined by the forum super moderators, this makes the homepage clumsy with links having little to no padding, sometimes I scroll through the topics, I find an interesting topic but in a blink of the eye I usually find myself scrolling through repeatedly to find the headline of the topic that caught my attention, this was reduced to 30 topics with adequate spacing to enhance readability.
Secondly, there is also no information about the topic being displayed, asides the fact that I might find the title of a topic interesting enough to make me click on it, nothing else arouses the interest to check the discussions going on in a topic, in my design I added more details such as the user who posted the topic, when it was posted, number of times it has been viewed, number of replies or comments to a post and an option that shows a dropdown with the share link, this allows users post a link they find informative or interesting on other social media platforms this will drive more traffic and engagement for the site, follow topic option.
It also allows the user follow a topic immediately so that they can always come back later to read the discussions on the followed topic in their spare time and lastly the report option to allow the user report a topic if found offensive or inappropriate. All these give the site users some level of engagement, control and direction as to what is actually going on the site especially for first-time users, for registered users it makes them feel like they are also part of the forum and not that they can only read through, create and respond to topics.
At the end of the most recent 30 topics is the pagination which allows the users to navigate through older topics up until the oldest topic ever created on the forum.
The Footer section is the same across all pages with basic information and few useful links.
The Topic Discussion Page
On this page is where all the major forum activities (replies, likes, quotes and mentions) and several hilarious backs and forth happen, I added some things such as a breadcrumb, user avatars, a sidebar for related topics to the topic being viewed, I thought of a way to design a usable breadcrumb that will also carry some basic information about the topic, the current design allows the title of the topic to be clickable which isn’t the best approach, With the new design the user can easily track his/her navigation history anytime and can always navigate back through any of the links to view more content.
Images below
The related topics card on the right sidebar contains links to topics that were initially placed above and below the discussion without a clear definition or information as to what exactly they are, asides the fact that a user can click on any of them if they are found interesting, so the best solution I could come up with was to group them together in the sidebar with the “related topics” title and a refresh button, the refresh button randomly displays different related topics when clicked, the way this worked previously in the current site design is that the topics change when you browse through the pages of a particular topic but with the refresh button that feature is achieved even without leaving a topic discussion page, the view more link allows the user to view all the related topics at once on a different page.
Image below
As a forum the only way you can know users responding to a topic is just by their usernames and gender, I added user avatars for people without profile images, but for users with profile pictures, their picture replaces the avatar. Rightly below the username, the gender of a user is displayed.
The profile pages and notification pages are influenced by design patterns from facebook, twitter and LinkedIn, they all use something I call the “Rule of 6” which is essentially putting the 6 most important links on the profile pages of a user, image below
Taking this into context I was able to choose the 6 most important links that should be displayed on the profile page of a nairalander based on the links that are currently being displayed for a logged in user, image below
Here on the profile page I was able to group related items and improve on the overall interface with the user details on the card by the left sidebar and a wide card on the right which gives a quick glance through the user most recent activity, majorly their responses to topics known as post and topics they have created up till date.
The notification page shows activities relating to a user, such as mentions also known as quotes, other users who have also liked, shared or reported the user's post as well as birthdays of other users at that point in time. The birthdays section used to be displayed close to the footer region which isn’t of much importance to the user and it just takes up unnecessary space, the solution I came up with was to use the Facebook pattern where you get notifications about your friends who are celebrating their birthdays, this way the user has the option of either clicking the birthday notification message itself to view all other celebrants for that day or just ignore, that way the user has control of the information that he/she consumes. Image below
Below the sidebars, on the topic discussion page and the notification page, I added room for a new section for ads and also some very useful links, the image below
Though we can say that people find the site valuable, so the reason for the continuous increase in the number of daily users, registrations and newly created topics but I am sure this new design is a better improvement of the current site.
Thanks for reading.
You can also find me on twitter GbMillz
Link to the design on Behance
https://www.behance.net/gallery/71261853/Nairaland-Project-Redesign?
Link to the design on figma
https://www.figma.com/file/gCblJaUMm1n6ikjKLEpgcsWw/nairaland?node-id=0%3A1
Looking for a design community to be part of? Do join Figma Africa slack channel, link below
