Lifehack Quotes

Quotes Go Social

quotes.lifehack.org  →

One of the premiere lifestyle and productivity blogs on the Internet, since 2005 Lifehack.org has helped millions of readers find ways to make life easier and more fulfilling. Always looking for new ways to provide great advice, Lifehack looked towards the power of a simple quote. Much wisdom is distilled in the quotes of great people who have come before us, and Lifehack had a vision to leverage its platform to spread them further than ever before.

Flowloop helped Lifehack to develop a rich quotes website, with impactful visuals and a heavy focus on sharing these snippets of wisdom with others. We provided strategy, design, engineering, and support.

Project Goals  →

Rich Visuals

Rich Visuals

The right visual paired with a simple quote can really enhance the message that it conveys. Since we wanted a powerful impact, a design emphasizing imagery was an important consideration.

Mobile Browsing

Mobile Browsing

With a large proportion of readers accessing Lifehack on mobile devices, the site needed a responsive interface that could fit all manner of screens while integrating touch and swipe actions into the user interface.

Social

Customized Sharing

When we read powerful quotes, often we think of who they might relate to within our social circle. One of the main features of the site is the ability to quickly and conveniently customize and share a quote with someone through all the most popular social media plugins.

Up

High Traffic

Lifehack receives over 1.5 million unique visitors a month, and with each quote being shared multiple times, it expected even more to hit their website. With immediate traffic loads in consideration, Flowloop implemented a modern and flexible technology stack that scales easily to high loads with room to grow at a manageable pace.

Strategy & Design  →

With a strong emphasis on visual impact, Flowloop investigated several avenues to achieve the desired results. We started by experimenting with textures and colors, and eventually arrived at incorporating large, rich background images that would fill the entire screen.

A picture is worth a thousand words

Keeping it simple

During our research we felt that a lot of existing quotes websites felt very heavy, with walls of text. To streamline Lifehack's user experience we condensed all functionality into just a few clean, lightweight interfaces for searching, browsing, and viewing quotes.

Website Design

Reponsive Layout  →

A great experience in all sizes

Responsive design and interface elements was a high priority to allow the website to have consistent visual quality across a range of devices, from mobile to desktop. We also made sure that the site was responsive to different types of input, such as mouse clicks, touch, swiping, and even the keyboard arrow keys.

Responsive Design

Quote Sharing  →

Customize in 3 steps, or 1 click to share right away

Reading a quote and immediately being able to share it with a friend that it reminds you of was a very important requirement. Lifehack Quotes was integrated directly with Facebook's Open Graph functionality to allow anyone logged into Facebook to immediately see all their friends. We made sure that the interface was fast and easy so that it only took at most, a few clicks of a button.

Sharing Quotes
Sharing Quotes

Technology  →

Django Framework

Django Python Backend

A high performance framework that is versatile enough to serve almost any type of system today. We chose Django to be the backbone of the Lifehack Quotes site because it has proven performance in heavy traffic websites such as Instagram, Disqus, Mozilla and Pinterest.

Amazon EC2

Amazon EC2

We chose to deploy the website on Amazon’s elastic cloud service because of the flexible, fast responding scalability it provides as well as the ability to easily expand the architecture for growth.

Conclusion  →

Although seemingly simple in design with a minimal interface, there’s a lot hiding under the Lifehack Quotes hood. Creating a word-centric website that could transcend the traditional plain text format was a fun and creative challenge. Paired with the right imagery and with intuitive sharing functionality, we helped Lifehack create a website that presented online quotes in a new and exciting direction.