top of page
Behance_Apróság_admin_1.jpg

Apróság Könyvek - Admin site

In 2020, my family and I published our first children's book. Soon after, we were able to publish a second book, along with several other products, including coloring books and workbooks.

 

During that time, we primarily used Facebook for our business. However, we soon realized the need for our website to be more professional and productive.

This case study is about the ADMIN SITE of the webshop.

AK.jpg

Until that point we handled every order in an Excel sheet, filling it up with every piece of info manually. Then we had to make and send the invoices separately. This method gave us a lot of chances to make mistakes and took us more time than we wanted it to. To work effectively and take care of the client's order as fast as we can we needed a user-friendly admin site.

I wrote a list of the things the admin site must have:

 

  • should be able to handle orders

  • its status should not only be visible to us, but it should notify the user about any change

  • it has to be organized and easy to use

  • should be able to add, delete, or edit any products on the page

  • should be able to change the slider’s images

  • should be able to edit shipping options

  • we need to be able to create alert/important information messages on the website

01

01 - THE BEGINNING

THE TEAM

  • 1 UX Designer

  • 1 Developer

Behance_Apróság_admin_2_edited.jpg

I started to search for existing admin sites, to see their design solutions, but I didn't find any, that would serve our needs well enough. However, I do find a design pattern there, that I could follow: the layout of a common dashboard looked like a great fit for us!

 

The Top Navigation Bar was already filled and that was our way to reach the normal/client side of the website so I put all of our admin navigation buttons to the left side.

The Developer set up a unique login profile for us, so after we logged in, an ADMIN button appeared on the Top Navigation Bar. By clicking on it, it led us to the Admin site.

So no, you couldn't sneak in from your profile, just like that, and make free orders km...

02

02 - RESEARCH

Behance_Apróság_admin_2_edited.jpg

I only made some basic wireframes for the opening page and then I went straight to high-fidelity design.

I usually work in Adobe XD to create a Hi-Fi prototype so that is what I chose for this task. I designed the UI to fit into the webshop.

03

03 - RESULT

Admin – Order 1.png

I felt how different this project was from the ones I worked on before. I had to think in strict systems, to find a logical place to every function and button. This admin site felt like working on a Saas (software), so the functionality and the usability were by far the most important things than the visual appearance.

04

04 - TAKE AWAY

bottom of page