Magic5 Software UI Redesign

Project overview

Magic5 Software produce easy-to-use forms for phones and tablets managed in one office system. The software encompasses a wide range of industries from health care to construction and is used by many large companies throughout the UK. I was commissioned by Magic5 software to produce a new user interface for their reporting and administration software.

Objectives

The project objectives were fairly simple in that the client required a complete redesign of the user interface used within the Magic5 software for nearly 15 years. The user interface was fairly problematic due to its extensive use of tables for data presentation and very complex forms which had become difficult to use for customers and field operatives. It was decided that tablets and desktops would be supported when developing the new UI so a responsive design was needed that could accommodate the legacy data types within the system. The original user interface was written using tables and ASP.net controls, although the underlying structure of the software wouldn't change the UI would need a modern approach both design and front-end coding.

What I did

The project presented a huge variety of challenges, the first being that data types were freeform where users could build their own custom forms featuring a mixture of form elements and presentational items such as image upload fields, tables, overlays, form fields, buttons, charts, etc all mixed together in unknown packages. This meant that there were no fixed content types to use as a basis for design so I needed to make sure that there were no specific styles applied to user interface elements and the entire system was adaptable to infinite HTML element combinations a user could create.

The second large challenge I faced was that the underlying data being served by the system was fairly rigid so I had limited scope to introduce new presentational items so I needed to be able to enhance already existing markup with new presentational styles. The project also required that the design was optimised for viewing on tablets, desktops and large screen monitors far bigger than a typical large format monitor. In order to overcome the various design and coding issues presented by the project I decided that it would make sense to use Twitter Bootstrap for the front-end framework as it provides a few simple enhancements and mobile responsiveness to basic HTML elements without having to customise vast amounts of markup.

After initial research and development was complete, I began the design process using pencil and paper - the great thing about creating wire-frames with pencil and paper is that iterating over ideas is quick and easy. Once I had a decent paper prototype I then moved on to creating an interactive, clickable prototype developed using the previous research and development and within the technical boundaries of the project. This prototype was then developed over several iterations with the markup in the final version used to integrate with the ASP.net controls powering the live software. 

Results

The current iteration of the user interface has allowed Magic5 software to transition to a modern presentation framework without the need to modify underlying technologies used on the backend server. This has provided a low-risk, efficient migration path for my client and provides a future-proof base to launch user interface features with limited effort.

Testimonial

Justin initially worked for me on a re-design of parts of our magic5 web application. I was very impressed with his work and subsequently engaged him to work on a full re-design. When it came to creating a new product web site, Justin was the obvious person to turn to. He has good technical knowledge and is particularly skilled in the business and commercial aspects of web technologies..

– Andrew Sinclair | Director at Magic5 Software