Sageframe - Product Design

BRAINDIGIT introduces SageFrame CMS, With all new features and promises.

Challenge

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.

Objective

Coming Soon.

Approach

Product Ideate, Prototype, User Research, User Testing, Workshops, Visual Design, Team Lead

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.

Design Details
  • Date: September 2016
  • Platform: Desktop, tablet and mobile (Responsive Design) + Mobile App (Prototype)
  • Technology: Adobe Creative Cloud, Jira, Visual Studio
Design Process
  • Understand
  • Sketch
  • Decide
  • Prototype
  • Validate
What did I do?
  • Leading more than 30+ people from design, development, marketing, content and support departments.
  • Setting up goals and objectives for the team to do task analysis.
  • Documenting interaction and visual design requirements.
  • Sketching information architecture and sitemap of the product.
  • Visual design for the component library and interaction guidelines.
  • Conduct user testing, workshops, and focus groups.
  • Building personas, creating scenarios and user journey
  • The Final decision for product design and its branding.
REVIEW EXISTING VERSION & FOCUS GROUPS

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.