mitt.spaugur

Project overview

Spaugur offers hosting for websites, virtual machines and DNS services. Previously all of this was managed by us, and customers had limited ability to manage the services themselves. That approach worked well in the beginning, but as the service grew it became increasingly clear that too much time was going into manual work for tasks customers really ought to be able to handle themselves. It also wasn't fair to our customers that they couldn't simply log in, get an overview of their services and manage them on their own. So work began on a new dashboard to solve this problem. The goal was to design a simple, accessible system with the user experience front and center. Simplicity was one of the key concepts in the dashboard's design. It had to be clear, simple and easy to use. Our customers shouldn't have to spend time learning a complicated system. They should be able to log in, order a service and start managing it right away in a simple and efficient way.

My role

The dashboard is built in Next.js and TypeScript. For this project I chose to use the Pages Router, since that setup suited the team better than the App Router. I handled the design and frontend development entirely, and then handed the project over to Kría Elínarbur, who took over backend development and the API integrations with the systems we use to run the service.

A bigger project

Spaugur's dashboard is one of the larger projects I have taken on. Running a hosting service is complex, and many different systems and processes have to work together. When I started the project, I quickly realized the scope was far bigger than just showing customers which services they had. As the design evolved, more and more needs came to light. Customers not only need an overview of their services but also to be able to manage more complex aspects themselves. For virtual servers, for example, it has to be possible to manage operating systems, network settings, IP addresses and Reverse DNS. Alongside that, users need a clear overview of invoices, payment status and when the next payments are due. Another important aspect was communication when outages or disruptions occur. Customers need clear, visible notifications about system status, so they immediately know whether a service disruption is known and being worked on. The goal was therefore to find a simple way to convey important operational information without making the dashboard overwhelming or complicated to use.

What I learned

This project has been one of the most enjoyable I have worked on. It was especially fun to keep evolving the design as new needs surfaced and to work through the feedback I got when I showed the design to others. The project therefore kept evolving throughout the process, and many of the better solutions emerged after conversations, feedback and a closer look at how users would actually use the system.

What's missing?

The project is still in development and various things remain to be improved and built out further. The design was done with the goal of getting a visible, usable system in front of the backend team as soon as possible, so that development of the system itself could get started without waiting for a fully finished design. I still feel the design needs more polish. I'd especially like to add more micro-interactions and animations at key points in the system, so that users get clearer feedback when they press a button or perform an action. The goal of that is not only to make the experience livelier, but also to improve clarity in use. With the right visual feedback you can show the user that the system is working, reduce uncertainty and prevent them from thinking the system has frozen or that something has gone wrong.

Screenshots

Tech