Building UI for large TVs (50+ inches, 1080p)

Responsible for building the UI/UX for large TVs (50 inch+ size, 1080p). The app is targeted for DevOps and Engineers. These monitors/TVs are “on” 24×7, so the design is based on a dark palette/theme to avoid eye stress and distraction.

megaboard-1

megaboard-2

UI design and development of Veritas Appliance Management Server

page-00

I was one of the core UI designers (from the engineering team) for the Veritas Appliance Management Server project. I drove the UI design/engineering development effort, including HTML, CSS, responsive design, accessibility compliance (WCAG 2.0) and cross-browser support.

Here are some of the screenshots of the web app.

page-0

page-8

page-7

page-6

page-5

page-4 page-3

page-2

page-1

Chief Architect & Founder of Liveweave.com, a cloud-based User Interface (UI) development tool

New design

New design

Liveweave (white theme)

Liveweave (white theme)

lw-4

Liveweave Vector Editor (above)

lw-3

Liveweave Color Explorer (above)

lw-2

Liveweave CSS Explorer (above)

I am the creator of Liveweave.com, one of the most popular online HTML, CSS, JavaScript coding tools. It features one of the world’s most advanced context-sensitive code hinting technologies for an online HTML5, CSS3, JavaScript/jQuery editor, that allows a web / UI developer to test his/her code in real-time, using “live” preview.

Although, Liveweave.com is based on a SaaS model, the service is currently 100% free to use. Users can create unlimited number of “weaves” and store their work, and access them from the cloud anytime later.

new_login_liveweave

CreateUserLW

LoginUserLW

ColorsLW

 

css3-builder

Interactive Report Writer

report-writer-mainreport-writer2report1report2report4

Some basic prototypes of an interactive report writer app, which was a part of the LiveOps Contact Center. Some of the design challenges included, a drag-and-drop feature for the report parameters and then later add logic/mathematical expressions to them. As a part of the design, a mega-menu was also added that featured all the available reports, all in just one menu item.

 

LiveOps SalesForce Open CTI Phone Panel (Concept Prototype)

demo screens

This is the original design for LiveOps SaleForce Open CTI Adapter Phone Panel. I was the interaction as well and the visual designer for the application. Most of the design has been done using Adobe Fireworks. The colors are based on LiveOps corporate website palette.

The application has a 200×260 pixels form factor, based on SaleForce “Console” size and will be inside an iFrame.

UX/UI design for iRise Adoption Center

Adoption Center 1

iRise Adoption Center is a web app that is a must have for any iRise customer  having multiple licenses and multiple iRise users inside the organization. I was involved in the complete UI development, UX design, hi-fi prototyping using iRise Studio,  usability research, visual/graphics design, extensive cross-browser testing (IE8/9, Firefox, Chrome, Safari) and assisting back-end developers to fix UI-related defects.

The list of tools for the UI design/development used were Adobe Fireworks, Adobe Dreamweaver, iRise Studio, advanced HTML/CSS/CSS3, and some jQuery programming. Responsibilities also included – putting focus on visual design but also keeping usability in mind.

Here are a few examples of some of the pages (out of many, many more!)…

UX/UI design for iRise CodeGen

CodeGen3

CodeGen allows a developer to generate production quality source code from prototypes built using iRise Studio. I was involved in the UX design, visual design, usability research, HTML, CSS/CSS3 development, W3C Validation, browser testing in IE8,IE9, Firefox, Chrome & Safari and some jQuery programming as well . I have also built various icons/graphics/images using Adobe Fireworks.

A few pages (out of several that I designed)…

 

UI/UX design for iRise Connect

Connect 1

I have been involved in the user experience design, visual design and UI development for iRise Connect for HP, iRise Connect for Composer and iRise Connect for CaliberRM. This includes prototyping, usability research, HTML, CSS/CSS3 development, W3C Validation and browser testing in IE8,IE9, Firefox, Chrome and Safari. Here are a few examples of my work.

 

UX/UI design for iRise Version Center

VC 4

I have been involved in the user experience design, visual design and UI development for iRise Version Center. This includes prototyping, usability research, HTML, CSS/CSS3 development, W3C Validation and browser testing in IE8,IE9, Firefox, Chrome and Safari. Here are a few examples of my work.

VC 1

VC 2

VC 3

VC 4

VC 5

TIMS application visualization for Toyota

TIMS 5

The TIMS project was a high-profile project at Toyota’s North America HQ at Torrance, CA. I was involved in identifying the requirements, conduct stakeholder interviews, perform rapid prototyping, design page interactions, build scenarios, workflows and provide user experience guidelines. I had to work with product managers and several business analysts. Some of the screens (out of hundreds) are shown below.

TIMS 1

TIMS 2

TIMS 3

TIMS 4

TIMS 5

TIMS 6

Simulation of Customer Portal for Dolby

dolby 1

The following shows a few screenshots from a simulation that I did for Dolby Laboratories. The full interactive prototype/simulation is a customer portal web app targeted for Dolby customers. I used iRise 8.10 to complete the simulation.

 

 

Prototype / Simulation for Franklin Funds

franklin 1

The following shows a few screenshots from a demo/simulation I did for Franklin Funds. My responsibilities included putting screen captures sent by Franklin Funds together and build a simulation using iRise Stusio, iRise iBlocs, creating scenarios, creating artifacts/graphics in Adobe Fireworks and building wireframes/prototypes.

Note: Some of the images used are part of an existing application of Franklin Funds that have been used in my simulation / demo.

 

 

Simulation of Customer Portal for Varian

varian 4

The following shows a few screenshots from a demo/simulation I did for Varian. The simulation has been done using iRise Studio 8.9 and shows how a customer of Varian can perform every day tasks. My responsibilities included putting screen captures together (sent by Varian) and build a simulation using iRise Studio, iBlocs, creating scenarios, creating artifacts/graphics in Adobe Fireworks and building wireframes/prototypes.

Note: Some of the screenshots are part of an existing Varian application that I have used in the iRise Studio simulation. 

 

 

 

 

Complete Interaction Demo

page

There are many commercial web apps for which I have worked as interaction designer/developer. Most I cannot demo here due to client confidentiality reasons. However, here’s one example I have where you can navigate through various pages, see visual design, see page actions etc. Technologies used…HTML4, CSS2.1, CSS3, jQuery, jQuery UI.

(Note: The original logo and some other artifacts have been removed for confidentiality reasons.)

VIEW DEMO

 

Simulation of a commercial iPhone 4 app

MDC-8

Here are a few screenshots for a fully functional iPhone4 simulation (for a commercial app) that I prototyped for one of the world’s largest movie studios. The simulation has been completed using iRise Studio 8.9.

Some HTML5 Canvas Development

Scribr

I love HTML5 and I think CSS3 is a huge leap from CSS2. The duo is “the” future in web development. I have worked in two projects in HTML5/CSS3 for one of my clients. Here’s just an example of me “experimenting” with HTML5, CSS3, JQuery to build a Lo-Fi online sketching tool. Completed in under 6 hours. I call it, the “Scribr”  :)

Themes for WordPress blogging platform

Wordpress theme development

I have designed various themes for the popular blogging platform, WordPress. This includes prototyping to full-scale web development (UI) using HTML, CSS/CSS3, Javascript/JQuery.