Redesigned the entire interaction design paradigm of the SAP Business ByDesign for small business into a responsive UI paradigm .
How do you react when you are told to redesign SAP’s flagship Small Business ERP’s interaction paradigm with in 3 months including development time ? I for one had palpitations and panic attacks !
THE CHALLENGE
SAP Business By Design for Small Business was made in Microsoft Silverlight . It was a behemoth out of tune with the new world of tablets and mobile devices and Microsoft was pulling the plug on Silverlight. The decision was taken to move to Html 5 and I was given the biggest challenge of my life.
MY ROLE
I led the entire redesign along with another fresh out of school designer (who was panicking with the complexity of SAP ! ) and also enlisted our visual designer in the final stages.
Redesign the entire interaction model to suit the responsive web so it could degrade gracefully from desktops (primary) to tablets (Android tablets was a rage ) and to mobile (very less usage)
WHERE DO I START ?
I was given access to the system and told to figure it out. There was an immense amount of functionality and most of the terminology was very vague to me. This is what things looked like !
I WAS GETTING OVERWHELMED
Like any true designer I started trying to figure out all the screens (probably 1000 + screens and dialogs and modal windows ) and functionality. What about actual end users ?
Forget it ! It’s impossible with enterprise NDA’s etc and the long enlistment cycle. Going guerilla was the way to go and this is a path which I frequently follow for user research and testing.
But trying to figure out 1000+ screens was too much and I knew if I continued this way it would fail and the end result would be a substandard job . Even older designers and PO’s had been ” reorged ” to some other verticals. So that was a dead end until ..
BINGO ! MVC ARCHITECTURE
While on a chance discussion with an architect it came out that Bydesign had an MVC architecture. Meaning the model, view and controller’s were independent and the UI’s were delinked from the data. I then quickly started mapping the UI’s into patterns.
MAPPING UI PATTERNS
REMAPPING THE EXISTING PATTERNS INTO NEW RESPONSIVE UI PATTERNS
I started remapping the patterns into my new patterns. Primary among them was the navigation structures and huge multi level menu systems which were getting complicated and also had to support multi-tasking.
EXTENSIVE PROTOTYPING AND TESTING FOR THE MENU OPTIONS TO FIGURE OUT SPEED VS USABILITY
We did a lot of Axure prototyping and tested menu systems to figure out the menu system which was best. Here’s some quick and dirty prototypes.