Mobile Developer

Creating a Mobile Dashboard from Scratch for Storyly

Barış Ermut
May 17, 2022

Storyly is a lightweight SDK providing Instagram-like stories to your app, mobile web, and website. We have a cool, easy-to-use, and good-looking dashboard for managing and creating stories.

However, when it comes to content creation and distribution on your app/website, you might need a way faster solution available on mobile. This is how we came up with the idea of having a mobile dashboard for Storyly: imagining that our customers might want to fix some potential errors on their content while at home in the evening.  Using your phone for a temporary solution sounds easier, right?

The Idea 💡

Alright, let’s hit the floor now. I basically explained the logic behind this mobile dashboard idea but want to deep dive into it a little bit more.

My initial motivation behind this process was quite simplistic: “Why not?”  However, it occurred that there was an actual need to solve potential problems on content and create stories fast, safe and sound.

This actually became a real idea when we figured out why we need this. Our users had some urgent situations like fixing a problematic story or checking some important metrics or even sometimes creating a story quickly when they took a photo etc.

The Creation 🖍

We are moving on! We figured out the idea, the problem, and the basics. Next stop: deciding which dashboard features we are going to implement on its mobile version and how the mobile app of the dashboard will look.

As we focused on urgency use, meaning the need to log in to the dashboard rapidly, we agreed to include some basic and essential features in the mobile dashboard. These were to create a simple story, change the status and order of groups and stories, and finally, basic analytics. (We have way more complex features in our dashboard. 😉)

After deciding the features, we also made a really simple priority list in case that we need to phase this app. However, the features we wanted to imply were so basic and necessary, and we said: Let’s just roll!

Meh, if you say “Let’s just roll,” it might cause some other mistakes (sort of). We had partially completed the analysis document and were willing to make some wireframes out of it. However, instead of going safe and sound, we created a perfect (almost) design for our mobile app. The design was so close to being done, but we had to revisit it multiple times without the wireframe until we created a ready-to-test prototype.

The Testing 🤓

We had the idea, and we created something. The next step was testing, by which I don’t mean an internal one. We had to test our prototype with our current customers and see their reactions. So, we started planning short usability sessions with our users.

We conducted ten online usability tests with our own dashboard users and multiple internal usability tests at that time. Literally, all of our users loved the idea of having a mobile dashboard, and yet they all had some useful feedback and new ideas.

After all the sessions ended, it was time to revisit everything we’ve done so far. Guess what? We actually made a bunch of small changes, and the usability sessions were extremely helpful! There were teeny-tiny points that we missed or didn’t think were important. Sometimes, you might think that everything is on the spot, you did a great job, and you are all ready to go. But nope, the reality is not like that. There are always minor or significant things that you missed or even never thought of.

Mistakes & Learnings 🤔

Actually, I don’t want to make this post longer and longer. I’ve already mentioned a couple of mistakes above but will try to explain in a nutshell in this very last section.

  • I learned that, in a well-developed product team, everybody needs to communicate as always. Without communication, you’ll probably rush the task and cause some minor problems.
  • I also learned that everything we thought to be a need or problem may not be a real problem or need. You always need to ask your users what they actually need.
  • We learned that while everything is on start, creating a full design is not the optimal way no matter that design is so close to being perfect.
  • We also realized how great usability tests could be, especially when you have a decent prototype to test. Those tests are so great to learn and imply afterwards.

As all the good things have an end, this post is almost over too. You might think, okay, where is the product, show me! It’s in development at the very moment. We are planning to release Storyly’s mobile dashboard app within the first quarter of 2022. Here is a sneak peek for a couple of you reading this. 😏

Hope you’ve enjoyed our journey to create a mobile dashboard app.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor pretium massa sagittis cursus. Etiam egestas turpis vitae sem mattis semper placerat in nibh. Nullam tempus ligula sit amet turpis laoreet, et interdum purus hendrerit. Donec tortor massa, ultricies vitae laoreet a, facilisis quis orci.

Pellentesque rutrum erat eget neque accumsan porttitor. Aenean id consequat orci. Aliquam euismod finibus lacus, eu ultrices mauris interdum eu. Nulla tempor ac risus vel congue. Integer imperdiet purus ut turpis ultricies consequat.
  • Sed sagittis, ipsum pellentesque luctus porttitor
  • metus nisl vehicula ex, ut bibendum dui lectus ac odio
  • In faucibus laoreet malesuada. Fusce finibus eros vel nisl sodales congue.
  • Duis in massa mi. Donec venenatis, lectus interdum scelerisque pellentesque, orci lorem maximus ante, fermentum scelerisque dolor est eget nisl.
  • Cras aliquam pulvinar hendrerit. Morbi blandit auctor risus vitae consectetur. Sed auctor mauris eu velit imperdiet tincidunt.
  1. Sed sagittis, ipsum pellentesque luctus porttitor
  2. Ut quis dapibus elit. Nunc non sagittis quam.
  3. Nullam est est, posuere eget orci et, laoreet pharetra tortor.
  4. Nulla felis nisl, viverra sit amet mi id, volutpat ornare est. Ut ullamcorper sed dui sit amet pellentesque. Donec vel lectus id ipsum varius pellentesque et nec elit.
Read more like this
May 17, 2022

How to Use Instagram to Promote Your Brand

Instagram has become the new home for brands as the engagement is high, followers are brand-loyal, and real business goals can be achieved.
Mobile Marketing
May 17, 2022

How to Secure Daily Interactions With Your App

When launching an app, you may succeed at getting a high number of initial downloads and installs, but see a significant drop in engagement afterward.
User Experience

Subscribe our blog

Get the latest post in your email.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.