Grabyo Studio is live streaming, sharing and editing platform, built for social. The main goal of the product is to share out exciting moments from live events and TV broadcasts straight to social networks with ease.
When I first started working on Grabyo Studio it was rough, without any defined style guides, no consistency or anything like that - just as any startup and that's completely normal. I actually liked that, as I was able to start everything from ground zero. I opened up the white bord and carefully started laying out the basics of Grabyo Studio. The research was long - everyone wanted to have a modern and user-frienly platform. We decided to get the best from both worlds - cards from material design and a lot more from iOS.
The main goal was to figure out where to start from, as the platform was quite smart, but we also wanted to make it easy to use and make sure our decisions would be as time proof as possible. Looking one and a half years back I'm lucky to say that most of them were spot on. We started by defining our home page as that's the starting point for each user. The home page took a lof thinking and endless iterations, but quicky became welcomed by our users. Once it was released it was followed by the campaign page where you organise all your videos and analytics page where you would analyse the gathered data by different social media.
Our home page defined the main actions a user can do, but what the campaign page defined was the sidebar, which is the core of element of each action. It was important to keep all the functionalities we had, but present them in a digestible way. Every action had it's contextual menu or sidebar, so that the user is presented with the information he needs at the exact moment. For instance you would be presented with an upload sidebar on landing, but once you select a video another sidebar would appear on top with the information about the video.
Same for the analytics page - we had to show a lot of different information for each of the social medias we support so I had to come up with a layout that could show as much as possible. We wanted it to be simple but at the same time really usefull. Information is basically devided mainly in two; Cards for information and sidebar which includes the video section. All the cards can be also filtered by time period, gallery or user. That made working with the studio much easier and simple to use.
Creating the visual language for Grabyo Dashboard was more than rewarding. Every single button and icon was carefully thought trough. I tried to make things easier for our coder, so I created a icon-font for Grabyo that we use across the whole Studio as well as in the VIP app. Animations and transitions were carefully selected so they're not just nice, but provide a meaningful transition that help the user flow.
If you liked that, you'd' most probably enjoy these below... take a look.