Challenge
Webfaction has been our hosting provider ever since we started in 2012 and while we couldn’t be happier with their services and support, the interface of their control panel was a complicated mess that confused most of their users. The main objectives of this redesign was to simplify the most confusing aspects of Webfaction’s interface, organise everything logically and bring the style up to speed. Since the main audience is developers and people with a reasonable technical expertise, we wanted to create an interface that is simple and technical enough to make them feel at home, but beautiful enough to provide an enjoyable experience. We recreated processes from the ground up, re-arranged most sections and introduced a bright new colour scheme.
Solution
They agreed to work with us and refresh their CP and have since reported, from early tests, that their users considered it a lot easier to find their way around and achieve even the more complicated tasks. We simplified and logically organised everything from how you create a new website, add an email address, manage your plan or get support. Getting started We started the project by getting to know the client, their business and the problems they are looking to solve. We spoke to people on their team, discussed the most common concerns users have and analysed the data they stored. We concluded the interface was plagued by several problems, chief among which were illogical navigation and poorly thought out and necessarily complex user flows and unintuitive terminology. Furthermore, the design was not built around the most commonly used features and would hide the pieces of information users needed most often under obscure menus. For example, to create a website with the old interface users had to go to Domains/Websites, click on Domains, link a new domain, click on Apps, create a new app, then go to websites and create a new website with the domain and app you just added. To make matters worse, users had to figure out this process on their own. We summarised our ideas for how the new interface should work through a series of wireframes and ran this by the client to make sure we are on the same page before moving forward. The Design After agreeing on the latest details of the UI’s structure, we moved on to the design stage. We created screens for every page and every state of the interface, every nook and cranny for both desktop and mobile devices. Continuing the example of the process for creating websites, we unified it into a single page withsequential steps, and clear explinations for how each step works and how it all comes together. The Code In order to maintain the agility we needed throughout the project and keep everything thoroughly organised, we decided to use a modular approach. Throughout the coding stage, Webfaction’s team was going to work on creating a new API to link their back-end to the interface. We kicked this stage off by defining the architecture and making a plan. Once we had the interface’s structure defined, we started creating the modules - starting with the core ones. We finished the interface before Webfaction completed the new API, and will link it when they are done.
Results
The result is a vibrant interface that welcomes new and existing users alike and streamlines all the tasks a user might do.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.