BRAINDIGIT introduces SageFrame CMS, With all new features and promises.
As a design manager, with a team of 10 designers, got a challenge to design Open source content management system (cms) for millions of customers who want to use Microsoft technologies to build their website with drag and drop ability. The product was developed in 2008, which had the plan to upgrade to next version 2.0 with better interactions and feasibility. The focus was improving user experience, user-interface library on manage and client sides. We had a challenge on Information Architecture (IA) and interactions for new features to be added in new version.
The process started with insights and existing test cases of SageFrame users. Workshops, user testing for products were the methords used for the user feedback.
This process started with a goal to create version 2 for the product, which will be able to do 70% additional features than in version 1 with latest trends and technologies using Microsoft technologies.
TThe business requirements and goals were clear, but the analysis of version 1 required user testing. There were more than 50 technology colleges in the city. Every colleges and university allowed doing campaigns, interviews, and workshops for the product reviews. The product was targeted a large number of users around the world, so the user requirements were vital for the start. More than 5000 students, teachers, and technologies provided the feedback on the product, which was an excessive response to the product research.TASK MANAGEMENT, IA & SITEMAP
After the product planning and requirements are refined, task management has done to start with information architecture and sitemap sketches.SCREEN FLOW & NAVIGATION MODEL
The product had a complex structure in itself. It had more than 100+ screens and panels, and architecture to create navigation models. As most of the features were dynamic in nature, the screens were locked with primary requirements.WIREFRAMES & PROTOTYPING
The sketches for Admin panel started with dashboard panel, followed by each feature available in the application. Drag and drop features, settings, user authentications and root users were clearly sketched. Then the prototyping was done on paper and posted on board to draw the interactions among them. This show the clear view of the whole system flow, where the user can go end-to-end.FUNCTIONAL SPECIFICATION & USABILITY TESTING
After the wireframes were done, the product functional specifications were matched and refined for usability testing among the developers only. This process was done in iteration process with improvement in each section, screen, and feature.VISUAL & INTERACTION DESIGN
This is the pure design process, visual art of each wireframe and prototype to convert them to the actual design. The fonts, colors, layouts, icons, labels, and spacing were defined properly to create the final User interface for the application.PRODUCT DESIGN & BRANDING
After the complete development, the product design was extended to create its different theme for the users which need another process of high-end design and followed by the precise branding of the product.