1. 123Greetings abhijit das I user researcherabhijit das
Some snippets of my work on UI architecting using
UCD principles
Abhijit Das
2. 123Greetings abhijit das I user researcherabhijit das
Sunlife Insurance Monitoring Application
01
3. 123Greetings abhijit das I user researcherabhijit das
TASK
An internal application to monitor insurance flow. The Investigative Services Unit of Sunlife needs to identify and monitor fraud cases at member,
claimant and provider levels.
Unfortunately, the existing provider database will not meet the needs to accomplish their goal, therefore, a new provider database and user
interface was required. The interface should provide functions to assign various status to different levels of facilities. It also need to be
accompanied by a admin panel to power user privileges.
METHODOLGY
In order to showcase a design solution, for which we followed the below methods:
•Questionnaire: This will help us in identifying the needs of users on broad level, depict overall approach for GUI including branding, navigation,
workflow and style guide. Questionnaire should be address by stake holders or end users. Carrying this activity required on-site coordinating and
client conf calls with other experts at offshore.
•Prototyping: This is broadly divided into two parallel activities, low fidelity and high fidelity prototyping. We need to analyze if we have enough
bandwidth to perform both the activities. Here low fidelity was achieved as paper prototyping during several brain storming sessions and later
translated to high-fidelity was achieved by Visio based skeletons that depicts the work flow of application, page level details.
•Visual Design: Based on the High-fidelity prototyping which evolved out of the many iterations we derived the Visual Designs of the screens.
Since iterations where much handled in the previous process, thus this step we went further on and started preparing the visual guidelines in
adherence with Sunlife Branding Guidelines.
•Heuristic Testing: Heuristic testing will help us in understanding the % satisfaction of users we have achieved by the proposed GUI. It’s a sort of
expert review/evaluation where users/stake holders give their ratings to different categories. Categories include Visual Design, Workflow,
Information Architecture, User Experience, and Navigation. Outcome of this activity is a graph that will depict the end user feedback and areas of
improvement if any.
•UI Standards & Guidelines: In continuation with the Visual Guidelines we set the complete UI guidelines, which were later adhered to achieve
the front-end production of the application, this will explain the UI standards and guidelines of the application that can will be always in use by
technical team in coding phase too.
Artifacts
-Questionnaire
-Wire-frame mock-ups
-Visual Designs
-Heuristic Evaluation
-UI Guidelines Doc
5. 123Greetings abhijit das I user researcherabhijit das
Screen
Below is a screen to show the functionality of a search screen of the application, this was derived during the business analysis stage.
6. 123Greetings abhijit das I user researcherabhijit das
Prototyping
On the basis of the business requirement document, we took upon the UI analysis and start prototyping various screen
flows. Iteration are handled the best in this process.
Below is the search screen – derived depiction of a task flow analysis
Low fidelity is most efficient for finding & resolving problems, but high fidelity is most effective for persuading stakeholders.
14. 123Greetings abhijit das I user researcherabhijit das
Heuristics Analysis
Heuristics evaluation is a metrics driven fact sheet and is based out of Jacob Nielsen’s 10 Heuristics points
16. 123Greetings abhijit das I user researcherabhijit das
Prototyping
On the basis of the business requirement document, we took upon the UI analysis and screen prototyping using paper
prototyping and later translating it in to wireframes using Balsamiq
Below is a login screen design with forgot password functionality.
17. 123Greetings abhijit das I user researcherabhijit das
Prototyping
Below is one of the main screen of the application, which is the patient search screen
18. 123Greetings abhijit das I user researcherabhijit das
Visual Design
Translations of the basic wire-frame mock-ups into visual design
19. 123Greetings abhijit das I user researcherabhijit das
Visual Design
Translations of the basic wire-frame mock-ups into visual design
20. 123Greetings abhijit das I user researcherabhijit das
Visual Design
Translations of the basic wire-frame mock-ups into visual design
21. 123Greetings abhijit das I user researcherabhijit das
StarTrac – a Business Tracking Application
03
22. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting
23. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting
24. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting
25. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting
An example of a Current data entry screen
26. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting
View of Dashboard screen for Integrators
28. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting (design as per citimortgage site
launched in end of 2006)
Below is the homepage screen, which was derived after working over with a lot of the UCD methodologies. Below is a sample view of the homepage screen
depicting a before and after scenario.
Before After
29. 123Greetings abhijit das I user researcherabhijit das
Some other sample screens after UI architecting (launched in end of 2008 and design
still continuing with minimal changes)
Below is the homepage screen, which was derived after working over with a lot of the UCD methodologies. Below is a sample view of the homepage screen
depicting a before and after scenario.
Before After
31. 123Greetings abhijit das I user researcherabhijit das
Worked on developing parts of significant change which Chase brought about in public domain by changing their homepage and revamped their branding.
Many internal pages of Chase are still being developed as continuous process
www.chase.com
32. 123Greetings abhijit das I user researcherabhijit das
Banking industry is strict with privacy so many of my work goes within their secured environment and are hard to project them in
public.
Unless you are one of the customers of Chase bank, thus will enable you to view some of my application design.
The following below is login screen of JP Morgan Online Banking or private banking.
34. 123Greetings abhijit das I user researcherabhijit das
Some thoughts on UI architecting using UCD principles
Making software with keeping 5 main goals in mind is very important as it determines the success and failure of the software:
•the ease and efficiency of using the product;
•the learnability of the product;
•the memorability of using the product;
•error handling in the product; and
•satisfaction and emotional value in using the product
The Returns on Investment (ROI) that accrue from a engaging user experience process in software product can increase productivity up to
160%, decrease drop-off rates in e-commerce up to 150% and reduce internal training costs up to 100%
This diagram describes the need and involvement of user experience management from the discovery or the inception
phase of a product life cycle. The user experience runs parallel along with the product cycle and monitors it and analyses
it continuously and thus keeping that human factor alive in the whole development.
35. 123Greetings abhijit das I user researcherabhijit das
Some thoughts on UI architecting using UCD principles
The type user experience process can be engaged according to the need and the requirement and also the phase in which the
software development cycle is currently in; from the discovery or the inception stage right up to the delivery stage and also after
it the user experience can be involved. In various stages, user experience process involves various tasks in it, as for example
(note: describing in brief, elaborate description and process is not shown in details)
•Discovery or Inception phase: it involves
a)User understanding
b)Target audience analysis and focus group
c)Interviews and questions
d)Task flow analysis and data analysis
e)Heuristic evaluations
•Prototyping Phase
a)Sketch, rough design over visio etc
b)Visual designs
c)UI testing and observations, which can again involve step A mentioned above
d)Low level and high level designs
e)Design documentation and standardization
f)Usability testing
a)Development
a)Complete html with css, adhering to standards
b)A clickable prototype
c)Accessibility and other testing
•Testing and Delivery
Feedback gathering keeps on going even after delivery for user experience group to gather information on the released product, so that
the next phase or version can be built on those feedbacks.
Thus product development without the involvement is user experience in current software development cycle is like baking a bread without
putting yeast in it, it will not be liked by the people who use it or they will take it initially but it will not last.
