The Beginning:

I started with tackling the problem points. What about the design wasn’t working? From my research, I found the layout was all over the place. The ad-space was ill placed and focused too much of the page, the ‘recent entries’ feed had nothing to do with what the user tracked or who they followed, and the posting button - which should be the main feature of the website - was barely visible and blending together with the top bar.

My Initial Designs:

To start, I sketched three different layouts while comparing livejournal to other similar blogging and writing websites/apps such as Tumblr, Twitter, and Wordpress. I wanted to make sure each section was more visible and the unimportant links and content could be accessed in a dropdown menu instead. As well as that, I wanted to include links to important pages that were not previously on the homepage.

The Re-Design Process:

• A white background on any website can be taxing on the eyes, so I tried to refocus the color theme already implemented in the website and apply it to the base page.

• I separated each blog post into it’s own floating block, formatted into a grid for an easily viewable layout. This way, the eye is drawn to the most important function of the website, and it is able to parse each post from one another.

• The post button should be also be a central focus, so I centered it and added a pencil icon to make it more accessible and recognized when on mobile.

• Originally on the website, so many sections like the friend’s feed, media storage, the messaging system and the like are separated, cluttered, hard to find and arbitrarily removed from one another. I condensed all of these links into easy to categorize links at the top of the page, where they can be accessed more easily.

• The search function seems like an afterthought on the original page, so I fleshed it out into a longer search bar and centered it so it could be more visible.

• I added a settings link at the top in the form of a gear icon, since on the original site it was only found by clicking on the profile icon, whereas the two should be separated and many settings-related pages that are elsewhere could be condensed into one page.

The First Draft:

Originally, I went with a combination of sketches #2 and #3, combining the grid feature and the post button at the bottom, while eliminating clutter. However, I found that the icons were too clunky and ill-suited to the design.

Final Designs:

An easy fix, I simplified it to only the text, as I realized it didn’t need the icons and was visible on it's own. I also changed the sort by icon to a slimmer scale as it appeared badly proportioned.

Conclusion:

While livejournal still holds onto its old UI, the design presented here could be a significant improvement and a step-forward to bringing the website back to it’s glory days.