📊Dashboard v2
New desktop and mobile dashboard, completely built from scratch
Overview and reasons
The new dashboard was one of the biggest projects I've undertaken for Kenmei, and most certainly the biggest when it comes to the UI itself. Thousands of lines of codes were written (and deleted) to make it happen, but it was all for a good reason
First of all, I'd like to explain a bit more as to why this work was done to begin with. The main reasons can be broken down into these points:
Improve performance
Improve control over the UI
Add space for upcoming features
Create an app-like mobile UI
Unify the design, to allow for the development of Dark Mode
Basically, the old dashboard was using mostly pre-built components, leaving me with little ability to make changes to its layout. It was also not intended to be used on mobile devices and was notoriously bad performance-wise.
By creating it from scratch, I would be able to do anything I want with the dashboard, have full control over performance optimisations and of course, built the best possible mobile version of it. I also have a lot of features I want to implement, that requires adding new elements to the dashboard itself, including cool animations. This was impossible to achieve with the old dashboard.
Now with that out of the way, let's dive into the specifics of the new UI
Desktop
Starting off with the dashboard, it should be all very familiar. The different series are not displayed as a list, rather than a table. Removal of the header was needed, as every column would hold a different mix of data, which would make headers inaccurate.
There is an addition of the last read field now, which will show when you last marked the chapter as read. In the near future, you'll be able to sort or even filter by the last read.
The actions have moved into a small button group, which if you have used Discord, would be very familiar. The order of buttons is the same as the bulk to make it easier to remember (but old users would have to re-learn the mapping). Currently, the report button is missing on the individual items, but it will be added soon. You should also expect both Report and Delete buttons to be hidden in the Show More button, which will expand. Again, similarly to Discord functionality.
Speaking of bulk buttons, they have moved into the top right, to swap with add/import buttons, making all actions stay together.
The final improvement is, of course, the addition of the individual counts. You will now know how many entries you have for specific statuses or filters.
There are of course some other minor improvements, like new loading (called skeleton loading, that is proven to make the page feel like it loads faster), different animations for when updating or deleting an entry, colour-coded chapters, and so on.
Mobile
Mobile got an even bigger overhaul, bringing it closer to what a real app experience should feel like. There is plenty to improve here, as it's an entirely different beast, but it's already miles better than what we had previously.
First of all, you will see a similar UI, just scaled for mobile, and much more compact. You are now able to see all the details on the screen, without the need to scroll side-ways
The action buttons are now nicely located in a dropdown, for quick and easy access
The star of the show is, of course, the new button in the bottom right, which acts as Add Manga/Import or Bulk actions button. When entries are selected, it changes to the bulk edit mode
Speaking of selection, this now uses a familiar touch-and-hold, you see in regular apps. It has room to grow, as it's not perfect at the moment but already works much nicer than it did previously.
Future
This marks a big step in the future of the Dashboard. It unlocks the ability to add a lot more new features. I have full control over the UI, so I can keep on tweaking it and improve the performance further. And, of course, this was one of the bigger remaining pieces to let me start working on the Dark mode.
I am excited to keep improving the new UI and I hope you are excited to see what it has in store! Thanks for looking into everything that went into this
Last updated
