Diploma Project Re-designing Application Lifecycle Management:
Maintenance Planner Sponsor: SAP Labs Pvt. Ltd.
Volume: 1 of 1 STUDENT: VARENYA RAJ PROGRAMME: Graduate Diploma Programme in Design
GUIDE: RUPESH VYAS
2014 Communication design faculty (Graphic Design)
National Institute of Design Ahmedabad
The evauluation jury recommends for the
VARENYA RAJ Diploma of The National Institute of Design In Communication Design (Graphic Design)
herewith, for the project titled
Re-designing Application Lifecycle Management:
Maintenance Planner On fulfilling the further requirement by *
Chairman
Member 1
Member 2
Member 3
Member 4
*Subsequent remarks regarding fufilling the requirements
Registrar (Academics)
ORIGINALITY STATEMENT I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain substantial proportions of material which have been accepted for the award of any other degree or diploma of any other educational institution, except where due acknowledgement is made in this diploma project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledgement. I further declare that the intellectual content of this Diploma Project is the product of my own work, except to the extent that assistance from others in the project’s design and conception or in style, presentation and linguistic expression is acknowledged. This diploma project (or part of it) was not and will not be submitted as assessed work in any other academic course. Student Name in Full: Varenya Raj Signature: Date:
COPYRIGHT STATEMENT I hereby grant the National Institute of Design the right to archive and to make available my diploma project/thesis dissertation in whole or in part in the Institute’s Knowledge Management Centre in all forms of media, now or hereafter known, subject to the provisions of the Copyright Act. I have either used no substantial portions of copyright material in my document or I have obtained permission to use copyright material. Student Name in Full: Varenya Raj Signature: Date:
Redesigning Application Lifecycle Management:
Maintenance Planner
Copyright © 2014 Student document publication, meant for private circulation only. All rights reserved. No part of this document will be reproduced or transmitted in any form or by any means, electronically or mechanically, including photocopying, xeroxography and videography recording without the written permission from the publisher Varenya Raj, SAP Labs India and the National Institute of Design. All photographs and illustrations in this document are copyright © 2014 by respective people/organizations. Edited and designed by: Name: Varenya Raj E-mail: varenyaraj23@gmail.com, varenya.nid@gmail.com Processed at: National Institute of Design (NID) Paldi, Ahmedabad – 380007 Gujarat, India http://www.nid.edu
Non-disclosure statement As an intern at SAP Labs India, I have signed a non-disclosure agreement bond whereby any information related with the project shall be protected and the content of the document shall remain confidential with NID till its completion.
Acknowledgement Thanks to SL team at SAP Labs Pvt. Ltd. for providing me with a wonderful opportunity and showing faith in me throughout the project. I could not have imbibed meaning about the project without the help of colleagues like Sunny, Niraj, Jerin, Mani, Mithul and Arvind. I would also like to thank Mr. Biju Balasubramaniam and Mrs. Priti Dhighra to hand me this project. All the team members for their feedback and encouragement. Thanks to Mr. Rupesh Vyas, my project guide, and faculty at National Institute of Design, Ahmedabad for his timely and valuable feedback. His interventions gave me the right direction in the project. Thanks to my discipline co-ordinator, Dr. Tridha Gajjar and other faculty members. Mr. Suresh Immanuel for his critique which helped me introspect what I did. Thanks to Anwesha, Akshay, Divesh, Rakesh and rest of the batch mates for their support and feedbacks. Thanks to my family for their emotional support and love.
contents 1/ 2/ 3/
Setting foot
about NID
14
about SAP
16
synopsis
18
why this project
20
project brief
22
what, why and who about ALM
24
Undestanding
placing myself into the frame
32
the context &
re-briefing
34
research
case studies
36
heuristic evaluation
40
Primary
user survey
44
study
usability test
46
personas
52
scenarios
54
non graphical solutions
58
4/ 5/ 6/
Design
Design process
62
concepts
why is exploratory option selected
72
Execution &
design development
76
testing
SAP guidelines
90
the application
94
comparisons
100
usability
108
corrections
112
reference
116
appendix
118
epilogue
120
Conclusion
1/
Setting foot
about NID about SAP synopsis why this project project brief what, why and who about ALM
about nid // unveils why the insitution is a part of the esteemed class The National Institute of Design (NID) is internationally acclaimed as
In NID, the objective, learning value
one of the foremost multi-disciplinary institutions in the field of design
and standard for each course are
education and research. The Business Week, USA has listed NID as one
predetermined, but the context and
of the top 25 European & Asian programmes in the world. The institute
relevance is repositioned by the
functions as an autonomous body under the department of Industrial
faculty depending on the changing
Policy & Promotion, Ministry of Commerce & Industry, Government
realities of the design profession and
of India. NID is recognised by the Dept. of Scientific & Industrial
the level of professional competence
Research (DSIR) under Ministry of Science & Technology, Government
achieved and demonstrated by the
of India, as a scientific and industrial design research organisation.
each group of students.
NID has been a pioneer in the industrial design education after
To provide interdisciplinary and
Bauhaus and Ulm in Germany and is known for its pursuit of design
progressive knowledge of design but
excellence to make Designed in India, Made for the World a reality.
with a focused understanding of an
NID’s graduates have made a mark in key sectors of commerce,
area of specialisation suited to the
industry and social development by taking role of catalysts and through
professional design practice.
thought leadership. Brief history–The establishment of NID was a result of several forces, both global and local. The late 1950s saw a confluence of these forces, and this time would be a significant one for Indian culture and education. This was a time of reappraisal and reconstruction in a newly independent India. A young nation was confronted with the mammoth task of nation building, of balancing age old traditions with modern technology and ideas. The Modern Movement, the philosophy of Machine Aesthetics, and revolutionary experimentation in the arts, architecture and design were all taking place at the same time. There was a search for the Indian identity across all aspects of life.
Varenya Raj / Diploma Document
14
15
about sap // few insights about the enormous organisation SAP is a world leader in enterprise applications in terms of software
Intimidation because of the size of
and software-related service. SAP Labs India is SAP’s second largest
the company was expected when you
Research & Development centre in the world and one of the fastest
come from a small place though it
growing SAP subsidiaries.
has held its name for over a decade than the company has. I was not very
Founded in November 1998, SAP Labs India is one of the four global
popular in my small place (actually in
development hubs (others being Germany, US and Israel) of SAP
my batch, I was) but seeing so many
that contribute to all areas of the SAP product value chain-Research
people when you look around makes
& Breakthrough Innovation, Product Development, Global Services
you think and question if you are a
& Support and Customer Solutions & Operations. SAP Labs India
little fish in big pond.
researches, designs, and delivers leading-edge software applications that enhance and extend SAP solutions, and is recognized within the SAP global organization as one of the prime contributors to innovation, quality and service. As a Global Services and Support organization, Labs India has the largest production team outside Germany providing assembly, validation and test services, and is credited as being the largest testing center within SAP. Accounting for close to 50% of SAP custom development, Labs India also provides remote maintenance services to approximately 80% of North American customers. SAP’s eight Labs in different countries are industry role models for globally distributed development organizations and contribute heavily to the goals of SAP’s business units. Bridging the gap between local market demands and SAP’s development organization, SAP Labs has set standards for excellence in innovation, efficiency, and reliability.
Varenya Raj / Diploma Document
16
17
synopsis // what I did
The project was to re-design Graphical User Interface (GUI) for an application lifecycle management tool called Maintenance Planner. Its an online on-demand application to visualise and maintain a landscape of systems at SAP’s client end. The project dealt with handling large quantity of data to be interpreted and converted into a tangible and meaningful resource for the users. Maintenance planner (earlier called Landscape Planner), as the name suggests is a tool for planning—in this case, is huge number of systems. The project involved critical analysis of the existing tool, detect flaws, conceptualise and propose changes with solutions. Solution in my case were not just UI mockups but proposal for implementation of changes in the few areas of the whole system in which this application worked. I spotted a window for a role beyond GUI when I undertook a holistic observation of the entire system and chain of tools which Landscape planner is connected with or responsible for. I followed a linear process for my design interventions which sometimes ran back and forth as per the needs of the work. My design approaches were out of their design guidelines book. However I was reassured that the needs of the clients were more important than catering to their guidelines. Since I had done my user research pretty decently, I backed up my design interventions with adequate reasonings. The precursors for executing my ideas were equally as important as the ideas since it took me through a thorough background study of the organisation, its products, the existing state of project. I followed these up with heuristic evaluation, failed attempts at competitor analysis, user survey, usability research, initial ideas/explorations, scenarios and personas, wireframes, mockups, usability and refinement.
Varenya Raj / Diploma Document
18
If looked at the project holistically, a filter can describe the project in a metaphor. In the synopsis, I have tried filtering the information in as less words as possible too.
why this project? Hidden within my consciousness is an insatiable desire to test my limits. As a student, one does take up hypothetical projects at NID, which are huge, but working on application lifecycle management is beyond conceiving. Though I had my apprehensions, I decided to go forward with this project. I applied for the project and grasped a vague idea about what it could be from the description provided in the mail. The ambiguity about the project presented a strange opportunity to me which appeared to have ingredients of learning, success or failure. Since I had never worked with
people other than those belonging to design background, I had no idea what was coming my way. One of the biggest motivations for me to go for this project was my belief that the fruits of design interventions should reach beyond the boundaries where people already practise or are aware about design. There was something which Mr. Suresh Immanuel, who was my guide during my first classroom project, taught me and I have always remembered what he said, “You should not fear taking challenges as at most, you might fail but remember how much you will learn from it.�
project brief // what I was suppose to do
Varenya Raj / Diploma Document
22
Brief from the client Objective
The objective of the assignment would be to help design responsive user interfaces for SAP Cloud & Lifecycle. Management tools/applications cross locations being part of the team/ area in India. Define a responsive design solution for SAP LM Software Logistics tools/applications.
Expectations
Conduct user research, define persona, document the ‘day-in-life’ scenario of the users. Create wireframes, validate with end-user. Create high-fidelity mock-up based on SAP branding and interaction pattern guidelines. Review the actual implementation based on HTML-5
23
What is an enterprise application ? // an attempt to understand and explain the unseen process behind daily products and services we use
An enterprise application is the term used to describe applications or softwares that business uses to assist the organisation in resolving enterprise problems. They describe a collection of computer programs with common business applications, tools for modeling how the entire organisation works, and development tools for building applications unique to the organisation. Enterprise level software aims to improve the enterprise’s productivity and efficiency by providing business logic support functionality.
Following are its type: Enterprise resource planning–they provide core
Content management system–allows publishing,
business processes often real time. These system track
editing, modifying content, organising, deleting as well
business resources like cash, raw materials, production
as maintenance from a central interface and keep a
capacity, the status of business commitments like
track of the activities.
orders, purchase, payroll. Enterprise asset management–deals with the whole Customer relationship management–helps in managing
life optimal management of the physical assets of an
a company’s present and future costumers using
organisation to maximise values.
technology to organize, automate and synchronise sales, marketing, customer service and technical
Database management system–designed software
support.
application that interact with the user, other applications and the database itself to capture and
Business intelligence–they are responsible for
analyse data.
transforming raw data into meaningful and useful information for business analysis purposes. They deal with unstructured data to help and create strategies for business operations in present and future.
Business process management–a management discipline that focuses on impressing corporate performances by managing and optimising company’s business processes.
Varenya Raj / Diploma Document
24
What is application lifecycle management ? // explanation of what keeps huge application on check
Application Life cycle Management is the continuous process of managing the life of an application software. It encompasses requirements management, software architecture, computer programming, software testing, software maintenance, change management, continuous integration, project management, and release management. It is mainly broken down into three segments: Governance, development, and operations—are tightly connected to one another. Doing all three well is a requirement for any organization that aspires to maximize the business value of custom software but this isn’t an easy goal to achieve. Each of the three is challenging to get right on its own, and so getting the combination right is even more challenging.
Support Portal LMDB Maintenance Planner
SLD
Maintenance optimizer
Techical system
SUM / SWPM
Diagram of Application Lifecycle Mannagement: Maintenance Planner
SAP side Explorations made to depict the lifecycle during the project..
Customer side
25
Who uses this application ? // operational information and roles
The hierarchy of the target audience is slightly flexible depending on the enterprise’s policies and what the products are bought for. The application is based on business-to-business (B2B) model whereby the benefits of this application are not directly shared with its users but the customers like us. Using such applications can be very difficult considering the complexities of the landscape. Therefore for using these applications, the concerned people are trained for few months so that they can operate the application as per the needs. Since mistakes can cost into loss, which sometimes might eventually lead to losing the job. The operations are very meticulously performed. In a large enterprise, there are two kinds of position who are responsible for this application. These are: 1. Information technology architect–they are responsible to integrating their IT expertise with business understanding to yield most profit for the company. 2. Basis architect–they are solely responsible designing landscape, securing, configuring and simplifying them.
Varenya Raj / Diploma Document
26
SAP B2C: Business-to-client B2B: Buiness-to-business B2B
B2B
Apple Inc (client #1)
B2C
Gautam (customer #1)
Adobe (client #2)
B2C
B2C
Ram (customer #2)
Shyam (customer #3)
Business-to-business (B2B) describes a commerce transaction between two organisations whereby one organisation makes a set of products which are necessary for the other organisation to help in manufacturing their products. For example, Apple will have SAP ERP products at their premise to facilitate the manufacture of their products like computers and phones. This makes it very clear that the products manufactured by SAP will not tbe required by end users like us but are boon in the process of manufacturing the products which we would eventually use like computers.
27
Why is this application needed ? // narrates how it make life easier
Since the systems (landscape) are interlinked due multiple number of SAP products running on each system, dependencies are created for effective management of business processes. Although interlinking the systems together eases the flow of work but maintaining each system configuration of SAP product becomes very difficult. Also making or implementing a change in a system effects other systems and sometimes can lead to downtime of the interlinked systems if the changes done are not compatible. This is where Maintenance Planner comes into the picture. It takes care of configuring the systems and provides a simulation of the impact of the connected systems if the changes are made onto one of them. Besides this, it provides a visualisation of the landscape for the users to take an informed decision.
When a SAP product is installed, it is shared by multiple systems to distribute the load for effciency. This enables different functionalities of a product onto different systems so that in case of downtime of one system, other functionalities do not get affected. The number of system dependencies can vary anywhere from two to six.
Varenya Raj / Diploma Document
28
In order to meet the requirements for which the new functionalities are added, the changes in functionalities are thoroughly tested before they are implemented in the systems which are directly resposible to the end users. Hence they are clustered in segements like development, quality and production (atleast). This diagram shows how systems are connected in a track. The new functionality passes through each segement before it reaches the production stage.
I have depicted connectivity of systems in the tracks as well as product dependency. A bird eye view of how the landscape of system are wired with one another. There are around seventy systems shown here and the count can go to three thousand systems making the landscape very choatic and complex to maintain. This is where Maintenance Planner comes into the picture.
main system dependent system track product dependency
29
2/
Understanding
placing myself into the frame
the context &
re-briefing
research
case studies heuristic evaluation
placing myself in the frame Researching for my project and understanding the domain of work for nothing less than a month manifested into a clearer picture about the company and the work involved. I knew what I had to do but was unaware about the way to do it. This was the time when I had ask myself few important questions. Priti Dhigra, manager of SOLMAN team organised an appointment to discuss the work in progress and clear any doubts which I had. The meeting proved
first meeting
to be revelation for me which made me realize the low expectation of “beautifying” the interface which she had in mind. Clearly that wasn’t the sole purpose why I accepted the project. This followed with a lunch meeting with Mr. Biju who chalked out the boundaries of freedom for the project and the extent I could take it to. The take aways were
second meeting
quite relieving as he assured that I should not limit my creativity with what is technically possible and its feasibility will be assessed after I what I put foreword to the team.
Shivani’s illustration of me in a frame for our Illustration course in 2011.
Varenya Raj / Diploma Document
32
What is expected What expected me ? from ?me What isWhat expected What What What isisfrom expected is isexpected from is expected expected me from ?me from from from me ?meme ?? ?
Am I afree to explore and propose Am Am Am I Am Ifree free I free I to free toexplore to explore toexplore explore and and and propose and propose propose propose solutions outside the paradigm of SAP ? solutions solutions solutions solutions outside outside outside outside the thethe paradigm the paradigm paradigm paradigm ofofSAP of SAP ofSAP SAP ?? ? ?
Will Ibe be guided throughout Will Will IWill be Will I Will be guided I Ibe guided guided throughout throughout throughout throughout I guided be guided throughout the journey ofproject project ?? ? ? ? thethe journey the the journey journey journey of the of of the ofthe the the project project project ?project the journey of the
re-briefing // introspection for better understanding
The first month of the research have been crucial in shaping the direction of the project. It helped me understand a broad overview of the scope of work and define my role. In the existing tool, there were functionalities which were not understood by the users and the team wanted a lot more functionalities added on top of it. The application was going through a transition where they wanted to set out and promote this application to their clients. The only problem was, it wasn’t ready yet. During this time, SAP conducted a faculty day where they invited professors from the institutes across the country. I was fortunate enough that my guide, Mr. Rupesh Vyas accepted the invitation to come. His visit happened to be quite a revelation for me. He suggested me to not only to look at the problems in specific but also take a holistic overview of the system and understand the structure and interrelations between specifics. This gave way for me to take a step back and look into the project from a different perspective.
Varenya Raj / Diploma Document
34
Company’s expectations: My expectations: Guide’s suggestion:
beautify the application
enhance the usability of the application
understand the system and take decision
casestudies // how it is been used by others A case study is a descriptive, exploratory or explanatory analysis of a person, group or event. An explanatory case study is used to explore causation in order to find underlying principles. Since the competitors do not have very similar application such as Maintenance planner, it got bit difficult to to do a competitor analysis. However my patience to find out did pay some dividend as I got to know few Application lifecycle management tools but dealing with applications which were very different to SAP’s. Though being different, they proved to be of some help in the areas which I had not been observed before. While doing the study, I also happen to explore the different domains in which such application can come into use and realised its potential.
Varenya Raj / Diploma Document
36
hp ALM administration section sub-category of the main funtion
main function
collaspasable Observations:
section as well as main content
•
Contains interactive main section for connecting portals or systems.
•
Has editable content generating feature.
•
Icon and text are combined.
•
Sections for operations are clearly defined.
•
When necessary, a pop-up appears with a diagramatic explanation of
page
the data.
37
IBM Rational solution
contextual functions
main section
Observations: •
Main functionality is consistent on the left sidebar.
•
Customised theme for colour.
•
The information provided is very textual.
•
Lacks guidance from one step to the other.
•
Freedom to choose your language.
Varenya Raj / Diploma Document
38
Microsoft Foundation Server main funtion context based functions
help and documentation
Observations: •
The interface is quite clear and lively.
•
The visual language of Microsoft is clearly evident.
•
The look and feel is like a system application.
•
This application is available on premise.
39
heuristic evaluation // assessment of the application by me In order to document the flaws and glitches of the application so that they can shared with the concerned people, I took a heuristic evaluation of the application. It was important to classify and categorise the analysis based on the ten heuristic principles so that it can have a proper structure of reasoning. The process requires that a small set of evaluators examine the interface, and judge its compliance with recognised usability principles. The goal is the identification of any usability issues so that they can be addressed as part of an iterative design process.
10 Jakob Nielsen's HEURISTIC Principles
Visibility of the system status Match to the real world and logics User control and freedom Consistency and standards Error preventions Recognition over recall, memory load Efficiency of use Minimalist and aesthetic design Help and document Help user recognise, diagnose
Varenya Raj / Diploma Document
S R U C W M E M.A H.D H 40
high priority problems
the user is confused about the start point
R E
the number of abbreviations along with labels on the top of a circular diagram creates confusion
S
the main menu is appears unclear due difference in sizes
U
no exit route the only source to recognise problem is by notification without any solution
H C low priority problems
M.A
MW
two screens with the same interface but different functions the screen is cluttered with extra information and filtering information is difficult the notification bar at bottom is hidden the icons are too abstract to be understood.
H.D
the help and FAQ link direct to the same page
surperfical problems
41
3/
Primary study
user survey usability test personas scenarios non graphical solutions
user survey // a matter of interpretation
Meeting the real client appeared like a far fetched vision for me. In order to get the feedback from the user, I prepared a questionnaire. My questionnaire grasped a lot of interest from other team members and they provided their inputs. After going through many topsy turns, I had in my hand a set of eighteen questions. However I felt that the crux of the questionnaire has been changed from what I had in mind due to many inputs. Finally I handed the questionnaire to the product manager who disatched it to the clients. I waited for a week for the response. It swiftly turned into two. My anxiety grew and I asked about the details. I was told that the questionnaire was distributed to just six clients. This left me in a state of numbness and loss of words. I didn’t know what I had to do next. The response from the clients never came.
Varenya Raj / Diploma Document
44
lesson learnt:
you cannot take any decision alone have to be careful that the original idea do not get dissolved hierarchy is given a lot of importance clients are IMPORTANT
45
usability test // concretion over abstraction As they say, persistence pays off. I kept pestering the product manager for client visit so that I can have real client interaction and know about their complains and also take usability test. To validate my finding through heuristics, I could not have asked for anything better. The motive was to check if the findings are not assumptions pulled out from thin air and the real clients go through the same problem which I had penned down. Usability evaluation refers to testing a product or service by testing it with representative users or real users if possible. Typically, during a test, participants will try to complete typical tasks while observers watch, listen and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participant’s satisfaction with the product.
Varenya Raj / Diploma Document
46
Usability team In order for us to organise a session with any team except for the ones at SAP, proved to be more troublesome than I thought. This made my question why it is happened the way it was happened. I could not help but ask the product manager. The answer which I got was quite a revelation for me. I was under the impression that SAP’s client would be very welcoming for the test as it would only help them with better product but this is not how they think. For them, giving away time for usability means time spent with no work, thus no generation of revenue and therefore means waste of time. We manage to conduct usability test at three spots: Deloitte Intel Internal team
*
*
*I was not allowed to take any pictures for documentation purpose.
47
Varenya Raj / Diploma Document
48
Complied usability report with 101 points
49
Varenya Raj / Diploma Document
50
51
personas // stepping into the user’s shoe
A persona is a way to model, summarise and communicate research about people who have been observed or researched in some way. A persona is depicted as a specific person but is not a real individual; rather, it is synthesized from observations of many people. Each persona represents a significant portion of people in the real world and enables us to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals. Personas aid designers to create different designs for different kinds of people and to design for a specific somebody, rather than a generic everybody. It is an effective way to understand the goal and objective, responsibilities. It also provides a brief insight about their life thus enabling us to interpret the co-relation between the personal life and professional life.
Varenya Raj / Diploma Document
52
Name: Ravi Sharma Age: 45 Designation: IT architect Background: Ravi has eight year experience in the company and has moved to Bangalore after he got a job as IT architect at Titan industries. He stays with his wife and kids aged 15 and 17. He likes spending time with his family and tries to give equal time to the work. He is an expert in information technology related work and has his say in the team he works for. Responsibility: •
Integrate technical expertise with the business understanding to yield most profit.
•
Keep the systems up-to-date.
Name: John D’Silva Age: 26 Designation: Basis architect Background: He has 3 years experience in Uniliver and is known for his hard work. In this span of time, he has made decent number of friends and earned admiration of many. Being a bachelor, he finds ample time to work in the office and stays with his friends in a small flat near to the office. Responsibility: •
Designing, securing, configuring landscape.
•
Make dependencies simplified.
•
Keep all the systems up-to-date.
•
Communicate the higher authorities about new upgrades and features.
53
scenarios // seeing the unseen
As part of the project, I decided to make scenarios (unseen circumstances) for the product. Thinking about as many as I could, I started inventing solutions for the same too. As I made multiple solution options for each scenario, I discussed them with the product manager to judge the ones which were most apt. I took the storyboarding approach for better understanding of the people in the team and self clarity. Scenarios analysis play an important role in accessing possible future events. As a designer, my role was more than just catering to the needs
Discussed in placing
on the UI fronts. My attempt was to contribute to all the possible needs
myself into the frame
which could be related the application. Though sometimes it was
section
not possible for me to understand the technical mechanism behind few processes, that acted to my favour to think beyond the technical constraints and rules. Because I was taking a holistic picture of the application, it became evident that only graphical solution could not rescue the application from its state. It needed more assistance. The sum is always greater than its part. In this case, the parts of the system formed a large chunk of the sum. I treated the scenarios as a critical situations for the tool which can arise at any given time without any warning. The major challenge was think within the periphery of the usage of the tool but at the same time not limiting to the redundant situations. I made few solution options for each scenarios and selected the most apt one. Thereafter I made a series of storyboard for these scenarios with proposed solutions.
Varenya Raj / Diploma Document
54
storyboard suggesting for solution related to update
features which should be thought about and added
55
feature related to demo and modelling systems
live status about the on going process
Varenya Raj / Diploma Document
56
features to print and visualise data in an attractive way
ways to understand interconnected systems
57
nongraphical solutions This is a result of a seed sown by my guide, Mr. Rupesh Vyas. When I was explaining him the ecosystem of the application and how it functions, he stressed on the fact to connect the missing dots. A brief talk with him had some implications in the way I saw the things about my project there on. Up till now, I was trying to know as much as possible about the application and the problems related just to that. Now I started giving attention to things which are beyond the role I was expected to do or expected myself to do.
Stack
MobZ
Plan
Landscape Planner
SUM/SWPM SLD
LMDB
SAP portal
The cycle of the processes involved in one session
Varenya Raj / Diploma Document
58
Problem faced SAP has around four thousands products/enterprise solutions in the market and sometimes it appears that they compete with one another. SAINT was in use before SUM (one of the components in the entire process). Though SAINT had some de-merits, the users do not like upgrading their application. This threw a lot of problems for Maintenance Planner. For the same, I tried to resolve this issue with my proposals.
•
The downloadable XML file can only be procured when the
The four points along side are
product version, product instance and software components are
culmination of a research done for
mapped with the internal database (PPMS). Since this feature is
a month. I studied about SAP, the
not possible with SAINT, it should just map software components.
project and other different products. Also I underwent through a rigorous
•
SAINT can be brought to the same level by updating product
analysis of other products which are
version, product instance and software components.
directly or indirectly connected with the project. This gave me a chance
•
With the next update of SUM, SAINT should get downloaded
to look at the entire ecosystem of
automatically after an alert message.
things which fill few loopholes which was costing this application.
•
While checking with customer profile and database (PPMS), update for product version and product instance should happen automatically from SAP end.
59
4/
Design concepts
Design process why is exploratory option selected
design process // time to deliver The inputs from the clients played a vital role in deciding the direction I want to take in the design concepts. There were points which nobody could argue about and I made sure that I considered those points in my design ideas. I let myself loose free from any limitations or constraints. This gave a liberty to exercise my brain’s potential in the most creative manner. Also I remembered what Mr. Biju had told me at the start of the internship. He had mentioned that I should not worry about the feasibility about my ideas and these things should be judged at the later stages. I started with the the user flows so that I can cover all the scenario which probably can take place while using the application. For the design ideas, I made paper mock ups which was later refined in high fidelity wireframes for team members around me to understand and open it for discussion. To understand why I thought of such approaches, it is important to understand the functionality maintenance planner caters to. •
Enables the user to install new product to their system.
•
Update any functionality depending on the needs.
•
Helps to understand their landscape via two modes–product dependency and track dependencies.
Varenya Raj / Diploma Document
62
1. Exploratory in nature I realised the users did not know much about their own landscape hence they were not able to perform any further task. Providing the information about their landscape was very important and necessary step before taking any crucial decision. My solutions had to take care of a novice as well as an expert user. Many users did not know about the purpose, this application was solving therefore it was very important to make the users aware of its main functionalities up front. To achieve a solution which caters to all the issues at once, I had to propose a solution which educate as well as inform the users about their landscape. The ease of use no doubt was the priority.
Data visualisation screen for filtering the information visually and getting one level deeper into the context the user aspires for.
ways to understand interconnected systems
63
live status about the on going process
Graphical representation for the dependent systems and the shared technical parts.
Systems when in a track can be modified as per the needs of the work.
live status about the on going process
Varenya Raj / Diploma Document
64
information architecture
Advantages: •
Main functions of this application is on the homepage. It tells you what it does up as soon as you log onto.
•
Caters to novice as well as an expert user.
•
Exploratory for users who do not know much about their landscape.
•
For users who know that exactly they want to do, it provides them a fixed template to perform the job in quick amount of time.
•
Provides a broad overview about their landscape through visualisation.
•
Filtering of data happens from broad to narrow category.
•
It demands the user to work context wise.
Disadvantage: •
The cycle of work is not shown.
65
2. Process involved
Considering the amount of process involved in this application, it is important that the users understand the gravity of each step in the entire process. To solve this purpose, a diagrammatic approach to explain each step at one glance can be very helpful. However one also has to keep in mind that the diagram needs to be interactive and functions whatever it explains. This was guided approach to reach a solution for the users.
This approach enables the user to understand the cycle of process which are necessary in order to update the system.
the cycle of the processes are shown on the homepage
Varenya Raj / Diploma Document
66
the interaction pattern is different with top navigation
showing the present and the target state
67
information architecture
Advantages: •
Main functions of this application are on the homepage. It tells you what it does up front.
•
The cycle of work is shown and hence easier for the user to understand the process.
•
Shows a guided approach to perform work.
Disadvantages: •
Does not provide a broad overview about their landscape.
•
Not exploratory for users who do not know much or nothing about their landscape.
Varenya Raj / Diploma Document
68
3. Following SAP guidelines
Binding myself to the rules and guidelines, I decided to make a design concept based on SAP design guidelines. They want to fill the bucket with every colour they possibly have. Each screen had every functionality available making things look cumbersome and chaotic. You can visualise yourself lost in the middle a very busy street and you know the place where you have to reach but don’t know about the route to get there.
Since the homepage shows all the functionalities at once with unwanted information, the user does not understand where to start from and how to proceed if you select one function.
main functions and sub functions are together
69
box for a system has many tabs which are hidden
The small box is a SAP template for representing a system which faces many limitations due to its size and the number of information it has to provide.
List of systems.
main functions and sub functions are together
Varenya Raj / Diploma Document
70
information architecture
Advantages: •
All the function is present on the homepage.
Disadvantage: •
Only a very expert user can work.
•
The learning curve is very high.
•
It evokes recall not recognition of elements.
•
Very textual in nature.
•
Involves a lot of time dedication.
•
Not intuitive.
•
Bit boring.
71
Why exploratory concept is selected ? // rationality over emotions
Design interventions provide a solution to problems but taking design decision can be a very complex problem in itself. At such instance, the designer has to make sure that the decision is guided by rationality and not emotions.
The application is a visualisation tool. Interpretation of huge data is difficult most of the times especially when the data to interpret is not tactile. The application enables the users to know that as the first piece of information when the user is vaguely aware about the stats of his landscape. To get an overview of the landscape and dig deeper as the understanding is established is a crisp way to educate an user.
Understanding the product dependencies and track of a system is very clear. When one system is connected with another or a set of systems, making a change in one can have effects in the others. A real-time impact of changes is made available to the user to gauge and make an informed decision. Also addition or deletion of systems should be depicted as the modification happens.
Varenya Raj / Diploma Document
72
This approach also makes the user aware how complex their landscape is and where this application can come handy. Its important to make the user realize the complexity hence sustaining the application does not become a problem. A lot of times, many business applications solve problem but fails to inform the users the problems it solved thus losing out on the credibility. By showing the complexity before solving the issue allows to gain a sense of trust.
It covers most of the features which cropped out of the usability test. Knowing the users is always handy especially when the application is in the early days so that the changes can be made before the users get used to the incorrect way of interacting with the interface. Because I got few chances to deal with real users, I understood their needs and requirements and hence aligning my concepts to their needs became an integral part of the project.
73
5/
Execution & testing
design development SAP guidelines the application comparisons usability corrections
design development // defining use cases for the team to understand Wireframes is an efficient techique to communicate your design concept via paper printed interface or sketches to the user representative and is a low-cost, rapid iterative design way that offers one of the best methods for gaining design insight early. It enables a designer to guage and detect major usability problems in the initial stages of the project so that not a lot of time is wasted in developing a concept with major usability flaws and making the chnages later.
The homepage shows all the main functions of the application.
Varenya Raj / Diploma Document
76
Clicking one shows an option of what you can view your clicked functionality by. Each function can viewed by different options.
A visualisation in a bubble chart of the systems in the landscape.
77
A list of systems of a particular type selected before.
Editing the number of systems.
Varenya Raj / Diploma Document
78
All the details of an individual system.
Details of the systems dependent to one system and the shared software components which are mutually working.
79
More information of the dependent system.
List of recommended systems for product maintenance.
Varenya Raj / Diploma Document
80
Explicitly adding a system.
A visualisation for a track.
81
Update for a track.
List of recommended systems for a track.
Varenya Raj / Diploma Document
82
System update.
Saving a transaction.
83
Affected systems when a system update happens.
Different view for the same as above. Since I could not decide if the affected systems should be presented at the end or during the course of update.
Varenya Raj / Diploma Document
84
Summary of the update with comparison of the current state and the state the system is going to have.
Option for applying the same downloaded file to other systems it is compatible with.
85
Technical related information for comparison.
List of recommended systems for product maintenance.
Varenya Raj / Diploma Document
86
In case of discrepancy a system can be synchornised once the option is selected after the corrected is fetched from SAP side.
Cross checking for the system details.
87
Wireframes for other use cases
Varenya Raj / Diploma Document
88
Wireframes for other design approaches
89
sap guidelines // a glimpse of the guidelines I had to adhere to
Typography SAP brand guidelines predominantly use Arial font family. Due to
Arial was designed by Robin
limitations of web media due to accessibility, Arial finds its application
Nicholas And Patricia Saunders for
in almost every web application SAP owns. It is well known and highly
Monotype type foundary for the
used world wide for its clean look and legibility.
early IBM laser printer in 1982.
Different weight and styles of Arial italic regular bold bold italic
SAP SAP SAP SAP
ABCDEFGHIJ KLMNOPQRST UVWXYZ 0123456789 abcdefghij klmnopqrst uvwxyz
Varenya Raj / Diploma Document
Q R G
The tail is curved slightly inwards and outwards. The tail flows down and near the center of the horizontal bar and straightens out. Arial has no spur and the curve at the bottom meets the stem at an angle.
90
Colour The colour palette comprises a range of colours with a dominance of shades of grey. The brand colour of SAP is golden yellow which they incorporate it with dark blue with their identity. They also have few vibrant colours classified for various interface elements to provide emphasis and de-emphasis.
Brand colours RGB (240, 171, 0)
RGB (0, 157, 224)
RGB (0, 124, 192)
Semantic background RGB (251, 223, 223) RGB (255, 252, 181) RGB (224, 241, 231) RGB (229, 242, 249) State background RGB (0, 124, 192)
RGB (0, 157, 224)
RGB (77, 77, 77)
RGB (54, 62, 67)
Header and footer
91
Grid SAP grid for desktop uses 12 columns but in order to achieve the navigation pattern which I had proposed, it was important that I relooked at the grid system and make changes according to the needs.
Gutter: 20 px Baseline: 18 px Columns: 16 Column width: 70 px
Varenya Raj / Diploma Document
92
Texture As per the design pattern set by new Fiori guidelines, I had to stick to a background. Fiori means flowers in Italian language—was clearly inspired from the colours of flowers found in Italy. To some extent, this background provided an ideal calming affect to the user because of its colour and the faint diagonal lines gave a hint of dynamic feel. Clearly this backgound helps in making the elements above itself more readable and help them stand out to facilitate engagement with the users.
image of the Fiori background
93
the application // high fidelity mockup pictures Following the few pictures of the screens of the project which I worked on. The sequence of pictures are not in order and do not reflect all the work which has be done.
Varenya Raj / Diploma Document
94
95
Varenya Raj / Diploma Document
96
97
Varenya Raj / Diploma Document
98
99
comparisons // a brief analysis of the design interventions
In order to judge the changes which evolved in the application due to my involvement in the project, I have placed few pictures of the screens which were a part of the application and what I proposed. Along with these, are few pictures of the screen which are manifestation of rigorous study of the users, their needs and the application. It is important that I make clear differences which I made to the project with my inputs and efforts. With just showcasing the part of my deliverable would not do justice neither to the project nor to my hard work which I have put in to know the extra bit about the application.
Before
The earlier version of Maintenance Planner (earlier called Landscape Planner) had a diagram (washing machine diagram) with different processes. Though it gave some information, it was highly confusing as the user did not understand where to start from. Also each part of the diagram has a same and a small description making itself more confusing.
Varenya Raj / Diploma Document
100
After
In order to properly understand how this application works and what functions it cater to, it was important to keep them up on the homepage for clear understanding.
101
Before
For some systems, the product maintenance dependency can be more than five in number, in that case, depicting a clear information can get very complex and confusing.
unnecessary space between
Varenya Raj / Diploma Document
102
After
Since the area on the screen was a contraint for the depicting so many dependencies, I reduced the size of each system for its representation and the technical information can be viewed by clicking on any system.
103
Before
Sometimes a landscape of systems can have around three thousand systems and scrolling through all of them to find one can be very tedious. There each system was represented by a thumbnail size box with their respective information which occupied unnecessary space on the screen.
template for each system
Varenya Raj / Diploma Document
104
After
Without compromising on the information which are important, I proposed for list view for showing the systems whereby scrolling can get lesser and a particular system can be found scanning the attributes of a the system.
105
Before
The update process has many steps and the animation slide is from right to left with selectable options on the left and button for the next step on the extreme right. This involved scroll movements.
readability problems due to orientation of text
Varenya Raj / Diploma Document
106
After
The update is a mind gruelling procedure which needs to be intuitive. The different steps appear vertically for better readibility and also provides real-time changes. Also there is a progress indicator to allow users to know where they are and what are the parts still undone.
progress indicator depicting all the steps
107
Proposed interventions Since there are systems in thousands of number deployed at the client’s site which have SAP products running on them, it gets difficult to scan a particular system. There are few attributes which all the systems can be categorised with. This would allow the user to cluster a set of systems of one type and find the related information as per the need. This way the information is broadly getting filtered depending on the needs of the user and need not go through the systems which he is not looking for.
Varenya Raj / Diploma Document
108
Modification of the systems and its product maintanence dependencies.
109
Screen showing the update procedure for a track
Varenya Raj / Diploma Document
110
Many a times, the users like updating or knowing about the systems which are in track (track is group of systems connected in linear or tertiary way with the same configuration for testing purpose and implementation). This screen shows how a track can be modified when needed.
111
usability // rationality over emotions
SAP had orginsed an event called Product Innovation Summit where they showcased their new products, conducted usability test on new developing “designed� projects. It served as a perfect platform for me to test the application. We did so by making a clickable interactive mock up and conducted a series of evaluation on appropriate users. Though it did not have the perfect setup which an ideal usability setup should have with camera, it served a its purpose for most of the part. I made sure that the users think aloud while my colleague and I obsevred the human behaviour and the time taken to perform each part of the respective tasks.
Varenya Raj / Diploma Document
112
Maintenance Planner Feedback form 1. How relevant was the task you performed ? 1
2
3
4
5
6
7
2. How useful was the application prototype for you to perform the task ? 1
2
3
4
5
6
7
6
7
6
7
3. How much interactive was the interface ? 1
2
3
4
5
4. How much consistent was the interface ? 1
2
3
4
5
5. Was the terminology used in the prototype match your uderstanding ? 1
2
3
4
5
6
6. Did the navigation patter help you perform the task ? 1 2 3 4 5 6
7
7
7. Were the buttons placed at the right spots where you expected ? 1
2
3
4
5
6
7
8. Were the icons recognisable with the task it performed ? 1
2
3
4
5
6
7
9. Was the sequence of events occuring relevant with the task performed ? 7 1 2 3 4 5 6 10. Was the layout of the application overwhelming ? 1
2
3
4
5
6
7
11. How satisfied were you with the application prototype ? 1 2 3 4 5 6 7
113
Participation audience
IT Admins
07
IT manager
05
IT architects
02
Icons
13
Problem categorisations
Varenya Raj / Diploma Document
Layout
04
Terminology
10
Navigation
02
114
Usability report How relevant was the task you performed ?
6.0
How useful was the application prototype for you to perform the task ?
5.5
How much interactive was the interface ?
5.0
How much consistent was the interface ?
5.8
Was the terminology used in the prototype match your uderstanding ?
5.0
Did the navigation patter help you perform the task ?
4.4
Were the buttons placed at the right spots where you expected ?
5.0
Were the icons recognisable with the task it performed ?
4.6
Was the sequence of events occuring relevant with the task performed ?
5.4
Was the layout of the application overwhelming ?
5.3
How satisfied were you with the application prototype ?
4.6
115
corrections // changes in the designed mock ups
Following the usability test, I realised that the icons received not a very decent response from the users. Their major complains were the colour and the thiness of the strokes.
Before
After
36 px
1 px
40 px
R: 165, G: 145, B: 175 1.5 px
Varenya Raj / Diploma Document
R: 0, G: 147, B: 224
116
117
6/
Conclusion
reference appendix epilogue
reference Bibliography Visualizing Data, Ben Fry O’Reilly The Design of Everyday Thing, Don Norman Basic Books Don’t make me think, Steve Krug New Riders
Webliography http://www.informationisbeautiful.net http://visual.ly/graph-npm-top-packages-dependencies?view=true http://www.kimalbrecht.com http://www.measuringusability.com http://wireframes.tumblr.com http://www.smashingmagazine.com http://www.wikipedia.org
Varenya Raj / Diploma Document
120
Mix media https://www.e-education.psu.edu/drupal6/sites/www.e-education. psu.edu.geog583/files/Rosson_2002_sbd.pdf http://www.infoq.com/research/alm-survey https://www.youtube.com/watch?v=Qbv-eIxMqK8 https://www.youtube.com/watch?v=WGDz2aX0Da8 http://issuu.com/marylizcf/docs/design_thinking_-_gavin_ambrose__p
121
appendix •
Solution Manager: Its the central support ans system management suite provided to SAP’s customers. It is intended to reduce and centralise the management of these systems and end-to-end business processes.
•
SLD (System Landscape Directory): It is the central provider for information about technial systems for consumers in the system landscape and for external consumers.
•
LMDB (Landscape Mangaement Database): In Solution Manager, LMDB is the central storage and editor for system information that is supplied to the central SLD.
•
XML file: It is the file which is downloaded having codes.
•
Enhancement packages: They form a part the download process whereby the users can make use of the new functionality online faster through shortened testing cycles.
•
Support packages: A Support Package corrects errors in the SAP System or makes necessary adjustments, for example, due to legal changes. The objects affected are replaced in your system.
•
SUM (Software Update Manager): It controls the different kinds of implementation processes like upgrading SAP systems, enhancement packages or applying support package stack.
•
Maintenance Optimizer: Application withing Solution Manager that guides you through planning and downloading stack XML files for enhancement packages, support packages and additional update packages.
•
SWPM (Software provisioning manager): It performs installation, uninstallation, system copy or system transformation.
Varenya Raj / Diploma Document
122
•
PPMS (Product and Production Management System): It is considered as a system which has ideal configuration stored for many processes and serves as a model for reference.
•
Deloitte: It is the largest professional services network in the world by revenue and by the number of professionals. They provide services in Audit, Consulting, Financial advisory, Enterprise risk, Tax. They happen to be one of SAP clients.
•
Intel: It is one of the world’s largest and highest valued semiconductor chip makers. They also happen to be a SAP client.
123
epilogue // a look back
My project lasted for over four months. As a student, it was a time when I experienced anxiety, frustration, joy and a lot of learning at the same time. I got to know how business in an organisation like SAP goes on and how I can I apply my learning at NID in the business context for the project. This presented to me its unique challenges and opportunities. Understanding such a complex business context, finding flaws and solve them through a thorough design process is something which I can’t expect myself to do during academics. Students take up hypothetical projects during their academic years but working on an enterprise software application is beyond conceiving. Working with people from mixed academic background enriched my experience as well as threw its challenges when it came down to convincing ideas and execution. Looking back, I remember going through a phase when I questioned myself for this project. It appeared to be outside my skill set and knowledge. I had no option but to keep pushing myself. In times of despair when I lacked direction, I tried to observe the project from a different perspective. This gave way to detect more problem which I could contribute to. The memory of pulling off this project from stage I started, appears like a half remembered dream. I do not want to remember those moments when I questioned myself but remember the fact that nothing can be said is not achievable. This was my biggest learning.
Varenya Raj / Diploma Document
124
Colophon Body text set in: Chronicle text Title: Hoefler Titling Sidebar and caption: Verlag All by Hoefler & Co. The document was printed and processed in Ahmedabad, Gujarat, India.
125