SaaS Platform For Web Apps - Station | Project Details
Tags: saas, productivity, startup, webdev
Published: 2020-04-01 14:49:49

<p align="justify">Have you ever calculated how much time you spend everyday checking your social and working accounts? I bet a lot. To be more accurate, it’s over 2 hours a day!</p>

<p align="justify">As a solution to stop wasting your time and boost your productivity - <u><a href="https://2muchcoffee.com/blog/global-software-as-a-service-saas-market-analysis/">the SaaS software emerged to our workplaces</a></u>. New trends in SaaS development allow you to use functional and high performing apps which saves tons of your time.</p>

<p align="justify">One such example is <u><a href="https://getstation.com/" rel="nofollow">Station</a></u>. This web browser of the future was specifically designed for efficient work. One single and elegant app to rule your other web applications. Based in Paris, Station was elected <u><a href="https://www.producthunt.com/posts/station-3" rel="nofollow">Product of the Year 2017</a></u> on Product Hunt. Additionally, the team graduated from the <u><a href="https://blog.ycombinator.com/14-companies-from-yc-winter-2018/" rel="nofollow">YCombinator W18</a></u> batch. The startup was noted for its innovative idea and product - a workstation unifying within a single interface all of the applications you use at work.</p>

<p align="justify">In order to have a clear vision of why Station is so great to let’s elaborate on the biggest pitfalls of the productive work life that we all experience on a daily basis.</p>

## What are the Biggest Threats to Your Productivity at the Workplace?
<p align="justify">Nowadays, time management is a crucial element of success no matter the niche you’re working at. Time is a huge value and the most important resource that should not be underestimated. Especially, time at the workplace. Each day from 9 to 6 you have got a myriad of different tasks, so to follow the schedule it is important to be productive and use the time wisely.</p>
 
<p align="justify">Let's get into some statistics here. The average person spends 90,000 hours at work over a lifetime. While occasional breaks are great for the mind, excessive time waste leads to lost productivity, lower morale and decreased employee retention. Even employees who would otherwise be high performers can get caught in time-wasting traps. In fact, <u><a href="http://www.salary.com/2014-wasting-time-at-work/slide/2" rel="nofollow">eighty-nine percent of employees</a></u> waste at least some time at work every day. <u><a href="https://www.entrepreneur.com/article/316450" rel="nofollow">Thirty-one percent waste about 30 minutes</a></u>, but the top 10 percent waste three or more hours each day. That extrapolates to more than 15 hours per week of wasted productivity, shedding light on the immense costs associated with poor time management.</p>

![How-are-people-wasting-time-at-work-](https://2muchcoffee.com/blog/content/images/2020/03/How-are-people-wasting-time-at-work-.png)

<p align="justify"><b>So, what gets in the way of getting things done?</b> The recent survey examined how employees wasted their time at work. Workers were asked how much time per day they spend on tasks such as communication, meetings, researching for information. As a result, activities related to contacting customers, partners or colleagues were the most time-consuming.</p>

![Activities-that-impact-productivity-at-work](https://2muchcoffee.com/blog/content/images/2020/03/Activities-that-impact-productivity-at-work.png)

<p align="justify">On the other hand, a huge time-consuming practice is working with a lot of different applications. Did you ever ask yourself how much time you spend checking out all your web apps every day? Surely, it takes ages to check the required accounts during the working hours. In fact, an average <b>office employee spends around 1,5 hours simply by checking his working accounts and adjusting his web tabs for work</b>.</p>

<p align="justify">Ask most people where they spend the majority of the day and you’ll hear <b>email, Slack, or some other communication tool</b>. When we looked at communication time across job titles we found that software developers spend, on average, 21% of their day on communication. While executives and product managers spend upwards of 37%.</p>

![Device-time-spent-in-category-by-job-role](https://2muchcoffee.com/blog/content/images/2020/03/Device-time-spent-in-category-by-job-role.png)

<p align="justify">Surely, it’s not just the pure amount of time spent on a daily basis that killed our ability to focus. It’s the frequency we use these tools. For example, <u><a href="https://blog.rescuetime.com/communication-multitasking-switches/" rel="nofollow">based on recent research</a></u>, there were found that knowledge workers, on average, check email and Slack every 6 minutes (with 35.5% checking in every 3 minutes or less).</p>

<p align="justify">Most of us spend our days bouncing from task to task or trying to make up for a lost time by <b>multitasking</b>. On average, we use 56 different apps and websites a day and switch between them nearly 300 times.</p>

<p align="justify">It’s well established that multitasking is impossible for all but 1-2% of the population. And to do our best work, we need long stretches of focused time. Yet, <u><a href="https://blog.rescuetime.com/work-life-balance-study-2019/" rel="nofollow">40% of knowledge workers never get more than 30 straight minutes of focused time in a workday</a></u>.</p> 

<p align="justify">Looking at multitasking with communication tools alone, most people on average spend 40.1% of their time during the workday multitasking. If we’re constantly switching our focus to check emails or Slack messages, we never have the chance to truly focus on our most important work.</p>

![Time-without-using-social-media](https://2muchcoffee.com/blog/content/images/2020/03/Time-without-using-social-media.png)

<p align="justify">The workplace is filled with distractions. But some of the worst ones aren’t coworkers, meetings, or emails. But our own pull to distracting and unproductive activities. However, 21% of our device time during working hours is spent on entertainment, news, and social media.</p>

![Most-blocked-websites-by-employees-in-2019](https://2muchcoffee.com/blog/content/images/2020/03/Most-blocked-websites-by-employees-in-2019.png)

<p align="justify">As you can see, quite often the allure of time-wasting activities (e.g. communication overload, checking work applications, finding the right tab or researching for suitable extensions) is just the main pitfall to completing tasks on time and the main threats to the work-life balance. When it happens, it’s up to modern technologies to keep everyone back on track.</p>


>

> <p align="justify"><b>“A bus station is where a bus stops. A train station is where a train stops. On my desk, I have a work station….”</b> ― William Faulkner</p>

>

## Introducing Station - SaaS Platform for All Your Web Apps

<p align="justify">The quote of William Faulkner, an American writer, and Nobel Prize laureate, perfectly describes the state of our work lives. The work station is the place where we spend the predominant amount of hours on a daily basis. As a result, our work station should work for us and not against us.</p>
 
<p align="justify">Over the years, our browsers have evolved to become the central way of our lives. Working, shopping, reading, watching, writing, listening, sharing and much more. However, as the times go by, web browsers started to show some weaknesses since billions of people were shifting to the browser as their main work tool.</p>

<p align="justify">From the very inception, the Station team was focused on easing the user’s experience during the workday. <u><a href="https://apps.getstation.com/#most-popular" rel="nofollow">Station</a></u> is a free desktop application that unifies all your work tools in one neat and productive interface. It is an alternative to your browser that's entirely dedicated to web applications you use at work, and that's designed to help you focus and get work done. SaaS focused platform for working with web apps is incredibly simple in use. The Station, available for both Mac and Windows, aims to ease the whole process of using apps while working. App provides the opportunity to have one app to centralize all of your work. Therefore, Station supports 600+ apps including G Suite, Slack, Asana, Trello, etc.</p>

<p align="justify">You’ll find below a showcase of Station:</p>


<iframe width="560" height="315" src="https://www.youtube.com/embed/QMXx5bDbxK8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<p align="justify">The recipe for the Station's success is within its features.</p>
<ul>
    <li><p align="justify"><b>Smart dock</b> which helps you neatly organize all your work tools. Are you tired of switching tabs? The smart dock instantly cleans your desktop.</p></li>
    <li><p align="justify"><b>Focus by design</b> eliminates any temptation to get distracted. Designed as a distraction-free platform, Station separates work from personal applications.</p></li> 
    <li><p align="justify"><b>App Store</b> allows you to have easy access to 400+ web apps which are sorted by categories and popularity.</p></li>
    <li><p align="justify"><b>The notification center</b> gives the opportunity to disable notifications to avoid unwanted distractions without missing out on anything.</p></li>
    </uL>

<p align="justify"><b>Business model</b>. As was mentioned above, Station is free of charge app. Since the team is committed to helping the users be more productive at work, for that reason the Station team does not plan on charging individual users. On the other hand, the team is planning charge companies starting in 2020.</p>

<p align="justify"><b>Why is Station better than a traditional web browser for work?</b> Station was designed from scratch with focus and efficiency in mind. The app benefits users in many ways, specifically:</p>
<ul>
    <li><p align="justify"><b>Get rid of your tabs</b>. All your work tools are neatly organized to avoid ending up with 20+ tabs stacking up on top of each other. Station was designed to keep even the messiest users organized throughout their workday.</p></li>
<li><p align="justify"><b>Work faster</b>. Since Station doesn't accumulate unnecessary tabs it also means that it runs faster than a classic browser. Only the apps you really need are loaded when you launch Station and it makes sure to save your memory to avoid slow down or crashes.</p></li>
<li><p align="justify"><b>Stay focused</b>. Station only offers work applications, therefore, it's impossible to be distracted by non-work related topics inside the app. It's your ultimate medium of focus.</p></li>
<li><p align="justify"><b>Quickly find the content you need</b>. Thanks to features like quick-switch or bookmarking, you can easily organize your most important pages and find them in the blink of an eye.</p></li>
    </ul>

<p align="justify">We asked  the CEO of Station, Julien Berthomier, what was the inspiration to create such app and what are the scaling plan for the nearest future for the team and the product:</p>

> <p align="justify">“We wanted to solve our own frustrations around finding information and accessing our work tools. Then we quickly realized after putting it into the hands of a few hundred users that we were not alone facing this problem. We were also inspired by tools like Franz that were among the first to build app aggregators.</p>
> 
> <p align="justify">(Regarding the scaling plan) Focus on providing value to entire teams by building a single source of truth about tools and SaaS apps in companies. On top, launching an SDK to allow any third party developer or SaaS editor to build deeper integrations between SaaS apps and the Station interface.”</p>

![Station](https://2muchcoffee.com/blog/content/images/2020/03/Station.png)

## How to Build an App like a Station?
<p align="justify">While Station combines all your messy web apps into a single app, the 2muchcoffee combined the best practices to contribute to the development of Station. It’s fair to say that Station is a product of collaborative work between two teams - Station and 2muchcoffee.</p> 

<p align="justify">The scope of our work included:</p>
<ul>
    <li><p align="justify">Code review</p></li>
<li><p align="justify">Caching GraphQL queries</p></li>
<li><p align="justify">Changing the database structure</p></li>
<li><p align="justify">Data migration to Airtable</p></li>
<li><p align="justify">Refactoring the existing front-end architecture</p></li>
<li><p align="justify">Implementation of a full redesign</p></li>
<li><p align="justify">Creating new layouts for the app</p></li>
<li><p align="justify">Extending the app functionality</p></li>
<li><p align="justify">Adding new functionality</p></li>
<li><p align="justify">Technical optimization</p></li>
    </ul>

<p align="justify"><b>Development Process Details</b>. As Station is the browser for work it was crucial to reach a native desktop experience- something that could be achieved due to high-quality codebase. Our team significantly improved the code. First of all, we made a code review to detect possible issues in the codebase which potentially could negatively affect the work of the app.</p> 

<p align="justify">The back end tasks include caching GraphQL queries and changing the database structure (from services to applications). Additionally, the data was migrated to Airtable to make the process of an organization much easier.</p>

<p align="justify">Moreover, devs entirely refactored the existing front-end architecture. There was decided to switch to GraphQL cache instead of Redux as a main application’s Store. Such a decision provides huge benefits for the user-experience. There was implemented a full redesign by means of creating completely new layouts for the app. Additionally, our dev team extended the app functionality and added new ones, e.g. edit/delete of custom apps, infinite scroll, correct applications’ search functionality. Finally, Google Lighthouse metrics were improved to achieve better technical optimization.</p> 

<p align="justify"><b>The tech stack we used</b>: Typescript, React (including Hooks), GraphQL, Node.js, PostgreSQL, React Router, React Virtualized, React Apollo, React Jss.</p>

<p align="justify"><b>What was the technical challenge?</b></p>
<p align="justify">The initial task was to implement the onboarding process when the employer (on the vendor's servers) creates and manages ready-made sets of offers for his employees. The next step is to implement the onboarding process on the part of the employee when a new employee in a few clicks receives an already configured set of applications for work.</p>
<p align="justify">The other task was to create a dynamic stepper (<u><a href="https://material-ui.com/components/steppers/" rel="nofollow">Stepper React component - Material-UI</a></u>) that could be used in both linear and non-linear forms. In open form, each tab would represent a form for filling with different data, which would be regulated by the main Smart component.</p>
<p align="justify">The final task was to implement of a table with the data of all onboardings in the system.</p>

<p align="justify"><b>What was achieved?</b></p>
<ul>
    <li><p align="justify">The routing system has been redesigned and optimized using React Router v5, including hash routing if necessary;</p></li>
<li><p align="justify">Most of the components (previously implemented) were translated into React Hooks;</p></li>
<li><p align="justify">With the help of React Hooks, a fully typed Stepper was created with render optimization (React.UseCallback and React.useMemo Hooks);</p></li>
<li><p align="justify">The Stepper also supports a smooth system of steps (new steps may not appear at all until you complete the previous one). Linear and non-linear operating modes are involved here;</p></li>
<li><p align="justify">Routing was switched from working with the internal state to the React Router (it was one of the difficult issues in terms of architecture/performance).</p></li>
    </ul>

<p align="justify"><b>What can be highlighted?</b></p>
<ul>
<li><p align="justify">The whole mechanism of interactions between Steps (wrappers for the content of the stepper) and Stepper was invented (it was optimized in structure and was added the support for several modes). Additionally, it was made as a dumb component (customer requirement), so it can be reused quite conveniently.</p></li>
<li><p align="justify">All the functionality (logic) was implemented to create and edit Onboarding on the client (front-end), which managed data for Stepper.</p></li>
    </ul>

<p align="justify">As a web development company, we understand the importance of producing high-quality and scalable products. That is why we used the modern architectural decisions and React best practices to build a top-notch and innovative product on the SaaS market.</p>

It’s no doubt that we are at the beginning of the new era where the workplace will be significantly transformed due to SaaS applications which serve as the backbone of productivity.</p> 

Like this article? Visit <u><a href="https://2muchcoffee.com/blog/">our blog</a></u> for more articles!