Dashboard and workspaces

POP 2016

Throughout my time at POP I designed various iterations on the dashboard interface. The goal was to help our dashboard accommodate more content (or bots) and to simplify our navigation.

A bigger redesign included ‘workspaces’, a way for teams and companies to set up and invite their colleagues easier. Though not everything shipped, it proved useful as a vision for the dashboard.

Timeframe

September 2016 — 2018

Role

Lead designer

Company

POP

Platforms

Web

This was the dashboard when I joined POP.

As a social media manager for an artist, you could promote the channel to fans and fans can subscribe to alerts from the artists. The alerts is what the social media manager for the artist would write in the dashboard.

This very first version was all about making it work.

The 'My Bot' page where a user can connect their Facebook page and set up basic messages.

Whilst making more tiny features in the original dashboard, we quickly iterated to allow for multiple bots.

This mean that now a social media manager could connect multiple Facebook pages (multiple artists) in their account.

As part of this redesign we also decided to stay close to the original Facebook Messenger design (at the time), so the app would look familair to people already using Facebook Messenger.

The first redesign including multiple bot support.

This iteration for the dashboard lasted around a year. In the meantime we added lots of different features such as targeting, scheduling, statistics, automated replies and more.

The 'Message' page, from where a user could send a broadcast to their audience.

The fullscreen pop-up that would show when scheduling your broadcast.

Statistics were a part in helping our customers understand the extreme open rates they were experiencing on their messages.

As the featureset grew, POP also had clients who regularly purchased more than 5+ bots. This meant that with no additonal labels in the navigation on the left hand side, switching bot wasn’t that great of an experience. Plus we noticed through giving demo’s to clients (myself included) that sometimes clients didn’t realise what bot they had open at the moment. Time to improve!

The horizontal navigation version has a lot of potential. The quick actions behind the dropdowns are great, but considering that our featureset was only growing, I was worried about the lack of space.

On mobile the quick actions behind the dropdown would hide a lot of functionality. I was not convinced we could easily adopt this version.

The sidebar variation is less sophisticated and has much more spaces to grow. It limits however horizontal space on the page.

A further version of the sidebar including a full layout.

Which then evolved to our current dashboard layout. The amount of pages in the sidebar have grown as expected.

With this new design, I pushed for making our dashboard responsive where possible. Some parts of the dashboard that were too big to rewrite wouldn’t be part of that scope.

In the long term I think this was a good decision. Our dashboard went responsive early on when POP didn’t have such a large featureset to make the project increadibly large and both front-end and design had to think about mobile when developing features. On mobile there are no opportunities to ‘hide’ things behind hover-states or do increadibly fancy layouts.

Especially in the later development of POP, this proved useful as we didn’t have the need to really redesign or refactor our dashboard in huge ways.

The dashboard as seen in an iPhone, Desktop and Tablet layout.

As POP onboarded more and more clients, the need came up for clients to have a better overview of their bots. This was especially the case for agencies, that wanted to manage multiple bots for different clients under 1 ‘company’. This meant we had to introduce permissions so that one client can’t see the other client’s bot while working in 1 agency company.

I drafted up how the permissions could work so it covered this most important use case along with designs for the workspace dashboard, that would sit on top of the bot dashboard.

A large map of the product including workspaces.

A document of the permissions for each role within a workspace.

This work then resulted in the following designs: a dashboard that would sit on top of the ‘bot dashboard’ with a similar layout (to simplify development) but with different styling to distinguish between the two.

The 'People' page where a user can invite their colleagues or team members, manage their roles and more.

A prototype of switching between a Messenger and Whatsapp channel within a bot. This prototype was used to discuss the potential of adding other apps than just Messenger to the product.

A prototype of the workspace switcher as seen in the workspace dashboard.

The projects screen lists all 'bots' within the dashboard. Naming it projects was an attempt to remove the 'bot' word from our product completely.

At the time we had the idea of having multiple products (with plans) per project. This would give each project a lot of billing details and to provide a proper overview to the user, this page was designed.

Looking back I am proud of this work because every time we made valuable iterations that removed previous problems and made POP more future proof, in both a technical, design and business perspective.

Though at this moment in time the workspace part of this project hasn’t made it to our roadmap, I believe the designs are still applicable today and I am confident we could revisit it and reuse most of the work done.

3

Iterations

180+

Different companies using our dashboard

Variations designed

Projects

Prototyping for car user experience design

Graduation project Hike One 2016

Dashboard and workspaces

POP 2016

Inbox

Case coming soon POP 2016

Design system

POP 2016

Chat editor

Case coming soon POP 2016

VISA app

Case coming soon Personal project 2020

Product catalogue

Case coming soon Dutch Light Trading 2015

Contributions

Feedback and design suggestions for Coronamelder

Dutch corona app 2020

Experience

Thank you for visiting this piece of internet. Reach me at hey@lucvanloon.com or find me on Dribbble, , LinkedIn.

Press M to unmute audio