SageFrame v2.0-3.6

I am one of member of sageframe, The Winner of the 2014 People's Choice CMS Award for Best Open Source .NET CMS. I worked as product designer from Nov 2012 to June 2015. I'm happy to be successful in placing sageframe in next level.

Research product scope

Our product vision is to take make an sageframe as open source platform so that every interested developer can be benefited and can contribute accordingly.

Conduct competitive analysis

Every time before introducing about any new feature, I had to ask myself “will this be our competitive advantage”? It was essential to conduct analysis of competitors and make decision with confident. Wordpress, Umbraco and Sitefinity were on our top 3 list. CMS’s which target on enterprise level like Kentico and DNN was in low priority.

Build wireframes

Obviously, after the communicating with product owner,developer, The feature which get green signal, it went under wireframe phase. Hundreds of wireframe were done and a lot of mistakes and flaws ahead of time. Most of we were working on a tight sprints, it was important to address any issues before hand. Here a screenshot(wireframe) of layout page 

Hi-Fidelity mockup

All Basic interface components like buttons, forms, table were created by me. When some new UI needed to apply, I needed also to have discuss within a team whether it is suitable or not.


Documentation was pre-development. Before building we used to write docs based on prototype and ensured that every feature is released having complete docs.

Front-end Develop2ment

During SageFrame Prototype development, we were responsible to apply best practices like SMACSS, BEM. This helped us to discuss and make documentation of design features and training materials like videos, presentations etc.

User Testing

While talking about testing, we used other developers (android, php) of company to find out usablity issues.  We watched them doing some basic steps and learned few things. Nothing critcal issues found. At begining of product, mouse tracking was used to monitor user behaviour, Later on, we didn't find it useful so withdraw that.
Product url