A showcase of my work at CEB; this is only a snapshot of what I did. I was involved in a lot more projects than seen in this portfolio.

1. PORTFOLIO
UX Specialist
Bhuvana Narayanamurthy, PhD
Portfolio 2015
bhuvana.murthy@gmail.com
Cell: 202-615-1235
www.linkedin.com/in/bhuvananarayanamurthy

2. The Ingredients of a Good User Experience

3. Contents
The Ingredients of UX Process Page #
Consistency in UI: Style Guide
Accessibility Compliance: Style Guide
Accessibility Compliance: Designs
Reduced Cognitive Load
Visible Content Areas
Responsive Design
Easy Data Consumption: Dashboards
Faceted Search
Usability Testing & Research
Conclusion
1
2
3
4-5
6
7-8
9-10
11
12
13
Note: Due to space constraints basic artifacts like Personas, User Journeys, Test Protocols and Test Scripts are NOT showcased here.

4. Consistency in UI: Style Guide
Style Guide for Talent Central
Created by CEB Talent Central Team
Date May 27th, 2015
Version
:
:
:
2.2.1
Main Colors
Section II: Colors
Reports
Progress Bar
The colors used for reports are a set of special colors
developed for Talent Central. They are not part of CEB branding
guidelines.
RecommendedNot Recommended
88, 166, 24187, 19, 62 255, 210, 0
127, 214, 247 0, 174,239 10, 63, 107
127, 214, 247 127, 214, 247 127, 214, 247
127, 214, 247 127, 214, 247 127, 214, 247
255,255,255 242, 242, 242 196, 196, 196 138, 138, 140 77, 77, 79 0, 0, 0
Neutrals
Primary Actions
(color in the middle is Primary Blue)
Supportive Actions
(color in the middle is Primary Mint)
Skipped/Incomplete Actions
(opposite of primary actions)
(color in the middle is Primary Gold)
Primary colors can be used in a“standalone”manner. The darker and lighter shades can be used ONLY
along with the primary color of the SAME family. E.g., use dark/light blue ONLY with primary blue.
Style Guide for Talent Central
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
1
To develop consistency in the Ui of the application
Need
Process
Analysis of existing assets, including past work by a
Design Studio
Extensive interviews with stakeholders on the
product team and UI development team
People
Product Team
UI development team
Created a Style Guide
Solution
Managed all its subsequent versions single-handed-

5. Accessibility Compliance: Style Guide
Accessibility Styles: Black/White
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
Accessibility Style Guide: White on Black
Accessibility Styles: Off-White/Black
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
Accessibility Styles: Yellow/Blue
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
2
The product required Accessibility Compliance; no
standards existed before I started on the project
Need
Solution
Created Style Guides for the 3 most commonly used
contrast options
Managed all the subsequent versions single-hand-
Process
Conducted discussions with National Agencies like
the American Federation of the Blind
Worked with a UK based firm to ensure
Accessibility standards
Did extensive research on WCAG 2.0 standards and
508 requirements
People
4 National Agencies
A UK-based firm
WebAIM

6. Accessibility Compliance: Designs
13 of 20
Forestry Department
(Pine Plantation Area)
45m
Test Time Remaining
0 10 20 30 40 50 60
0
5
10
15
Year
Pine Plantation Area (000s of hectares)
13.2 16.5 16.9 5.2
1.0
13.8 17.5 17.3 6.1
12.5 19.7 15.7 6.9
11.7 20.3 16.5 6.9
1.3
1.0
2.2
Seedlings (0-2 years)
Maturing (7-20 years)
Old-growth forest (50+)
Saplings (3-6 years)
Harvestable (21-50 years)
Accessibility Help Exit
3
Requirement to implement Accessibility principles in
charts and graphs
Need
Created three sets of designs for charts/graphs and
tables to accommodate the three contrast options
Solution
People
A UK-based firm
Process
Chose web-compliant colors and tested them using
online contrast checkers
Created patterns to go with those colors to be used
in charts and graphs
Had the designs vetted and approved by a
UK-based firm

7. Reduced Cognitive Load
Before
4
Users found the Create Project process difficult to use
and navigate through because:
Need
The workflow was non-linear; it created confusion
around how one part was related to another
There was too much white-space; the information
was too spread-out; made it difficult for users to
understand how everything fit together
The“Save”button was named“Create Project”. So
users did not understand whether they were saving
a project or not

8. DashboardCreate New Manage ReviewHome Page
Search Site
English - US
AlertsTasks
99+ 99+
SELECT PRODUCTS
Total Number of Units Available: x
How would you like to select your products?
RESULTS SELECTED PRODUCTS
Total Number of Units Selected: b
1. Get from previous selections
Assessment Profiles
Recently Used Products
Job Profiles
NextSelect More Products
Individual Products
Functional Talent Audit
LIST VIEW
Advanced Search
Job Profiles
Job Profile 1
Assessment Profiles
Customer Service B2C
Functional Talent Audit
Functional Talent Audit FTA
Recently Used Products
Report 1
Select Products Invite Candidates Finish
© SHL 2014, a part of CEB - All rights reserved Accessibility | Privacy | Contact Us | CEB.SHL.com | Support
After
5
Proposed a 3-panel, stepped navigation approach that
guides users through the process; the solution
addressed all the problems identified.
Solution
People
Internal testers
Process
Conducted usability testing, recorded the screen
movements with audio
Shared the results with the product and
development teams
Proposed solution based on Communication princi-
ples and Psychology

9. Visible Content Areas
After
Before
6
The main navigation did not layout the features of the
product well.
Need
Proposed a solution that makes the different features
of the product visible on the main menu
Solution
People
Internal testers
Process
Referenced expert recommendations such as those
of the Nielsen-Norman group
Used feedback from Usability Testing conducted
internally
Used Axure to create a prototype

10. Responsive Design
© SHL 2014, a part of CEB - All rights reserved
Before you start, you may want to Understand More About Assessments.
You have 7 assessment(s) to complete by 7-30-2014.
Assessment Name Task Time NeededStatus Time Allowed What You Need
Assessment Home
Assessment Name Task Status Time Needed Time Allowed What You Need
.NET Framework Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Accounts Payable
Assessment
Assessment
Assessment
Assessment
Assessment
Not Started
Not Started
Not Started
Not Started
Not Started
Not Started
Not Started
28 minutes
20 minutes
21 minutes
36 minutes
34 minutes
27 minutes
30 minutes
20 minutes
90 minutes
6 minutes
6 minutes
15 minutes
English - US
Help Accessibility Profile
Calculator
Calculator
Calculator
Calculator
Calculator
7
Content display for responsive design involved show-
ing all content, cluttering smaller interfaces; needed to
make content decisions.
Need
Proposed a solution that shows selective content
Solution
Process
Worked closely with the product manager for this
product
Used UX Best Practices & Communication
principles to decide what content to focus on
People
Product manager for the product

11. Prepare for Responsive Design
English - US
Help Accessibility Profile
Assessment Home
Before you start, you may want to Understand More About Assessments.
You have 7 assessment(s) to complete by 7-30-2014.
Assessment Name TaskAssessment Name Task Time Allowed
.NET Framework Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Accounts Payable
Assessment
Assessment
Assessment
Assessment
Assessment
20 minutes
90 minutes
6 minutes
6 minutes
15 minutes
© SHL 2014, a part of CEB - All rights reserved
Designed by: ZQ | www.designbolts.com
Free Vector (.ai, .eps)
Mock Up
5
English - US
Help Accessibility Profile
© SHL 2014, a part of CEB - All rights reserved
Assessment Name Task
.NET Framework
Accounts Payable
Assessment
Assessment
Assessment
Assessment
Assessment
Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Take Assessment
Assessment Home
Before you start, you may want to
Understand More About Assessments.
You have 7 assessment(s) to complete by 7-30-2014.
Accessibility | Privacy | Contact Us | CEB.SHL.com | Support
8
Result
Content reworked for tablets
Content reworked for smart phones

12. Easy Data Consumption: Dashboards
Before
9
Need
Reports from legacy system needed to be re-imagined
for dashboards
The data was designed to be printed out as a report
in a .pdf format; needed to be reworked for a digital
interface
The data visualization did not follow current best
practices; it needed to be updated to reflect them
The design needed to be reworked to follow brand-
ing guidelines

13. ManageHome Page Create New Run ReportsDashboard Configure Reports
Search Site
© CEB 2015 - All rights reserved Accessibility | Privacy | Contact Us | CEB.SHL.com | Support
My MTM Course Performance & Impact Instructor Performance Process Effectiveness New
Overall L&D Performance (2014)
Year 2014
AverageRating
Net Promoter Score
-31%
+100-100 -31 0 50
Detractors
Passives
Promoters
0 50 100
56%
19%
25%
L&D Scorecard
Factors Current Rating
Return on Investment 4.1
Satisfaction 6.1
Learning Effectiveness 4.5
Job Impact 4.2
June 19th, 2015
Problem Courses: Job Impact
Trend (Last 12 Mo.)
.NET Fundamentals 3.4
.NET Advanced 2.6
MS Office 2.5
JAVA Advanced 2.3
PRINCE 2 5.1
Current RatingCourse Name
Show more
Job Impact by Business Unit
Business Unit Current Rating
Finance 4.2
Sales 4.5
Product Management 6.1
Engineering 3.2
HR 3.9
Show more
Current Rating
Problem Instructors: Job Impact
Instructor Trend (Last 12 Mo.)
Sean Larson 4.2
Jim Torbent 2.3
Sheila Mason 2.5
5.1
Eva Carmichael 5.1
1
3
5
7
DecNovOctSepAugJulJunMayAprMarFebJan
Benchmark = 6.0
Scrap Learning
Benchmark = 25%
6%
Scrap Learning percentage
is excellent!
After
10
Created 4 pre-configured dashboards for 4 different
user personas
Solution
Process
Created 4 different user personas based on
discussions with client-facing experts
Adapted Stephen Few’s ideas of Data
Visualization
Used my own expert knowledge of data and analy-
sis
People
Product manager for the product
Data Visualization expert

14. Faceted Search
Before
DashboardManage ReviewHome Page Create New
English - US
AlertsTasks
99+ 99+
Search Site
Projects to Review
Refine Your Results
Favorite Projects Created ByStatus
Search all results
Refine By:
Archived Created Deadline Date
Passed
Draft Projects In Progress
Search all results
First Name1 Last Name1
First Name2 Last Name2
First Name3 Last Name3
First Name4 Last Name4
Project Tags
Search all results
Location
Loc1
Loc2
Loc3
Products
You Selected: Status In Progress Created By FirstName2 LastName2 FirstName4 LastName4 Project Tags Location: Loc2
Search for projects to review
After
11
The filters section of Project Creation and
Management had dropdowns that had a long list of
items, sometimes running off the page; the
selections were displayed within the dropdown input
box
Need
Proposed a design for Faceted Search with a
dedicated section to display selections
Solution
People
Product manager for the product
Process
Used materials from UXPA 2015 Conference
Referenced Nielsen Norman Group’s
recommendations
Conducted online research for design inspiration
Created paper/pencil sketches to iterate

15. Usability Testing & Research
12
The existing design decisions had to tested to make
sure that the user experience was intuitive. But access
to the customer base was still in the process of being
worked out.
Need
Used internal users to conduct usability testing.
Solution
Process
Created test protocols and test scripts
Conducted testing, captured screen movements
through Camtasia Studio
Shared results with stakeholders
Created paper/pencil sketches to iterate
People
Product managers
Participants from various functions within the orga-
nization

16. Conclusion
for a GREAT User Experience!
13
UX ingredients such as those discussed above
are absolutely essential