Kannan Natarajan


P O R T F O L I O



Oracle

Oracle UX Design Process

Oracle UX Design Process

Oracle Global Enterprise Manager 13c

  • Overview
  • Wireframe
  • User Interface

Challenge
Many organizations are using independent Enterprise Manager Deployments across their sites or data centers. But EM deployments can't be merged due to geographical separation of data centers and firewall issues. This, in turn, has created the following challenges like getting access to consolidated information across EM deployments and setting up standardized set of management settings across Enterprise Manager Deployments.

Action & Deliverables
Global Enterprise Manager helps Organizations in consolidating their IT environments in a seamless fashion across geographical, political or department boundaries. As organizations start becoming truly global, organizations are deploying multiple cloud control instances to manage different parts of their infrastructure. Hence there is an increasing need for a single console for the entire organization that can provide consolidated views of multiple Cloud Control deployments.

The solution proposed here is based on the idea that each of the data centers or geographies has a local Enterprise Manager installation that acts as the local cloud controller. Global EM and Local EM sites will work independently even if communication between them is temporarily broken. Global EM also provides summarized views to EM C Level execs or management who would like to get an overview of information across EM sites.
Oracle Global Enterprise Manager 13c - Wireframe
Oracle Global Enterprise Manager 13c - Concepts

Oracle Enterprise Manager 12c

  • Overview
  • Wireframe
  • User Interface

Enterprise Manager
Enterprise Manager, Oracle's flagship product for systems management provides industry's most complete solution for cloud management. It offers a single, integrated console for testing, deploying, operating, monitoring, diagnosing, and troubleshooting, today's complex IT environments. It offers a simple, scalable solution for running Oracle stack, from Applications,Middleware,Database,Operating System,Virtual Machine, Servers and Storage to disk, in cloud environments. It manages everything in your datacenter - from the hypervisor to the operating system, database, and application tier.

Role
I have been extensively involved in gathering business requirements (interview / workshop / storyboarding / workflow sketching). Major roles played by me are Usability & User Interface designing. Translating the requirements into interactive prototype (UI). Organize and perform usability tests with the real time users. Conduct UI Review during the development stage and Exit Review after development to ensure that the product meets the approved User Interface, Interaction Design and Visual Design.
Oracle Enterprise Manager 11g Screenshot
Oracle Enterprise Manager 11g Screenshot

Enterprise Manager UI Foundation

  • Overview
  • Layout
  • Design Spec
  • Standard
  • Portal

Challenge
The design of the UI framework is specified. The UI framework provides the navigation and UI support, for individual solution features within EM. EM Solution developers can make use of the appropriate UI framework component and leave the design and implementation to UIFWK development team. But as we have limited designer resource, we were unable to support the entire Development team and their projects extensively. So we planned for a common reference area where the developers and framework team can refer for Standards, Design and Patterns.

Action & Deliverables
The UI Design Foundation provides UI design resources for common UI components, page designs and page flows used in Enterprise Manager 11g. These UI design resources should be used for all development within Enterprise Manager to create a consistent, high quality user experience. The 11g UI Design foundation is a set of UI resources that lays the groundwork for UI design and development for 11gR2.

The targeted audiences of these resources are UIFWK development team and EM solution developers. The goal of the UI Design Foundation is twofold to Ensure UI design consistency and Increase developer productivity.

The following resources are currently provided:

UI Framework Design Specs: Used for implementations by the EM UIFWK team. These include the "UI Shell" and other global page elements.
Design Patterns: A pattern is a repeated occurrence of a UI design for which a template is desired. Templates are coding structures or samples provided by the UIFWK team.
Page Design Guide: UI design standards and design guidance for page developers. Previously called the "EM Style Guide". The name change better describes the content.
Enterprise Manager UI Foundation - Portal
Enterprise Manager UI Foundation - Design Spec
Enterprise Manager UI Foundation - Standards
Enterprise Manager UI Foundation - Portal

Mockup Tools

  • Overview
  • Low-Fidelity
  • Hi-Fidelity
  • Photoshop

Low-Fidelity
Challenge: To provide a mock up tool, where the developer can design own mockups to reduce time. My Management team searched for an external contractor who will work for new BLAF+ visual design component stencils for Visio.

Action & Deliverables: I decided to face the challenge and completed the Stencils successfully. The main advantage in this stencil was each component had customized control and optional state. Other added advantages were Page Templates, Drag and drop-able components with customize control (Different state, Hide & Show, Advanced snap-in (Docking) feature & etc.), Backgrounds with different layout (Page with left pane or top pane & etc.) for BLAF+ Standard (Rich Look and Feel).

Hi-Fidelity
Challenge: Because of the new Visual Design Enhancement changes, we were supposed to change the Visio templates and stencils. So we decided to provide new mock up tool where the developer can design his/her own mockup

Action & Deliverables: I delivered a much more user-friendly version of stencils. Also I designed a new Visio templates and stencils for 11.2 in a very short period of time.

Photoshop
Challenge: Occasionally our Visual Design changes, so during those times we change the design visually. Every time when the design changes, we need to change everything. It's because our existing Visio template and stencils were meant for particular design and theme. Changing the design every time was a very tedious job. So we planned to design new user-friendly template and stencils which can suit any applications.

Action & Deliverables: For this challengeable task, I developed and designed new templates and stencils to create wireframe mockups which worked excellently. These mockups can be used with any application.
Low-Fidelity (wireframe) Mockup Tool Screenshot
Hi-Fidelity Mockup Tool Screenshot
Photoshop Mockup Tool Screenshot

Enterprise Manager Mobile App

  • Overview
  • Wireframe
  • User Interface

Challenge
To upgrade for the latest technology, we planned to provide Oracle Enterprise Manager Cloud Control 12c as Mobile App for Apple iPhone.

Action & Deliverables
I worked actively and designed Oracle Enterprise Manager Cloud Control 12c Mobile App for incident management with service request integration offers the ability to track, monitor, and manage incidents directly from your Smartphone. Oracle Enterprise Manager 12c users can view, assign, prioritize, escalate, and annotate incidents and problem details directly in the app. The app provides seamless connectivity to My Oracle Support. In addition, the flexible setup screen enables users to connect multiple Oracle Enterprise Manager 12c environments within a single pane.

Enterprise Manager Mobile App - Wireframe
Enterprise Manager Mobile App - Visual Design

Oracle Enterprise Manager Desktop Widgets

  • Overview
  • Concept Design
  • User Interface

Challenge
An Enterprise Manager user (DBA/System Administrator) is involved in multiple activities as part of his responsibilities in the organization. Monitoring the IT infrastructure using EM is one of many tasks which he is involved with. To monitor the targets owned by him he has to periodically login to the Enterprise Manager, this is often an unproductive, repetitive task which takes a lot of time and takes him away from his regular tasks.

Action & Deliverables
Enterprise Manager Desktop Widgets are lightweight internet applications that provide persistent desktop access to key Enterprise Manager monitoring and diagnostic information. Utilizing integrated automatic refresh capability, Enterprise Manager Desktop Widgets provide up-to-date, at-a-glance information about your managed eco-system. Timely information is readily available to administrators, system engineers, or other critical decision makers in your organization. Widgets also provide direct access to specific Enterprise Manager Functionality, thus facilitating faster problem response and resolution.

Oracle Enterprise Manager Desktop Widgets
Oracle Enterprise Manager Desktop Widgets

Oracle Enterprise Manager 11g

  • Overview
  • User Interface

Challenge
While upgrading from Oracle Enterprise Manager 10g to 11g, we planned to give a new look and navigation model to EM11g product. We decided to differentiate the EM 11g from EM 10g. The existing EM 10g runs with UIX framework. So we planned to use ADF framework for EM 11g. But the problem we faced was, existing EM 10g has many pages and modules, so converting all files will take much time.

Action & Deliverables
Once we decided to give new look and feel & navigation model to EM 11g product. We planned to map UIX and ADF framework to achieve the task.

In this critical task, I explored the New BLAF+ ADF Style Sheet Implementation. Changing the look and feel is not much easy. There is a different approach called Skinning which is unexplored. Then I learnt the process for skinning which is extending the existing style to new style at runtime compilation. At the time of code compiling [runtime] base class will be overwrite our new setting and runtime new css file will be generated. While Exploration I have faced few issues. Actual CSS class name is different from what we were defining in the setting. The issue here is we have to work in reverse method. Finally I achieved the look and feel of ADF BLAF+ Framework.

I explored and worked on the visual design for each components and different type of page (framework: Master/Details, Tree/Details, Wizard & etc.). Explored each Component design in development environment and provided the visual Design.
Oracle Enterprise Manager 11g

EM 11g Global Navigation

  • Overview
  • Wireframe
  • Concept Design
  • User Interface

Challenge
Existing EM10g navigation menus design was a tabbed version. Further it has many menus which were very tedious to work with menus. So we decided to solve this challenge by using dropdown menus.

Action & Deliverables
I explored and re-arranged the menus based on the logical grouping and trendy icons for the new design.
EM 11g Global Navigation - Re-design (Wireframe)
EM 11g Global Navigation - Re-design (Concept Design)
EM 11g Global Navigation - Re-design (Visual Design)

EM 11g Login / Home Page Design

  • Overview
  • Wireframe
  • Concept Design
  • User Interface

Challenge
The information structuring concepts are based on the inputs from the stakeholders. We are assuming in these concepts that user has already installed Enterprise Manager and has logged in to the Enterprise Manager by entering the credentials. Problem here is there is no guide or instructions to direct the New users regarding how to get started, what's new, etc.,

Action & Deliverables
This concept is based on approach taken by many desktop applications. After the user has logged in for the first time he is displayed a DHTML welcome page. The user is shown an overview of what to expect from the new Enterprise Manager. For the first time user focus is on educating the user about the various features.

I Collected the Requirements, Key Use Cases, Competitor System Management Products, Executive Inputs & Brainstorming Notes from existing 10g. Further prepared the Concepts with Information Structuring & Concept Content Detailing with multiple Visual Design Options. Finally prepared clickable html prototype and helped development team.
EM 11g Login / Home Page - Re-design (Wireframe)
EM 11g Login / Home Page - Re-design (Concept Design)
EM 11g Login / Home Page - Re-design (Visual Design)

Target Status Pie Chart Alternate & Color Palette

  • Overview
  • Target Status Pie Chart Alternate
  • Color Palette

Challenge
Currently target statuses are displayed using Pie Graphs. So we decided to design an alternate method instead of Pie Graphs .The next issue was our developers were using different colors to represent charts. So we planned to standardize the colors for graphs.

Action & Deliverables
I designed alternate target statuses to avoid Pie Graphs. Also Designed a common Color Palette for all Graphs (Pie, Bar, Line Graphs), Except for the Pie Graphs that displays the status (Say Up, Down, unknown, blackout). Graph framework assigns the colors automatically in a sequential order from 1 to 15. If the category is more than 15, again it will start the sequence from the beginning (1 to 15). If you want to assign the colors manually, you have to follow the sequential order from 1 to 15. If your category is more than 15, again you have to start the order from 1 to 15.
Target Status Pie Chart Alternate
Color Palette

Trivium eSolutions

( formally iCOPE Technologies Pvt. Ltd. )

InPhonic - Content Tool

  • Overview
  • User Interface

Challenge
InPhonic - Content Tool - Storefront website. It is a web application tool to create and edit content pages on their proprietary website. The objective of the Content Tool is to empower business users to effect all relevant changes themselves, without compromising the context elements and avoiding the involvement of the IT function in the process. In addition to this primary need, the objective is also to develop a tool that can flexibly support evolution of existing storefront promotions and introduction of any new promotions, from to time.

Role
I was involved in developing UI Design, Storyboard, Prototype, UI Standards, UI Testing and Multimedia User Manual. Also involved in Development and Consulting.
InPhonic - Content Tool Screenshot

HypoVereinsbank - MWCustody

  • Overview
  • User Interface

Challenge
MWCustody is a securities transaction system. This system will be used by professional securities trading firms to perform securities transactions with the bank (HypoVereinsbank). The system is accessed by agents at the securities trading firms through a browser interface from their desktop. This interface is known as the Custody Client. It connects over the internet to the Custody Server, which is deployed in the securities trading firm. Custody Server is interfaced to a component called MULTIWEB Transaction server. This component is deployed at the bank and is the access to the Banking server. Custody server will use the Transaction server to carry out the securities transactions on behalf of the agents connected to it.

Role
I was developing UI Design, Storyboard, Prototype, UI Standards, UI Testing and Consulting.
HypoVereinsbank - MWCustody

Reliance - Meals on Wheels

  • Overview
  • User Interface

Challenge
The application enables Reliance mobile users to locate the restaurants close to them from their J2ME enabled mobile phones, and place an order or book reservations .The user's request is then sent to the restaurant via SMS. The application also provides a web interface to the Restaurant owners who are registered with Reliance. The Web Interface also provides an Admin module that can be used (at Reliance) To Approve or reject restaurants, To maintain the restaurant profiles, To create and update cuisine / sub-cuisine data.

Role
I developed UI Design, Storyboard, Prototype, Base HTML Screens, UI Standards, UI Testing and Consulting.
Reliance - Meals on Wheels

RöfsPartner - Inventer

  • Overview
  • User Interface

Challenge
This is an inventory management system that automates the assigning, tracking and maintaining of Devices like Computers, Printers and other peripherals. The product helps project managers and system administrators to track equipments, allocate and reallocate them to different employees and in general manage the IT Inventory of the company. All relevant reports are generated using Crystal Reports 8.0 that can later be previewed in the PDF format at the client end.

Role
I have extensively involved in developing UI Design, Storyboard, Prototype, Base HTML Screens, UI Standards, UI Testing, Development and Consulting.
RölfsPartner - Inventer

Bescom - IVRs

  • Overview
  • User Interface

Challenge
iCOPE deployed a carrier grade Voice Response system at BESCOM, The System was seamlessly integrated with the legacy systems that already prevailed at the customer site. This comprehensive Complaint Management System allows a maximum of 210 BESCOM consumers to simultaneously dial into a central number to record their complaints pertaining to power and billing. This system is also integrated with a messaging service that ensures that all recorded complaints are dispatched to concerned sub divisions via email to ensure prompt follow ups as well as a high degree of customer satisfaction.

Role
I was involved in developing UI Design, UI Standards, Development and Maintenance of Admin / User Module.
Bescom - IVRs Screenshot

QMS.Net

  • Overview
  • User Interface

Challenge
QMS.Net is a tool to automate the Quality Management System. This application has been developed for the QAG and the end users would be the employees of iCOPE. It is available on the intranet, accessible by any browser. The core functionalities have been published using Web Services. This tool has automated most of the key processes in the SDLC.This tool is integrated with MS Excel, MS Project, and WinZip. The planning can be done in using MS Project. The logs of data can be exported to Excel.

Role
I was involved in developing UI Design, Prototype, UI Standards and UI Testing. Also involved extensively in Development,R&D and Consulting.
QMS.Net Screenshot

Crossdomain - Suvidha

  • Overview
  • User Interface

Challenge
Crossdomain - Suvidha (BulkIT) is a web-based service that enables individual income tax payers in India to file their tax returns electronically through their employers who in turn submit the returns in bulk at the Income Tax Department. The important features are look-and-feel of the form which appears on the web exactly like a printed form,thus enhancing user friendliness. Calculations are performed on real-time and results are captured simultaneously. Printing directly in the format required is also possible unlike in the case of a HTML page.

Role
I was involved in developing UI Design, Prototype, UI Standards and UI Testing. Also involved in Development and Consulting.
Crossdomain - Suvidha Screenshot

JTheseus - CRM

  • Overview
  • User Interface

Challenge
JTheseus is a web based Customer Relationship Management tool. JTheseus combines Web with CTI (Computer Telephony Integration) and Java Mail API in a JSP environment to bring in new dimensions of power and efficiency for corporates to manage their customers at a low Total Cost of Ownership. With entities / roles like contexts, company, projects and users, JTheseus helps any corporate to model their application context with minimal effort. Sharing of information across the organization as well as keeping track of all forms of communication like email, fax, telephone, etc. are possible.

Role
As a Key Team Member, I actively contributed towards the design (database), UI Design, Prototype, UI Standards and UI Testing of the application, and was responsible in the development of many modules like Address, Event ,Reminder, Reports and Mail interface, Time Sheet and was responsible for the system integration.
JTheseus - CRM Screenshot

iVoice & iCAS

  • Overview
  • User Interface

Challenge
The Integrated Communication Application Suite (iCAS) is a comprehensive Java based product that serves as a single platform for phone, fax & data transfer (EFT) applications over ISDN networks from the users desktop. Besides these,there are support applications like ISDN monitor, Address book, Answering machine and Fax printer driver. These applications make use of a shared object on Linux or a DLL on windows to perform their tasks.

Action & Deliverables
I developed a very flexible Application GUI Design, Icons and Graphics.
iVoice & iCAS Screenshot

eZBank

  • Overview
  • User Interface

Challenge
During early mobile days, when we were unaware of Mobile Banking System, we planned to devlelop an application for mobile using Palm OS.

Action & Deliverables
I was involved in developing UI Design, Prototype, UI Standards & Icon Design.
eZBank Screenshot

iCOPE Websites & Intranet Application

  • Overview
  • User Interface

Challenge
iCOPE Websites involved in designing of their organization's web page. We are having our website in two different languages (English & Germany).

Also developed & maintained the following Intranet web applications for organization.

iCOPENet: Intranet website for employee.
iGyan: Knowledge Management System.
iLib: Library Management System.
iBrief: Internal Magazine.

Role
As a Key Person, I actively contributed towards the design, development and maintenance of the websites.
iCOPE Websites & Intranet Application Screenshot

Architecture & Brochure Design

Architecture & Brochure Design Screenshot

Personal Initiative

Passion to explore new technologies

Android - Product Catalog Management

  • Overview
  • Wireframe
  • User Interface

Challenge
The current catalog mechanism has a major problem as the products can be viewed only as PDF / Photos with least details. This mechanism is very static with no interactions. Further they are viewable only as PDF / Photos with least details. So I just took a step ahead, analyzed for a solution, planned to design a Smartphone Android application for catalog to showcase products with maximum inputs.

Action & Deliverables
I always had a passion to explore new technologies, so designed a product using Android OS for Smartphone. To improve my ability, I designed an application for Product Catalog Management.

This Android Application is an Electronic Catalog for Android based smart phones which provide an interactive promoting platform with latest technology solutions to promote products.

The best features include:

Product Categorization: Exhibits products with different categories.
Product Offers: The organization can frequently publish their best deals, hot offers, etc.
List of products: Generates the products list with images and videos.
Product Navigation: The user can view the before or next item by navigating through a single touch.
Price List: Provides the market retail price and offer price for each and every product.
Product Comparisons: The user can compare the products.
Product Search: The user can search and choose their product with their desired price range.
Smart Buy: The user can purchase their desired product through their Android smart phones.
Managing products content: The major advantage in this feature is, the Organization can manage the content of this app by adding, deleting, modifying, updating single or more contents anywhere throughout the app.
Oracle Enterprise Manager 11g - Wireframe
Oracle Enterprise Manager 11g - Screenshot

Yahoo Widgets

  • Overview
  • User Interface

The Yahoo Widget Engine (Konfabulator) has a very flexible application programming interface (API) based on JavaScript with many features.

WebRadio ( Downloads: 5,00,000+ worldwide )
Web Radio widget to play any live streaming radios from Web. Web Radio (all in one) allows you to Add, Edit & Delete your favorite online Web radio stations.

TeleBook ( Downloads: 1,13,000+ worldwide )
TeleBook widget to store/search your family's and friend's contact numbers. This TeleBook allows you to add, edit, remove & clear contacts. To get the contact number, type in the search field (or) select from the search dropdown menu.

Widgipedia RSS Feeds ( Downloads: 8,600+ worldwide )
WidgiPedia's RSS Feeder. Supports following WidgiPedia's RSS Feeds: Latest widgets, Dashboard widgets, Yahoo Widgets, Standalone widgets, Developer Resources.

VanavilFM ( Downloads: 14,000+ worldwide )
To play live VanavilFM streaming radios from Web.
Oracle Enterprise Manager 11g Screenshot