Hello Friends
Here at Yclas we always try to give our users the best experience possible. A few months ago, we were working in the admin panel and noticed we could improve it big time. During this time, we reorganized our admin panel and build it again from scratch.
The panel history
Open Classifieds software was launched back in 2009 and the former admin panel had been working nicely ever since. Since then over 400.000 people have used Yclas software as well as the admin panel. However, while we improved the software the admin panel stayed more or less the same. We felt like the user interface was a bit old-fashioned and not user-friendly. Yclas was launched in January 2015 and we used the same panel that Open Classifieds had.
The improvements:
First point: rearranging menu items
The first point on the agenda was rearranging the panel items. Over the years some items were placed under the wrong menu items and the placement was far from logical. We started analyzing what content we used on which pages and why we did so. To make it all a bit more tangible we used post-its to visualize the admin panel.
Menu item rearrangement becomes a lot easier when you visualize what you are working with.
Some menu items were completely obsolete and could be removed; others were not in the correct spot and were moved. By rearranging the post-its became very clear which pages were functioning best under certain menu items.
The final admin panel menu arrangement looked more or less like we visualized here. This wasn’t the final arrangement since we moved some items during development also, but it was more or less the starting point.
Designing the new admin panel
When the menu item rearrangement was clear to us we started thinking about how we wanted our admin panel to look. We started to analyze what our competitors used and how we felt about their design choices. Now we wouldn’t say WordPress is a competitor but the UI of their admin panel is outstanding. You’ll notice some components of the interface of our admin panel have their origin in the WordPress backend panel.
The aim was to design an admin panel that was both easy to use and beautiful to look at. The design trend ‘Flat design’ was our original inspiration since it doesn’t rely on textures or repeating patterns to define sections of the page. With simple colors and fewer nonessential graphics, we aimed to place focus on where it belongs: the content.
Create a better functioning UI
One of the main things we tried to improve was the long pages with information on for instance the settings pages. We choose tabbed navigation to decrease the clutter and organize a considerable amount of information.
Panels on the left vs tabs on the right. The user does not have to scroll down anymore and can decide for themselves on which tab the information is relevant.
With the panels on the left, the forms got bloated quickly and it became unclear where to look for. While on the right, the information on each tab is less and users can easily navigate the page.
Next to the integration of tabs, we improved various small but important UI components. The aim was to create an easy-to-use admin panel that would make the life of our users a lot easier, whilst staying true to our current admin panel to not confuse our users with a completely new interface.
Hello Search & Short Cuts
Besides all those improvements, we need to mention two new features in the admin panel, the search bar, and shortcuts.
We always want Yclas to be suitable for all users and here in our development department, we love search bars. Just put what you are looking for by text and... Voilà, accurate results will appear.
But this is not the only way to save time searching and looking for something, we also created shortcuts. Click here, to check how it works.
As we release the new admin panel we are very curious as to what our users think of it. Are there any things you’d like to see differently? Any bugs? Features you are still missing? If you have any feedback, we’d love to hear it!
P.S.
we also have a few other new stuff you can read here.
