Stream Blog Optimised Strip
September 19, 2014 |  Posted in: Design, MVP, UX/UI, Web Development

Stream Unplugged

Stream wasn't possible without our dedicated creative and technical teams working across both client projects and our own product simultaneously. We’ve managed to structure the company around billable work and product work without client projects suffering, and while also being able to turn a profit. This isn’t easy, and there’s certainly been give and take across the board. But we’re passionate about products. We’re driven by the notion we can one day survive off the revenue generated from our ideas alone. That an idea can pay for a company that employees teams of people across multiple offices is aspirational. That we can create a company focused on launching products that people rely on to get things done, achieve more and successfully grow themselves is what keeps us motivated.

We wanted to share in detail how Stream was conceived, developed and launched in the event it might help motivate you to do the same.

The napkin sketch

All great products stem from a single idea. For most of us we sit and contemplate these ideas, often sketching out an interface that will house the mechanics of how users will work with the product. The famed napkin sketch enables us to distil complicated concepts into graphical pictograms, allowing anyone to become a storyteller and convey the magical elements of their idea. Those of us involved with the design and development of Stream sketched numerous ideas and approaches to how the product would work.

Concepts that depict how we envisage the user interface would work on a mobile device, how content would be displayed and how a user would navigate the application.

Stream Unplugged - Napkin Sketch Mobile

Concept for the desktop user interface.

Stream Unplugged - Napkin Sketch Desktop

Early font and colour palette development.

Stream Unplugged - Colours and Fonts

Once the concept was developed on paper, early wireframes were developed in Photoshop.

Stream Unplugged - Wireframe 1

The next step from wireframes is to develop the user interface design. 

Stream Unplugged - Wireframe 2

Stream Home

A completely responsive user interface greets users when they first access Stream. The home screen presents everything as a stream of timely content. View posts made by other users in the stream, comment on content and post new content to Stream.

Stream Unplugged - Home

Stream Profiles

Every user in Stream can manage their own profile. Stream will display everything you’ve published to the stream, everything you’ve liked that has been posted by others, and who you are connected to. You can also create your own Groups and decide which of your connections can be invited into these groups.

Stream Unplugged - User Profile

Stream Pages

Similar to a wiki, or web pages in a more traditional Intranet, users can design and publish web pages to Stream. Users can control the hierarchy and security of pages through a simple and intuitive user interface.  

Stream Unplugged - Pages

Stream Users

Manage small or large groups of users within Stream. Administrators can apply granular security to users and manage what and where content within Stream can be published. Stream also supports integration with Active Directory for on premise deployment. 

Stream Unplugged - User Management

Follow what works

There’s nothing completely original about our product, and that was intentional. You can’t ignore what works best within other products that are proven. Leveraging these attributes will improve your own product if implemented for the right reasons. The idea of posting content in the form of text, photo’s or video and then adding comments before sharing it defines a commonality between platforms we’re all familiar with using such as Facebook, Twitter, Instagram, LinkedIn and more.

As our own product was focused on content collaboration, we designed an environment enabling users to share and discuss content related to handling a task, managing a client project and even helping to run the entire business. These activities are supported by the social interactions between small or large groups of people. Social within the enterprise, whether a small business with five staff or a team within a multi-national, is more than just sharing commentary and following people. We view social collaboration as an exciting and evolving space. When you look how things get done in most businesses, we’re still relying on workflow processes that are twenty years old. Creating a document, emailing it to someone, publishing the document to a location on a web server. This is how the world still performs general content creation and management. We’re looking at ways to reinvent how work gets done.

While this common workflow may not be entirely broken, the speed and effectiveness by which content is created and shared is still inefficient. By implementing how we use social media tools into common business work flows, we wanted to create a tool that makes running a project or a business more intuitive for users.

For our own product we implemented traits found in popular social media platforms and applied this to general content management practices. We wanted to ensure that when a user first started using Stream that there would be familiarity in what they would find if they were on Facebook, Twitter or LinkedIn.

Approaching the product as a design problem

Many companies that develop software approach the engineering process by separating design from the functionality. However crafting the design experience first will fundamentally improve and influence the proposed functionality for the better. During the earliest concepts of Stream we understood what the end goal was for the product. So we set about designing an interface that would not only feel common for users familiar with social media, but one that also aimed to solve a number of content management and collaboration problems from a single interface. This was primarily a design challenge first, and a technical challenge second. Our designer worked closely with our developers to explore a range of possible solutions. A common approach is to keep the designer and developer separate, but you miss the opportunity for exploring concepts that wouldn't have been considered if they work in isolation. No matter what your digital product is aimed at improving or helping to solve, you’re ultimately trying to solve a communication problem.

The "Stream" is the hero

The listing (or "stream") of posts is the hero of the application. It is the component that is most likely to grow in complexity over time and require an expansion of the existing functionality and layout. It is the component that users will see and interact with the most. Therefore, we needed to build it in a way that was future-friendly as well as feature-rich.

Technology Stack

We built the post components in Stream with the least amount of markup possible. Every single HTML element in a stream post was carefully chosen to maximize what we could deliver visually, but minimize the memory footprint on the browser. We used Grunt (http://gruntjs.com/) to automate as much as we can in our front-end workflow. This includes:

  • Combining and minifying CSS + JavaScript
  • Creating HTML templates from reusable partial components
  • Creating a production build of HTML/CSS/JS
September 19, 2014 |  Posted in: Design, MVP, UX/UI, Web Development
Free 14-day trial. No credit card required.
Stream connects everyone across your organization.