Interface design; an interative process

I was looking back at some old mockups and screenshots of the MySource Mini today and it is really amazing to see how the product's interface has progressed over the last 12 months or so. It's interesting to see how elements of the design changed, and while not all these mockups were built, all contributed something to the design we have today.

In this post, I'm going to show you the mockups we produced of the Settings/Administration interface. This is where you configure things like designs and caching for individual assets and for the site as a whole.

This first mockup was implemented in early 2007 and represents the first interface of the MySource Mini. We went for a desktop feel with large icons, but it gave us very little space to fit the actual editing interface. We still love large icons, and the concept of icons to represent different systems remains today.


It was soon clear we needed more space for the editing interfaces, so we went full screen. That meant sacrificing the large icons we loved so much and moving to a toolbar along the top, a concept that remains today.


The start of 2008 saw us bring on a dedicated interface designer who began reworking the main concepts of the interface. At the time, the inline content editing interface was progressing well and we wanted to bring the context you get from that interface into the settings screens. So we scaled back from full screen a little so you could see the page underneath.

This mockup was done in January 2008 and implemented soon after. It was the first time we really tried to bring that context into the rest of the interface, which we have now done using thumbnails of the page. Notice the side menu, which is almost identical to the current multi-add wizard interface.


One thing that always bothered us with this temporary interface was how dark it was. We didn't want to go for the desktop-inspired background image from the earlier mockups, but we wanted something lighter to contrast well with the black MySource Mini toolbar.

This mockup was done in March 2008 and was not implemented. It was used in most of our mockups for quite a while and was growing on us. It was light and looked fresh. It didn't have large icons, but the chunky menu buttons made up for it.


There was one thing lacking though; context. We needed somewhere to put our thumbnail and asset information.

This next mockup was very close to being the final interface. It was designed in May 2008 and implemented, although all the system icons were the same at the time. It is the first time the blue info box made an appearance, which gave us room to add a thumbnail and asset information.

In this mockup, an administration screen is shown, so the blue box does not contain asset information, but you should be able to see how we jumped to our final interface design from here.


In August 2008, we changed our minds again. The grey bar at the top was looking too much like a second toolbar and didn't feel polished enough. The whole interface was looking a bit too much like an old desktop application and we wanted something fresh.

We decided to lighten everything up and add the large icons back in. We had heaps of room for the content editing area, so we could go very web 2.0 with large menus and bright colours.


I've promised the team that I wont change my mind again, so this is the interface we will be using in the final MySource Mini release. I'm sure you'll agree it is a big improvement over our original interface and I hope you've enjoyed this small insight into our interface design process.