Designing the Flud Website App From Need to Launch

Work Posted on — 01.27.2013

Designing the Flud Website App From Need to Launch

Once again, the team at Flud came to us to help them transform the way businesses and their employees find and share relevant articles online.

BASIC Flud Website App in Use

One of the great things about running a creative agency like ours is the fact that we are constantly challenged by our clients to help them innovate and build something that will change the game. Once again, the team at Flud came to us to help them transform the way businesses and their employees find and share relevant articles online.

When you think about it, it isn’t everyday that an agency gets to conceive and execute an enterprise level solution that can benefit every professional that browses the internet. This is a top-level look at the approach we took to build the new website app. 

The Need

Professionals all over the world spend countless hours browsing the internet and looking for content that they find relevant so they can become more informed. With the release of the Flud mobile and tablet applications, Flud created a solution that provides businesses and their professionals with a centralized location to find and share information.

To complete the enterprise solution, Flud needed a desktop/web based application that would allow any user to access their offerings online with ease. It was also imperative that the solution compliment and enhance their current application experience while still maintaining unity across the brand. Flud’s CEO and Founder Bobby Ghoshal tasked us with strategically and creatively leading the development and bringing this idea to reality.

The Challenges

Large scale web projects provide some difficult challenges. When you’re developing a website platform that will act as central location for professionals to use as a news aggregator as well as a social platform those challenges become even greater.

As we set out to tackle this endeavor we developed a feature and functionality document that outlined everything we needed to address and achieve with the app as well as rough ideas on how they would function. This document was used as a base for us as we approached our user experience, visual design and technology execution. It also inspired a lot of potential offerings and features we could integrate as we roll things out in the future.

Below are a few (of the hundreds) of questions and thoughts we addressed within the documentation to prompt our thinking and execution strategies...

  • How do we build a scalable platform that encourages reading, sharing and social connections for both personal users as well as enterprise users? 
  • How do we build a platform that leverages all of the offerings available in the mobile and tablet versions while taking advantage of the additional viewing area and functionality a personal computer provides? 
  • We need to be focused on the user… not just as an employee but also as a person trying to become more knowledgeable and informed. 
  • Company news is company news… How can we get them to leverage this tool away from work so it benefits them personally as well as professionally?
Designing the Flud Website App Wireframes in Notebook

User Experience

During the build, we spent a lot of time thinking about the users and their needs. We really wanted to define and execute a solution that would benefit both enterprise users as well as personal users. To do this, we needed to outline what was important to them and help them get there.

Through numerous discovery, sketch, wireframing and user scenario sessions, we came up with an architectural framework that allows users to easily navigate between their news streams and share with the click of a button. We also found ways to encourage discovery and enhance the management of their new streams and sources.

Below are a few of our key determinations

  • Discovery will play a pivotal role in enhancing the experience. By providing users with a central stream of content and a contextual side navigation, they will be able to view, experience and share various pieces of information in a manner that is familiar and consistent.
  • By implementing an "always there" activity bar that communicates everything happening within the network, we can greatly enhance the experience by providing the user with "real-time" access to what the network is reading while increasing the social aspect by allowing them to preview profiles and data.
  • Most users won't initially be connected to a company.. we need to ensure that the experience is tailored for them as well. If we can define a great personal experience and become company affiliated, use percentages will greatly increase.
  • When a user wants to share information, we can make them :Flud" something first in order to share with Facebook & Twitter. By doing this we are improving the social aspect of the Flud community and we are allowing it to grow organically. This solution is beneficial to the user sharing the content as well as the network seeing content they found relevant. 
  • While reviewing the data sets available, we determine that users will really care about their IQ or "level of influence," what people are reading and what sources they are reading from.  We took this information and integrated it throughout the app. Site wide features such as "real-time" activity stream, user profiles, finding influencers and finding streams are great examples of this.
  • We can assist the user in their quest to find information by learnings bout their reading habits, who they follow and what the network is reading.If we turn that information into recommendations throughout the site we will be adding to the discoverability of the site and will also keep it fresh with new content and recommendations. 
Designing the Flud Website App Sketching App Icons

Social Integration

We really wanted to focus on this social aspect of the network because it would provide us with two key benefits... The first being that we could grow theFlud community by establishing more user-to-user connections.  And secondly, we could build upon the enterprise offerings with the idea of teams and groups connecting through shared content. 

We also wanted to develop and build upon the idea of the Flud IQ, whichgives every user a rating and an identity within the network. The goal behind this is to encourage more peer-to-peer connections and "gamification" which challenges users to increase their score on a daily basis. The Flud IQ measures the amount of influence you have within the network,thus giving you more "credibility" as an influencer within the network and as a sharer of meaningful information. 

Flud Website App Holding Mobile Phone

Visual Design

As part of our brand wide design overhaul, we really wanted to push Flud in a minimalist direction that moves away from a somewhat skeuomorphic design and towards a more "flat" and welcoming environment.

Because we are dealing with a text based offering where information presentation is key.... we worked really hard to define visual hierarchy within the design. From exploration of various font weights, sizes, tracking and leading - we created an outcome that allows the user to easily scan news content as well as the navigational rails in an efficient manner.

To improve the visual aesthetic and function of the site, we found ourselves referencing online and offline news sources such as blogs, newspapers and books. A key thing we encountered was that when a person is browsing news, stories, or informative content, it is easier to consume the information when the text is presented in an "inline" manner with the image kicked over to the right. Thus, we implemented it into our design.

To add a bit of polish to the visual design, our designers and dev team looked for ways to implement subtle motion and interactions into the application. Throughout the Flud web app, users will notice little details such as the header bar minimizing as users scroll, transitions between environments with content fading and sliding in a very smooth and light manner - giving the site a polished and "fun" browsing experience. 


The entire Flud network was developed in-house at BASIC by the Flud product team. The development team not only created an enterprise solution with curating, collecting and sharing capabilities, but also has its own analytic framework and social network. This framework spans across mobile, tablet and desktop devices and collects as well as presents information for organizations to learn more about their employees.

To enhance the enterprise solution, the dev team created a management portal where administrators can view various data-sets ranging from who is reading what, where that information is coming from as well as activity on a day-to-day basis. They also implemented a content curation system where stories, push notifications, groups and feeds can be created and managed from one central location

Web Flud Newsreading App Website Design

Bringing it All Together

This was one of the most challenging and fulfilling projects I have ever been apart of and i couldn't be more proud of both BASIC and Flud for getting this product launched in just 3 months time. We're already cranking on updates and additional features to enhance the product set. 

I really believe that our team, in conjunction with the great minds at Flud, have done something revolutionary that will change the way businesses and their teams find and share information. I'm not saying that because we built it... I'm saying that because the change has already taken place within or agency. Throughout the process we were testing internally and some of the information shared actually found its way into the app or influenced some key decisions we pursued in our approach. 

We're excited for what comes next and some global organizations are as well. If you want to learn more about our relationship with Flud, please take a look at our brand story and be sure to try out the website application.... it will change the way you read information on the internet.