BALUMAHENDRA RAJASEKARAN · Gurgaon, India Sr. Graphic Designer Chennai, India Art Specialist...

2MY EXPERIENCE

2006

2008

2009

2010

2014

NOW

Gurgaon, India

Sr. Graphic Designer

Chennai, India

Art Specialist

Chennai, India

Sr. Art Specialist

Walt Disney World, Orlando-FLBlue Cross Blue Shield of Minnesota, Eagan-MNEnterprise Holding Inc., St. Louis-MODelta Airlines, Atlanta-GAAetna Insurance, Atlanta-GAVerizon Business, Colorado Springs-CODitech Financial, Fort Washington-PADelta Airlines, Atlanta-GA

Lead UX/UI Designer (Manager-Projects)

Bank of America, Charlotte-NCSantander Consumer USA, Dallas-TX

Sr. UX/UI Designer (Assistant Consultant)

3

✓ User Research

✓ User Interview

✓ Understand Business Vision

✓ User Pain points

✓ Project Objectives

✓ Design Strategy

✓ Problem Definition

✓ Target Audience

✓ User Data Research

✓ Surveys & Questionnaire

✓ Project Plan/Schedule/Estimation

✓ Information Architecture

Principles

✓ User Personas

✓ Card Sorting

✓ Screen/Task Flows

✓ User Journey Maps

✓ Do-Go Mapping

✓ Sitemap Navigation Model

✓ Heuristic Evaluation

✓ User Scenarios

✓ Content Inventory Audit

✓ High-Level Design

✓ Wireframe Concepts

✓ Clickable Prototypes

✓ Interaction Design

✓ Responsive Design

✓ Layout Principles

✓ Annotations

✓ Visual Concepts

✓ Branding

✓ Color theory

✓ Layout principles

✓ Specifications

✓ Usability Goals

✓ Usability Testing

✓ UI Assessment

✓ Accessibility

✓ Iterate based on Feedback

✓ Complete Design

✓ Requirement Mapping

✓ UX Artifacts

✓ Design support

✓ Document specifications

✓ Transition to the Fulfilment team

Discover & Learn Design & Analysis Interaction Design Evaluate & Testing Deliver

MY DESIGN PROCESS

MY DESIGN TOOLS 4

5MY CASE STUDIES

1SINGLE VIEW OF CUSTOMER

Impacted Flight Screen(Native Mobile App)

2BCBS OF MN

Pre Login and Post Login

3SENIOR SUPPLEMENT PRODUCTS

Product Quote and Enrollment

4WORKFLOW MANAGEMENT SYSTEM

Loan Origination Systems

What I did?

✓ Setting Goals, Timelines & Deliverables✓ Stakeholders Workshops✓ Understanding Current Business Processes✓ Interviews & Contextual Inquiry Sessions✓ Conducted Surveys✓ Heuristic Evaluation✓ Created Content Inventory Audits✓ Mapped User Journeys✓ Created Do Go Mapping (User Journeys)✓ Created Wireframes✓ UX Estimations✓ Usability Testing

My Role

User Experience Consultant/Designer

Business Goals

On the Impacted flights result page, the number of the flight results are increasing rapidly. The business goals is to fix the Usability issues, so users can see the number of flights by less scrolls and minimal UI rendering to improve screen performance.

6SINGLE VIEW OF CUSTOMERImpacted Flight Screen(Native Mobile App)

1

Heuristic Evaluation

✓ Investigated the existing Impacted flight results screen to understand user friendly,

usability. Also to understand the pinpoints, interviewed with real users, business

stakeholders and developers.

✓ Also received UAT feedback the performance of this page is not to the expectations due to

long page rendering.

✓ Implemented the heuristic evaluation by analyzing the existing UI and found there are

more redundant info, so user lose their focus due to a long scroll. Step by step analyze

helped to visually understand how the UI enhance will help to save space.

✓ 50% saved by grouped the flight info. 65% saved by simplify the actions(Removed “Watch”

since no longer used by users, “Claim” moved when flight selected, “View” will work when

select the flight). Overall 75% saved by enhance the search panel.

✓ Benefits: Better look & feel, by default displayed upto 6 flights without scroll, easy eye

contact, more productive and usability, no UI rendering issue and good performance.

7SINGLE VIEW OF CUSTOMERImpacted Flight Screen(Native Mobile App)

1

8

Existing Screen: Performance issue arise due

to long UI render

Heuristic Evaluation: Overall 75% space saved by

grouped the info.

Final UX/UI Output: 6 result displayed by default

without scroll, more usability.

SINGLE VIEW OF CUSTOMERImpacted Flight Screen(Native Mobile App)

1

What I did?

✓ Setting Goals, Timelines & Deliverables✓ Stakeholders Workshops✓ Understanding Current Business Processes✓ Interviews & Contextual Inquiry Sessions✓ Conducted Surveys✓ Create User Personas✓ Created Content Inventory Audits✓ Mapped User Journeys✓ Created Do Go Mapping (User Journeys)✓ Created Wireframes✓ Usability Testing✓ Established Design & UI Standards

My Role

UX Designer: Lead the design team to deliver the end-to-end design solution for this engagement.

Business Goals

To re-design and re-define the existing application to provide good user experience for both Pre login and post login customers.

9BCBS of NMPre Login and Post Login

2

User Personas

✓ Since this customer providing insurance service for all consumer across ages.

We created personas for each characters.

✓ Captured User’s Name, Age, Gender, Location.

✓ Captured User needs and their goals.

✓ User’s Challenges, Frustrations, Likes and Dis Likes

✓ User’s environment and conditions.

✓ Avoiding personal comments.

Users Naturalistic Work Environment

➢ They work in regular shifts and do not work on weekends and national holidays.

➢ Provided with a laptop (Widescreen monitor, regular key board, mouse and a telephone)

➢ Computer savvy hence comfortable using mouse/keyboard simultaneously.

➢ Classifiers mainly work with Scrip for data validation.

Age: 18Gender: FemaleLocation: DenverNeed: to purchase a Medicare insurance.

JessicaStudent, Colorado University

Age: 45Gender: MaleLocation: AtlantaNeed: to purchase a Dental insurance.

JamesDoctor, Northside Hospital


2

High Level Site-Map Navigation Model

✓ Created Main Menu and Secondary Menu items by listing main

levels and sub levels navigations.

✓ Make sure there should not be any duplicate features and carefully

organized corresponding to the right Menus.

✓ Created for both Pre Login and Post Login users and get signed-off

before proceeding with next design process.


2

Content Strategy Principles

✓ Use clear and simple language

✓ Make it easy for our consumers

✓ Provide valuable, personalized services and content

✓ Be relevant across all consumer experiences

✓ Calls to action: Very brief and Exceptionally clear

✓ Headlines: Breaking up long content with headlines increases scan ability

Content Inventory Audit

✓ Audit for both Pre login and Post login of all Internal, External and Microsites.

✓ Captured Navigation titles, Levels and sub levels of each pages. If we found any duplicate

pages, categorize under the legends of actions.

✓ Finally showing a statistical reports of Unique pages vs Duplicate pages for both Pre

Login and Post Login.


2

UI Design and Specifications

✓ Text Formats

✓ Label alignment

✓ Required form fields

✓ Content grouping

✓ Field length

✓ Action buttons

✓ Table structures

✓ Auto Complete

✓ Validation

✓ Search results

✓ Wizard

✓ Expand/collapsible panels

✓ Error Messages


2

Organized Main Menus

Customer focus topics

User’s Instant Quote to start

with.

Educated User Benefits


2

DesktopTablet Mobile


2

User Personal Information

Hamburger Menu

Navigation Topics

Schedule Appointment

User Activities


2

User Activities

My Plan, inner navigation menu

Quick Widgets


2

Send/Receive Message to

Doctor


2

What I did?

✓ Setting Goals, Timelines & Deliverables✓ Stakeholders Workshops✓ Understanding Current Business Processes✓ Interviews & Contextual Inquiry Sessions✓ Conducted Surveys✓ Create User Personas✓ Created Content Inventory Audits✓ Mapped User Journeys✓ Created Do Go Mapping (User Journeys)✓ Created Wireframes✓ UX Estimations✓ Usability Testing

My Role


Business Goals

To Combine multiple supplement products into one standard application and capable to Quote and Enrollment process for both Customer facing and Agent facing. Target to enter one common demographic info and single payment to purchase products.

19SENIOR SUPLEMENT PRODUCTSProduct Quote and Enrollment

3

Card Sorting

✓ Invited all stakeholders, Business Owners, SME’s, IT and given a set of sticky cards

and pen.

✓ Provided participants with an estimate of how long the card sort will take before

beginning the session to help them better gauge the required time and effort.

✓ Educated the purpose of the card sorting is to build the structure of website and

what to put on the home page, Label categories and navigation.

✓ Educated the users want to see the information grouped by Subject, Tasks, Stories.

✓ Start grouping and organize the tasks by the title.

✓ Validating each tasks and filter if any duplicates

✓ Review content and identify the most important or most frequently user content.


3

Do Go Mapping (Journey map)

✓ Do-Go mapping sheet contains below, • Name: descriptive label for the node (screen/page)• Reference Number: quick reference for a node• Input Fields: important form fields• Do: actions for the screen• Go: neighbors, or where you can go from this node

✓ Clearly capture items on the right pages and create a navigation flows from one page to another.

✓ Shared with Business to get sign-off, before starting wireframes.


3

Heuristic Analysis: Observations

✓ This web based application has build in 1980’s and a traditional design of standard tabs,

tables, tree structures and popups. These interaction design pattern might not be

suitable/optimal, the business goal to modernize with Web applications.

✓ There is no insightful information or hint for the user to view the information without

clicking/selecting a nodes and too may tabs and expand/collapse within a restricted

space and visual noise and increases the number of click/scrolls.

✓ Showing all the activities upfront makes the user go through the entire list around 40

activities to select the preferred one which is time consuming.

✓ There is no option for the user to sort or filter records under payment tab, which may

result in the user scanning multiple records before reaching the desired one.

✓ There is not option to take actions on the information.

✓ Actions like view images and data are hidden with more link which is not intuitive.

✓ Using the same label at different location creates an ambiguity among users. For

example, there is list of links displayed as navigation under main menu and also a list of

links shown as navigation under company information.


3

Customer focus topics

User can start quote with

minimal info.

Quick useful info.

Educate users benefits

Existing customer login


3

Call back agent widget

User can modify without going back screen.

All products are shown in a tab

Compare plan functionality

Plan detail information.

Shopping cart to display all

selected plans

Any time user can save and retrieve the

quote again

Add Applicant-B any time. A popup will appear to feed

minimal info.

Select button to add to shopping

cart.


3

Cart with selected products

User personalize

Set wizard to show the current

steps

Submit enable when e-sign

done.

Organized Widgets

Left navigation to follow step

process

Remodify the plan if required

Detail price view per plan


3

Step-1: Login

26

Step-5: Complete

Transaction

Step-2: List of available products

Step-3: Select list of plan to cart

Step-4: Enroll and proceed.

SENIOR SUPLEMENT PRODUCTSProduct Quote and Enrollment

3

What I did?

✓ Setting Goals, Timelines & Deliverables✓ Stakeholders Workshops✓ Understanding Current Business Processes✓ Interviews & Contextual Inquiry Sessions✓ Conducted Surveys✓ Mapped User Journeys✓ Created Do Go Mapping (User Journeys)✓ Created Wireframes✓ Conducted UI Assessment ✓ Established Design & UI Standards✓ Created Visual Concept✓ Usability Testing

My Role


Business Goals

To assess, optimize and improve the user experience of the current Loan Origination System for Loan Setup and Lead creation process. Optimize the design solution to track the Loan stages.

27WORKFLOW MANAGEMENT SYSTEMLoan Origination Systems

4

User Pain Points

➢ Latency workflow process issues.

➢ During Loan Setup, facing difficulties to track the Loan status.

➢ Redundant information across tabs

➢ Having three level of expand collapse leads to confusion for new users.

➢ Company related information is of less use while addressing the customer’s queries.

➢ Multiple tab navigation is required to reach an information.

➢ The pagination for search result is not intuitive.

➢ Actions like view images and data are hidden under ‘more’ link.

➢ Alert messages shown are not very clear and visible.

➢ There is a repeat of performing certain activities which is applicable across various accounts for the same user.

➢ Expecting a nice look and feel.

➢ Widgets should be accessible in all pages.

➢ Multiple scrolls [vertically/ horizontally] are used to view the full information

User Research Sessions

Conducted User Research sessions with the SME’s and interviewed them to identify pain points.


4

Education

Responsive Web Design was entirely new for this company. Educated the various

stake holders on various aspects of responsive web design, and how it is much more

beneficial than their current desktop only approach.

Demographics

✓ Creating a common vision

✓ Defining Business requirements

✓ Gathering insight

✓ Sketching and White boarding

✓ Generating ideas

✓ Establishing Design Goals

Workshop

Business Owners

Marketing

Dev Team

UX Designer

QA

Project Manager


4

Usability Testing

➢ Qualitatively understand the user experience of Loan Origination pages.

➢ Gain qualitative feedback on the responsive test site’s navigation, communication, and user interface to ensure an intuitive, user-friendly experience

and to identify any opportunities for improvement.

➢ Click through prototypes were developed in Axure.

Demographics

➢ 2 Current & 3 Targeted Customers

➢ All Users considered using a short-term emergency loan in the future.

➢ Targeted Customers described themselves untracking their loan status.

➢ Respondents most frequently used their mobile devices for accessing the internet.

➢ 5 Women & 3 Men

➢ 3 African Americans, 4 Caucasians, 1 White

➢ Ages 18 -65


4

Agent Call tracking

Application 1003 grouped with

sections

All recent activities

Customer Satisfaction

dynamic icons

All open tasks display here to

execute

Organized Widgets

Organized Loan Stages


4

Top Banner (High-level information)

Displaying steps by step process

and status of each steps

Graphic view of customers scores

All Completed Assignments

All Open Assignments with colored

legends

Create Leads at any time

Left Navigation Menus


4

33UX PROPOSALS

Widows based legacy screens Modernized Native Mobile app

All functionalities in one single page with non-

scrollable.

34UX PROPOSALS

35OTHER SAMPLES

36OTHER SAMPLES

37OTHER SAMPLES

38OTHER SAMPLES

39OTHER SAMPLES

THANK YOU

Mobile

469-648-8324

[email protected] email

Cumming, GACurrent location

balumahendra84Skype Name

BALUMAHENDRA RAJASEKARAN · Gurgaon, India Sr. Graphic Designer Chennai, India Art Specialist...

Documents

Transcript of BALUMAHENDRA RAJASEKARAN · Gurgaon, India Sr. Graphic Designer Chennai, India Art Specialist...