ABSTRACT

The topic of this project is the development of a front-end side of a mobile Expense Registration
application for iOS smartphones as part of the SAP Human Capital Management area using the
SAP add-on Neptune Application Designer for the company Evry.
The dissertation presents an introduction to the company, a description of important concepts used
throughout the development. It states the business context, which the development was based upon,
the problem statement and its delimitation. The front-end development follows four phases and their
aim is to focus in a user centered design in order to achieve a good user experience. Also, it
includes a discussion and final conclusions as the final chapter.

TABLE OF CONTENTS
ABSTRACT ........................................................................................................................................................i
TABLE OF CONTENTS ................................................................................................................................... ii
LIST OF FIGURES ........................................................................................................................................... vi
ACKNOWLEDGEMENTS ............................................................................................................................. vii

INTRODUCTION ................................................................................................................................. 1

1.0
1.1.

The Company .................................................................................................................................... 1

1.2.

SAP .................................................................................................................................................... 1

1.3.

Mobility ............................................................................................................................................. 2

1.4.

Native, Web and Hybrid applications................................................................................................ 2

1.4.1.

Native applications .................................................................................................................... 2

1.4.2.

Web applications (web apps) ..................................................................................................... 2

1.4.3.

Hybrid applications.................................................................................................................... 3

The mobile Expense Registration application ................................................................................... 3

1.5.

BUSINESS CONTEXT......................................................................................................................... 3

2.0
2.1.

Employees at Evry ............................................................................................................................. 3

2.2.

Registration of expenses background ................................................................................................ 3

2.3.

Problems and limitations ................................................................................................................... 4

PROJECT DEVELOPMENT ................................................................................................................ 4

3.0
3.1.

Project Scope ..................................................................................................................................... 4

3.2.

Problem Statement............................................................................................................................. 5

3.3.

Methods ............................................................................................................................................. 5

3.3.1.

Analysis ..................................................................................................................................... 6

3.3.2.

Design ........................................................................................................................................ 6

3.3.3.

Implementation .......................................................................................................................... 6

3.3.4.

Final Test ................................................................................................................................... 6

3.4.

Tools .................................................................................................................................................. 7

3.4.1.

HTML5, CSS3 and jQuery Mobile ........................................................................................... 7

3.4.2.

PhoneGap ...................................................................................................................................... 7

3.4.3.

Neptune Application Designer ...................................................................................................... 8

ii

3.4.4.

SAP Netweaver and SAP GUI ...................................................................................................... 8

3.4.5.

Adobe Dreamweaver CS6 ............................................................................................................. 8

3.4.6.

Adobe Photoshop CS6 ................................................................................................................... 9

3.4.7.

Evolus Pencil 2.0.3 ........................................................................................................................ 9

4.0

DELIMITATION OF PROBLEM ........................................................................................................ 9

5.0

ANALYSIS ......................................................................................................................................... 10

5.1.

Project purpose and goals ................................................................................................................ 10

5.2.

Target Group ................................................................................................................................... 10

5.3.

User needs ....................................................................................................................................... 10

5.3.1.

Personas ................................................................................................................................... 10

5.4.

Background Research ...................................................................................................................... 13

5.5.

Brand Identity .................................................................................................................................. 15

5.5.1.

Mission .................................................................................................................................... 15

5.5.2.

Vision ...................................................................................................................................... 15

5.5.3.

Values ...................................................................................................................................... 15

6.0

DESIGN (iteration 1)....................................................................................................................... 15

6.1.

Purpose ............................................................................................................................................ 15

6.2.

Information Research ...................................................................................................................... 15

6.2.1.

Project Requirements (Scenarios)............................................................................................ 15

6.2.2.

Functional Specifications ........................................................................................................ 16

6.2.3.

Content Specifications ............................................................................................................. 17

6.3.

Content architecture......................................................................................................................... 17

6.4.

Wireframes ...................................................................................................................................... 19

6.4.1.

Interface Design ....................................................................................................................... 19

6.4.2.

Navigation Design ................................................................................................................... 19

6.4.3.

Information design ................................................................................................................... 19

6.4.4.

Usability Testing...................................................................................................................... 20

6.5.

Conclusions of Iteration 1................................................................................................................ 21

7.0

DESIGN (iteration 2)....................................................................................................................... 22

7.1.

Purpose ............................................................................................................................................ 22

7.2.

Wireframes ...................................................................................................................................... 22

7.2.1.

Navigation Design ................................................................................................................... 22

7.2.2.

Information Design .................................................................................................................. 22

iii

7.2.3.
7.3.

Usability Testing...................................................................................................................... 23

Visual Design .................................................................................................................................. 25

7.3.1.

Colors ...................................................................................................................................... 25

7.3.2.

Font types and sizes ................................................................................................................. 26

7.3.3.

Buttons and fields .................................................................................................................... 26

7.3.4.

Logo and images ...................................................................................................................... 27

7.4.

Conclusions of Iteration 2................................................................................................................ 29

IMPLEMENTATION ......................................................................................................................... 29

8.0
8.1.

Electronic Prototype ........................................................................................................................ 29

8.1.1.

Basic HTML5 and jQuery Mobile........................................................................................... 29

8.1.2.

Pages ........................................................................................................................................ 30

8.1.3.

Header, navigation and buttons ............................................................................................... 30

8.1.4.

Form elements ......................................................................................................................... 31

8.1.5.

Styling...................................................................................................................................... 33

8.2.

Neptune Application Designer ........................................................................................................ 36

8.2.1.

Menu_expenses ....................................................................................................................... 37

FINAL TESTING ................................................................................................................................ 40

9.0
9.1.

Purpose ............................................................................................................................................ 40

9.2.

Test Approach ................................................................................................................................. 40

Phase 1: Self-test ..................................................................................................................................... 40

Phase 2: Extra code ................................................................................................................................. 40
Phase 3: Scenario ..................................................................................................................................... 40
9.3.

Results ............................................................................................................................................. 42

Result phase 1: Self-test .......................................................................................................................... 42

Result phase 2: Extra code....................................................................................................................... 42
Result phase 3: Scenario .......................................................................................................................... 43
9.4.

Test conclusions .............................................................................................................................. 44

10.0

CONCLUSIONS ................................................................................................................................. 44

11.0

BIBLIOGRAPHY ............................................................................................................................... 45

12.0

APPENDICES (SCREENSHOTS) ..................................................................................................... 46

log-on.html #problems .............................................................................................................................. 46

menu.html .................................................................................................................................................... 47
travel.html

tra_confirm.html..................................................................................................................... 47

iv

accommodation.html acc_confirm.html .................................................................................................... 48

mileage.html mile_confirm.html ............................................................................................................... 49
perdiems.html diems_confirm.html .......................................................................................................... 50
expenses.html

exp_confirm.html .............................................................................................................. 51

history.html

done.html.......................................................................................................................... 52

user.html

about.html ......................................................................................................................... 53

user.html ...................................................................................................................................................... 53

LIST OF FIGURES

Figure1. Project Architecture ............................................................................................................................ 9

Figure2. Standard SAP Travel Management process ...................................................................................... 14
Figure3. Site map of the Expense registration application .............................................................................. 18
Figure4. Wireframes, Log-on and Main menu pages ...................................................................................... 20
Figure5. Wireframes, Travel type and Confirmation pages ............................................................................ 20
Figure6. Wireframes, Log-on, Menu, Travel expense type. ............................................................................ 23
Figure7. Wireframes, Confirmation page, Attach receipt, and Reference number page. ................................ 23
Figure8. The color palette with primary and secondary colors ....................................................................... 25
Figure9. The Expense Registration application logo ....................................................................................... 27
Figure10. The logo of EVRY with measurements regarding space ................................................................ 27
Figure11. Final mockups, Log-on and Menu pages ........................................................................................ 28
Figure12. Final mockups, Travel and User pages (includes a log-off button) ................................................ 28
Figure13. Example code of HTML5 and jQuery Mobile ................................................................................ 30
Figure14. Part of the HTML code of travel.html (header) .............................................................................. 31
Figure15. Part of the HTML code of log-on.html (form elements) ................................................................. 31
Figure16. Part of the HTML code of travel.html (form elements SELECT and CHECKBOX) ..................... 32
Figure17. Screenshots (iPhone 4), Log-on.html and Travel.html ................................................................... 33
Figure18. Part of CSS code of the Log-on.html .............................................................................................. 34
Figure19. Part of CSS code of the file expenses.css........................................................................................ 34
Figure20. Part of HTML code of the menu.html page (HEADER) ................................................................ 35
Figure21. Screenshot of the menu .html page (iPhone 5)............................................................................... 35
Figure22. Part of HTML code of the menu.html page (Body part menu list) .............................................. 36
Figure23. SAP GUI showing access to the Neptune Components .................................................................. 37
Figure24. Screenshot of the Application Builder showing all the applications created .................................. 38
Figure25. Screenshot of the MENU_EXPENSES application ........................................................................ 38
Figure26. Screenshots, Stylesheet window, and MIME repository folder ...................................................... 39
Figure27. Screenshots - Chrome browser, application made in Dreamweaver and made in Neptune ............ 39
Figure28. Touch event diagram for registering a Travel expense ................................................................... 41
Figure29. Part of the tra_confirm.php page (Travel confirmation) ................................................................. 42
Figure30. Screenshots of Travel.html and tra_confirm.html ........................................................................... 43

vi

ACKNOWLEDGEMENTS
My gratitude goes first and foremost to my parents, Juan and Ruby, who until now have always
supported me when facing new challenges.
I am grateful to my good friend Line Jnson, for her support through the entire education.
Three special gentlemen from Evry deserve to be mentioned and thanked, Per Alm, Jes Hesselbjerg
and Ole Mose, without them this report would not exist.
Finally, I would like to thank to my supervisor Mogens Jacobsen, for his time and wise advices.

vii

1.0 INTRODUCTION
1.1. The Company
Evry is a result of the 2010 merger of Norways two largest IT companies: EDB and ErgoGroup.
This was the largest merger ever seen in the Norwegian and Nordic IT industry, and was the fourth
largest corporate merger in Norway regardless of industry. As consequence of the merging, it
became the largest IT Company in Norway and the second largest IT services company in the
Nordic region. With 10,000 employees, EVRY delivers daily IT services from 21 Norwegian and
50 Nordic towns and cities for more than 14,000 public and private sector customers. Also, the Evry
Consulting Group is the largest Nordic SAP partner and offers a complete range of services in
Denmark, Norway and Sweden.
In Denmark, Evry as well, has customers in both the public and private sectors including such
names as Kbenhavns Lufthavne, Arla Foods, Danfoss, Lejerbo, Novozymes, SAS, Statens Serum
Institute Qdok, Nets and others. They are offering a broad gamma of IT services: Consulting
services, Application services and Solutions, Infrastructure services, and Software and Hardware.
At the moment, Evry Denmark has two offices, one located in Viborg where most of the IT
production and development take place, and the office in Copenhagen where most of business and
meetings are made.

1.2. SAP
SAP stands for Systems, Applications and Products in Data Processing. It was designed and
developed by 5 engineers from IBM during the 70s as alternative software to handle Enterprise
Resource Planning (ERP) software. Nowadays SAP is the worlds leading developer of ERP
products and companies in more than 120 countries are using its applications, which include
managing their day to day operations, logistics, finances, month end, quarter end and yearly
activities, reporting, human resources, etc. SAP integrates all these operations in a seamless system
that is both, easy to use and sophisticated enough to include all kinds of complex activities that are
needed in an enterprise. Examples of some of these activities could be: Running material resource
planning, recruiting and managing an employees lifecycle, disbursing payrolls, recording all
financial transactions and drawing balance sheets and P/L statements of the company, etc.

1.3. Mobility
The world is starting to adopt mobile technology really fast and the spread of smartphones and apps
are accelerating strongly. A new term -mobility- has become a necessary part in the solution of
problems that could not have been solved in the past.
EVRY Denmark are, as many other companies, looking for new ways to increase efficiency and
productivity, to improve processes and to drive down operative costs. This could be achieved by
giving employees the access to correct information delivered to where they are.

1.4. Native, Web and Hybrid applications

1.4.1.

Native applications

Mobile native applications are application programs that have been developed for an exclusively
use in a specific platform or device. Developers use development tools and programming languages
that support a respective platform, e.g. Xcode and Objective-C for iOS, Eclipse and java for
Android, Visual Studio and C# for Windows Phone. Moreover the applications can be distributed at
the application store of the mobile phone brand, downloaded and installed on the device.
Native applications have access to all native APIs and they have an improved graphic performance,
therefore it is expected that native applications provide the best performance in usability, features
and overall mobile experience.
Depending on the purpose of a project, to build native applications could become expensive since it
has a single platform affinity.
1.4.2.

Web applications (web apps)

Mobile web applications are application programs developed with web technologies (at 2012:
HTML5, CSS3, JavaScript) and a server-side technology (PHP, ASP.NET, etc). Web applications
are stored in a remote server and they are delivered over the internet through an internet mobile
browser, e.g. Safari, Chrome, Internet Explorer, etc.
Compared to native applications, web apps are easier to develop, support, and reach a wider range
of devices, but unfortunately native features can be emulated but not replicated at a hundred
percent.

1.4.3.

Hybrid applications

Mobile hybrid applications are the combination of native and web apps. Primarily built with web
technologies (HTML5, CSS3, and JavaScript) and then wrapped inside a native container that
provides access to native platform features, such as the camera, local storage, geolocation, etc.
The native container is an abstraction layer that exposes the devices native APIs to the hybrid
application as a JavaScript API. This is not possible with web applications due the security
boundary between the browser and the device APIs.
Hybrid applications can be distributed at the application store of the mobile phone brand,
downloaded and installed on the device.

1.5. The mobile Expense Registration application

As one of the new tendencies where employees themselves can easily access and retrieve
information, the Mobility Department of EVRY Denmark has opened a new project, the
development of a mobile Expense Registration application for iPhone devices.
The Expense Registration app as part of the SAP Human Capital Management Travel area will be in
charge to register any expense that an employee generates in order to accomplish a project, work,
course, etc. This project is taken as a new challenge, and with big expectations.

2.0 BUSINESS CONTEXT

2.1. Employees at Evry
In Denmark, Evry has 98 employees. Over 75% (72 employees) of them are SAP Consultants in
different fields, and most of their time is being spent by visiting and working with customers at
different locations and cities of Denmark. Moreover many of them are frequently sent to courses
abroad. This means that consultants generate expenses (i.e. hotel booking, meals, parking tickets,
taxis, fly tickets, train tickets) which normally are covered first by the employee and then paid back
by the company, so in order for the employee to get refunded, there is a need for making a
registration of expenses.

2.2. Registration of expenses background

The expense management in general can be handled or managed either as centralized or
decentralized process. A centralized process involves at least one employee in the area of Human

Resources or Finances to fulfill tables and register manually the tickets of other employees. In a
decentralized or distributed process, an employee registers own expenses through a graphic user
interface as front-end that links to a database for data storage of tickets and tables. Today
distributed processes make use of web pages or desktop applications.
At Evry, employees can register expenses such as travel, accommodation, mileage, per diems and
other expenses, through a web interface that connects to a web service to use SAP/ABAP back-end
system.

2.3. Problems and limitations

Today there is a high demand for access to personal information and corporate data at anytime from
anywhere on any device. Considering the above statement, the following limitations or problems
regarding the actual process exist:

Employees are limited by only being able to access the registration of expenses application from
a desktop/laptop computer.

The employees need to send the physical receipt plus a written down registration/ticket number
from the online registration to the Finance department.

These limitations/problems implicate:

A slow completion of an expense registration process.

Employees get stressed with registration deadlines.

To not take advantage of employees free time at lunch breaks, waiting times for meetings,
while in public transportation, etc.

Lower productivity and efficiency because of high and inefficient administrative and accounting
tasks.

To not be able to make immediate registration i.e. right after checking out from a hotel,
implicating that employees risk forgetting to register their expenses.

3.0 PROJECT DEVELOPMENT

3.1. Project Scope
This project is based on courses that I have taken over the Bachelor of Web Development: Interface
Design, Digital Aesthetics, Web Communication, Content Management Systems, and Front end
4

development. Furthermore, in the experience earned during my internship period in the company
Evry, where one of the tasks was to design and develop an application store website with versions
for both a desktop and mobile browsers. And finally, I have studied and followed tutorials to
understand the different features and functionality of the Neptune Application Design software and
jQuery Mobile.

3.2. Problem Statement

In order to empower employees to do the registration of their expenses at anytime from anywhere
on any device, and so achieve more productivity and reduce costs, the company Evry in Denmark
has decided to open the project to develop a mobile Expense Registration application for iPhone
devices.
I, as an intern have the task to design and develop the front-end side of the application and use the
software called Neptune, which provides easy binding to the SAP back-end system.
The problem of this final project is based on achieving usability and good user experience regarding
to the front-end layer (user interface) of the Evry Expense registration application by using the
SAP add-on Neptune application designer. This means that the development process needs to have
the end user as main focus and priority.

3.3. Methods
There are numerous steps, methodologies and processes regarding the design and development of
mobile applications, from an initial gathering of primary information up to build and maintain the
application. Hence, to face, analyze and solve the problem statement I found it convenient to follow
a mobile project flow based on the book Pro iOS Web Design and Development: HTML5, CSS3,
and JavaScript with Safari by Andrea Picchi from where I will include four phases: Analysis,
design, implementation, and final test.
Also in an attempt to design a user interface oriented to include the needs, wills and limitations of
end users, I will complement the process with the use of key concepts from the book The Elements
of User Experience by Jesse James Garrett. He breaks down the user experience into pieces; these
pieces or layers are called the Five Planes. Even though these planes cover mainly user experience
issues related to Web development, I find it necessary to use the concepts in order to achieve a usercentered design.

Finally, I will be using the book Mobile Design Pattern Gallery by Theresa Neil to cover the User
Interface patterns of applications made for iOS platforms.
Each phase has a purpose and so each one contributes to the problem solving. The description of the
schema to use in the project will be as follows:
3.3.1.

Analysis

It involves a good and solid understanding of the company, the project and the user needs. So I
consider important to approach these sub-topics:

Purpose and goal of the mobile Expense Registration application

Target Audience and user needs.

Background Research about the Travel Management process

Brand Identity

3.3.2.

Design

The design phase will make of use of an agile methodology; due at it is more effective to divide the
work process of designing into small increments and iterations. This will help to avoid any huge
mistakes at the phase of implementation. To ensure balance between working time and results, the
process will be divided in the following areas:

Information Research

Content Architecture

Wireframes. Here the interface design, navigation design, information design and a usability test
will be covered.

Visual design (for the second iteration)

3.3.3.

Implementation

This phase will cover the implementation of an electronic prototype in HTML5, CSS3 and jQuery
Mobile using Adobe Dreamweaver as the code editor, and the migration of the prototype to the
Neptune Application Designer.
3.3.4.

Final Test

The final test will include the electronic prototype built in Neptune software. The plan is the
following statements:

Review the application made in Neptune, this should be made by me comparing the goals and
purposes of the project, and so the functional requirements.

Build PHP and JavaScript pages to test a more real interaction on an iPhone device.

Make the test with 2 users from the target group, and ask questions regarding their user
experience. Take notes of number of touches, number of mistakes and estimated time of arrival.
(Picchi 2011:405)

3.4. Tools
3.4.1.

HTML5, CSS3 and jQuery Mobile

HTML5 is a markup language for structuring and presenting content for the World Wide Web.
(Wikipedia, HTML5: 2012). HTML5 includes new elements for better structure like <article>,
<section>, <header>, <content>, <footer>. Better form handling like calendar, date, time, email, url.
Drawing like <canvas>, and for media content like <video>, <audio>.
CSS3 is the latest standard for the Cascade style sheets CSS. CSS3 is split up in modules: Selectors,
box model, backgrounds and borders, text effects, animations, etc.
JQuery Mobile is a touch-optimized web framework for Smartphones and Tablets currently being
developed by the JQuery project team. The jQuery Mobile framework is compatible with other
mobile app frameworks and platforms such as PhoneGap. (Wikipedia, jQuery Mobile: 2012).
3.4.2.

PhoneGap

PhoneGap is an open source mobile development framework that allows building mobile
applications by using JavaScript, HTML5 and CSS3, instead of device specific languages.
Currently, PhoneGap supports the native iOS, Android, BlackBerry, webOS, and Symbian
platforms. In addition to the native distribution of PhoneGap capabilities, it also exposes an API
that allows Web applications to interact with device specific APIs including the file system,
notifications, contact lists, camera, and many others.
At the website of PhoneGap there is a step by step guide on how to set up for an iOS environment,
from the installation of Xcode to the activation of PhoneGap. Another way to compile iOS
applications is through the website http://build.phonegap.com, which is a service owned by Adobe.
But notice that for both methods we need to be members of the iOS Developer Program of Apple
which costs 99 USD, this is because to compile applications for iOS we need to have a certificate

(p12 file) and a provisioning file, in order to whether test the application on our own device or to
distribute apps on the app store of Apple.
3.4.3.

Neptune Application Designer

The Neptune Application Designer is a native SAP workbench that integrates HTML5, JavaScript
and CSS3. It can be installed through the ABAP add-on process. Neptune does not interfere with
any functionality of existing systems, so it provides a fast and easy way to get started with mobility
within an existing SAP system landscape. Moreover there is no need for extra servers or other
developing knowledge than ABAP; therefore the front-end layer of the application needs to be
delivered as a project file of Neptune Application Designer.
There exist certain limitations and problems at the moment of working with HTML5, jQuery
Mobile, CSS3 and the Neptune software. The main problematic is that even though Neptune
application designer offers a drag and drop interface; it has a big disadvantage of not offering an
option to edit the code directly. This makes the development very slow and clumsy. So it is
necessary to make a prototype with another web editor and import the code and design into a
Neptune project.
3.4.4.

SAP Netweaver and SAP GUI

SAP Netweaver is a technology platform that enables the composition, provisioning, and
management of SAP and non-SAP applications across a heterogeneous software environment. It
means that the SAP back end, portals (SAP web applications) and other type of applications exist
together under the same platform.
SAP GUI is the graphic user interface client, and it can be the back end as well as the user interface
in a portal. At Evry, this software runs on a Windows environment and HTML (internet explorer),
and allows a user to access SAP functionality in SAP applications such as SAP ERP and SAP
Business Intelligence.
3.4.5.

Adobe Dreamweaver CS6

Adobe Dreamweaver is web design software and provides an intuitive visual interface for making
and editing HTML websites and mobile applications. Dreamweaver supports HTML5, CSS3 and
the most important is easy to work with jQuery Mobile. Also offers an easy way to export the
project for using it with PhoneGap.

3.4.6.

Adobe Photoshop CS6

Adobe Photoshop is a powerful image editor. I will use this software for designing a set of
mockups, and since the program works using multiple layers, it will be easy to re-use the images
created. Adobe Photoshop will also be needed to create images belonging to the final prototype, i.e.
the logo image.
3.4.7.

Evolus Pencil 2.0.3

It is a free and open source prototyping tool that allows easily creating flowcharts, wireframes and
mockups, having an extended library of stencils and templates for android and iOS.

4.0 DELIMITATION OF PROBLEM

The main aim of this project is to develop the front-end layer of an SAP Expense Registration
Application. This means that the solution of the problem will only consider the design and
implementation of the graphic user interface built in HTML5, CSS3 and jQuery Mobile by using
the Neptune Application Designer software as shown in figure1. The SAP backend side built in
ABAP already exists; but in order to make a connection with the frontend side there is a need to
build new classes. Due to restraints of time, any communication with the back end layer will not be
covered in this dissertation.

Figure1. Project Architecture - front

and back end layers

5.0 ANALYSIS
5.1. Project purpose and goals

To develop the front end layer of the mobile Expense Registration application for the company
Evry.

To achieve a user centered design and so take in consideration usability and good/efficient user
experience.

To deliver a final product/prototype as a project file of Neptune Application Designer.

The satisfaction of the stakeholders and end users regarding the final product/prototype.

5.2. Target Group

The target group is the employees working at the Company Evry in Denmark. The target group can
be segmented demographically by the type of employee, which is: SAP Consultant, IT Support and
Administration. Also, by the range of their age: from 30 to 60 years old. The segmented group of
SAP Consultants is the group that more often needs to register expense. The majority of the target
group has an iPhone device.

5.3. User needs

I consider combining the needs of the segmented target group. The user needs to register expenses
through an interface that provides rapid and easy registration.
5.3.1.

Personas

The Personas I created for this project are very useful since they create a common understanding of
the target group for which the design process is built around. These fictional characters represent
the typical users at Evry, and they were created after observation and conversation with most of
the target group during the past 4 months. Besides, as a designer, I have observed many times how
to register expenses through their desktop browsers.

10

Persona 1: Thejs Nielsen

I am engaged in using mobile technology in business contexts
Age: 40
Nationality: Danish
Location: sterbro, Copenhagen
Ocupation: Senior BI Consultant at Evry
Relationship status: Married, with 2 children
Transportation medium: Car
Smartphone: IPhone 4S
Income per annum: 350,000 DKK
Thejs has being working as a Business Intelligence
Consultant for 12 years. He spends at least 3 days a week at
Lejerbo, where Evry has started on a new implementation
since March; else he is at the office in Copenhagen meeting
clients. He finds it very helpful to be able to reply emails
during meeting breaks. He often works extra hours, even
during the weekend. While he is not working, he enjoys to
spend time with his kids and wife, and to watch football with
his friends or colleagues.

11

Persona 2: Lars Holm

Mobile solutions have an incredible potential
Age: 33
Nationality: Danish
Ocupation: Consulting Manager Mobility at Evry
Location: Aalborg
Relationship status: In a relationship
Transportation medium: Car
Smartphone: IPhone 4S
Income per annum: 310,000 DKK
Lars holds a B.Sc. in Computer Science from Aalborg
University and he started working at Evry 10 years, back at
that time and before the merger, the company was called
Spring Consulting. At the moment, Lars lives in Aalborg and
he frequently travels to Copenhagen and Viborg to attend
meetings with different clients. He believes that Evry will
become a leading company in developing SAP Mobility
within North of Europe. In the sparing time he loves to cook
and has a passion for Italian wines. Also, he enjoys adventure
sports; a few months ago, he went climbing to the Himalayas.

12

Persona 3: Anna Jakobsen

I believe mobility is handling business information
more efficiently
Age: 29
Nationality: Danish
Ocupation: HCM Consultant at Evry
Location: Frederiksberg, Copenhagen
Relationship status: Single
Transportation medium: Public transportation (metro)
Smartphone: IPhone 4S
Income per annum: 230,000 DKK
Anna

has

bachelors

degree

in

Business

Administration, and will have earned her Master of

Management Development at Copenhagen Business
School in the spring of 2013. Anna is at the moment
elaborating a Travel Management plan for SAS, so she
finds herself very busy as she is doing her master as
well. She thinks that the business mobile applications
are saving her a lot of time, since she can do fast
operations while taking the metro from and to work.
Anna loves to travel and her next destination after she
finishes her thesis will be to go to Tokyo.

5.4. Background Research

There exists a complete Travel Expense Report mobile application created by SAP Mobile. It
includes among its features the complete process of Travel Management in SAP.

13

Figure2. Standard SAP Travel Management process - decentralized process (SAP AG 2001: 17)

With the SAP Travel Management application it is possible to follow all the business travel process,
from Travel Request and Travel Planning, to Travel Expenses.
Travel request

Input of general trip data, required travel services and cost estimates.

Transfer to the approving superior department.

Travel planning

Booking of flight, hotel, car rental or train.

Consideration of internal trip rules for queries and bookings.

Possibility of setting up hotel catalogs.

Consideration of agreements with travel agencies.

Travel expenses

Input of trip facts (central or decentralized).

14

Settlement and booking of trips.

Payment of travel expenses via Financial Accounting (FI), Payroll (HR) or via data medium
exchange with banks.

Optical archiving of receipts

The Evry Expense Registration mobile application will only take in account the Travel Expenses
process.

5.5. Brand Identity

5.5.1.

Mission

The mission of the company is to bring information to life, creating value for their customers to
the benefit of society.
5.5.2.

Vision

The company considers its vision as bold and clear, because by embracing infinite opportunities is
what it takes to be at the forefront, continuously pursuing new opportunities, and inspiring their
clients.
5.5.3.

Values

The values of the company are: to anticipate needs, to go beyond expectations, to perform together
and to empower and inspire.

6.0 DESIGN (iteration 1)

6.1. Purpose
The purpose of this iteration is to collect information, structure and organize it to be able to end up
with a sketch of the application.

6.2. Information Research

The sources of the requirements are primarily the users at Evry; even though the stakeholder and a
HCM Consultant have helped to make the following documentation.
6.2.1.

Project Requirements (Scenarios)

To define the project requirements I thought convenient to create Scenarios with the personas I
created in the phase of analyses. And so document the functional and content specifications.

15

The waiting time in the meeting room (Persona 1: Thejs Nielsen)

It is a Wednesday early morning and due to easy traffic, Thejs has arrived 15 minutes earlier to a
meeting at BaneDanmark. He sits down at the waiting room and suddenly remembers that he didnt
register the hotel bill he got in London last week, where he went for a week for a SAP HR extension
course. He checks his watch and sees that he still has 10 minutes left till the meeting and nobody is
approaching yet. He decides to take his iPhone out of the pocket and to open the Expense
Registration app. He logs on and taps the accommodation type of expense. He fills up the fields,
takes a picture of the bill and done. Thejs feels released of having registered the expense that he
kept forgetting for a week.
The metro trip (Persona 3: Anna Jakobsen)

Anna is in the metro on her way to Amager (she normally takes the metro from Frederiksberg to
Femren, which takes 16 minutes), at Forum station she tries the new application from Evry called
Expense registration to register three lunch meals receipts that she got when visiting HCM
Consultants at SAS. Anna opens the Expense Registration application, logs on and chooses the
Expense type from the menu. She fills up the fields and takes a picture of one bill and confirms. She
made so far two registrations while she was on the metro, but unfortunately she did not have time to
register a third one. Later after her lunch break, Anna completes the registration of the third receipt.
By the end of the day she wonders if it was possible to register more than one expense at the same
time.
6.2.2.

Functional Specifications

The application must support the SAP standard expense registration process, and at least minimum
requirements and processes must be implemented, so later on it could be possible to expand the
functionality. To make a description of the functions that the application should have, an HCM
Consultant of Evry and I have analyzed the existing Expense registration website to be able to write
down the functions that would work in a possible mobile application. Here is the description:

The first window/page should be for the user to log on. This means that only authenticated users
(employees of Evry) can make use of the application.

The log-on window should have a logo image on the top, two text fields for filling up username
and password, and a log-on button to confirm authentication.

The system will present a menu with the type of expense to choose, and a view history.

The user has to be able to register one of the five types of expenses at a time.

16

The types of expenses are: Travel, Accommodation, Mileage, Per diems and Expenses.

All types of expenses should include a project identification called Cost Assignment or WBS.

The Travel type should include the following fields: From city and to city, transportation type
(Plane, car, bus, taxi, and parking), Amount of money, Type of currency, and an option to set
Roundtrip.

The Accommodation type should include the following fields: Country, city, Hotel name, From
Date and to date, Amount of money, and Type of Currency.

The Mileage type should include the following fields: From (origin), To (destination), Distance
in kilometers, a 60 days rule, and an option to set Roundtrip.

The Per diems type should include the following fields: Country, City, Start-date, Start-time,
End-Date, and End-time.

The Expenses type should include the following fields: Description, type of expenses (meals,
office, IT equipment, education, and other), Amount of money, and Type of currency.

The five Types of Expenses pages should present a Confirmation, Reset and Cancel Button.

The user should be able to take a picture of the physical receipt and attach it at the expense type
window.

The user should get a ticket number after tapping the confirmation button.

The look of the application will conform to the company brand guidelines document.

6.2.3.

Content Specifications

The size in pixels of the logo-image at the Log-on window should be optimized for an iPhone 5
resolution.

The terminology to use should be according to SAP standards for the company Evry.

6.3. Content architecture

Following the design process it is necessary to create a hierarchy of categories and subcategories,
and then break down these categories into logical subsections, as shown in figure3. This is based on
an understanding of the project goals, user needs and functional specifications, and it was made in
cooperation with a HCM Consultant from Evry.

17

Figure3. Site map of the Expense registration application

18

6.4. Wireframes
The goal is to use handmade paper wireframes to depict a first sketch of the application. So it is
time to look up to the graphic user interface, and make use of design patterns for iPhone devices.
This means to put together all necessary elements that will allow having a good user experience
while using the Expense Registration application.
6.4.1.

Interface Design

An interface is the means by which the user makes use of the application. Interface design is about
choosing the right elements so that the user can be able to accomplish a task successfully. This
includes the action buttons, text fields and dropdown lists, for example in figure4 and figure5, is
possible to recognize the action buttons, such as log on, log off, confirm, ok and others.
6.4.2.

Navigation Design

As seem from the site map, the application has three main pages: a log-on page, a menu page and a
type of expense page.
In order to do registrations one needs to choose or navigate to a specific type of expense page. I
decided to use the pattern called Springboard. Since there is only one menu (Main menu of figure4),
the user would understand that there is only one path to take, which could improve the navigation
experience.
As another design pattern for iOS, the title of a page is always showed at the top (see figure5), this
will provide an accurate orientation to users through all the pages.
6.4.3.

Information design

Information design is basically about how to arrange and group the information. For the application,
I took in consideration to keep the default order of the type of expenses and their internal features
and fields. As mentioned at the navigation design, there are three main pages but when choosing a
type of expense (for example the Travel type) I needed to consider how to arrange the fields shown
on figure5.

19

Figure4. Wireframes, to the left the log-on page, and to the right the main menu page

Figure5. Wireframes, to the left the Travel type page, and to the right the Confirmation page of the Travel type

6.4.4.

Usability Testing

This test included a user (a random consultant) who represents the target group and I who
participated as an observer.

20

Usability goals

The user should be able to recognize and understand each wireframe-page.

The user should be able to identify the process of registration of travel expenses: log-on, choose
the Travel type, understand the Travel expense fields, continue to the get a confirmation and
identify the take a photo button.

Scenario

The location was the education room of the company, where I sat in front of the user. The user was
told that this was a very basic sketch of the Expense registration application and that we were going
to go through a registration of a Travel expense. The questions asked were (see figure4 and 5 to
understand the questions asked with the wireframes):

Do you recognize this page (Log-on page)?

Could you tell me which button would you press to log on?

Could find and point the Travel button?

Do you understand the terminology used in the Travel expense page?

Which button would you press to continue after filling up the fields?

Could you tell me what would you do in this page (Confirmation page)?

Results

The user was able to identify rapidly the log-on page and the purpose of the button Log-on.

The user found the Travel button at the Menu page with no problems.

At the Travel page, the user was familiar with the terminologies of the fields. And it was easy to
identify the button Confirm.

At the Confirmation page, the user identified the Take a picture and Ok button.

Conclusions of the Usability Test

The user identified successfully the process of registration of Travel expenses, recognized the
different action buttons and fields and understood the terminology of them.

6.5. Conclusions of Iteration 1

This iteration covered successfully the start of the design by the use of wireframes.

After the usability test, it is obvious the need of a second iteration to cover error handling, a
possible change to the pattern of the navigation menu, and to work the visual design.

21

7.0 DESIGN (iteration 2)

7.1. Purpose
The purpose of this iteration is to revise the wireframes created at the first iteration and finalize with
mockups including the visual design.

7.2. Wireframes
These wireframes were made using the free software called Pencil, which it includes a large library
of drag and drop UI stencils elements for iOS, so I ended up with an improved set of wireframes as
to go next to the visual design part.
7.2.1.

Navigation Design

I changed the primary navigation pattern to a List Menu, due it will be possible to add new
items to the main menu and it will give enough space to write a brief description of each type of
expense and maybe an icon. See figure 6

The title of a page is still showed at the top.

The different back buttons will have the name of the page to go back.

7.2.2.

Information Design

There is a marked composition structure in all pages: a header and body.

I changed the arrangement of the log-off button at the menu page and the logo. See figure6.

The arrangement of the Travel expense page has changed, now there are two options after the
title of the page to choose between one way and round trip. See figure6.

At the functional specifications part from chapter 6, it was stated that each page of type of
expense should have a Confirm, Reset and Cancel button. Those specifications work fine on a
desktop website or application, but in the reduce screen size of an iPhone I thought convenient
to only use the Confirm button.

About how to handle errors, when logging on, there should be a message warning if the
username or password are empty or bad filled up. A similar warning message should be shown
when one of the fields are not filled up correctly or empty. I think a transparent light dark screen
containing the message should be enough for that, and should the user be able to tap anywhere
to go back to the previous screen.

22

Figure6. Wireframes, to the left the Log-on page, center the menu page, and to the right the Travel expense type.

Figure7. Wireframes, to the left the Confirmation page of the Travel expense type, center shows attach receipt, and
to the right the Reference number page.

7.2.3.

Usability Testing

This test included a user (a random consultant) who represents the target group and I who
participated as an observer. The procedure was very similar to the one at first iteration.

23

Usability goals

The user should be able to recognize and understand each wireframe-page.

The user should be able to identify the process of registration of travel expenses: log-on, choose
the Travel type, understand the Travel expense fields, continue to the get a confirmation,
identify the take a photo button, and upload the picture of a receipt.

Scenario

The location was the education room of the company, where I sat in front of the user. The user was
told that this was an improved sketch of the Expense registration application and that we were going
to go through a registration of a Travel expense. The questions asked were: (see figure6 and 7 to
understand the questions asked with the wireframes)

Do you recognize this page (Log-on page)?

Could you tell me which button would you press to log on?

Could find and point the Travel button?

Do you understand the terminology used in the Travel expense page?

Which button would you press to continue after filling up the fields?

Could you tell me what would you do in this page (Confirmation page)?

Could you tell me what would you do in order to attach a picture of the receipt?

Were you able to understand the process (registration of the Travel expense)?

Results

The user was able to identify the log-on page and the purpose of the button Log-on.

The user found the Travel button at the new Menu page with no problems.

At the Travel page, the user was familiar with the terminologies of the fields. And it was easy to
identify the button Confirm.

At the Confirmation page, the user identified the Take a picture and Ok button.

The user was able to understand that the process was done correctly when the reference number
was given.

Conclusions of Usability Test

The user identified successfully the process of registration of Travel expenses using the new
wireframes, recognized the different action buttons and fields and understood the terminology of
them. The user was able to acknowledge that the process was over at the reference number page.

24

7.3. Visual Design

This part of the process is about deciding the correct colors, font types, and design of the logo. I
believed necessary to make mockups with these new improvements.
The company has a document where one can find their brand guidelines, part of these guidelines
contains specifications to develop and maintain the graphic design elements of Evry. Even though
the document does not mention any specification for mobile apps, I will still follow them in order to
get the correct brand expression.
7.3.1.

Colors

During my internship I had a conversation with the Marketing Manager of the company. She
mentioned that Evry is looking to transmit a clean and simple brand expression, meaning that the
colors should regard the nature and a clean environment. Therefore, the colors of the different
backgrounds, fonts, buttons, and icons should not be darker than the primary color (#063954) used
in the EVRY logo. For this application I will only use the primary colors.

Figure8. The color palette with primary and secondary colors (Brand guidelines page 85)

Header

The header background area uses a gradient of: #D6D3CF and #EFEDEC

25

The name of the application: #87807C

The title of all the pages: #063954

The small buttons for navigation at the header (previous page, user button): #00ADD3

Body and Navigation

The background of all pages: #FFFFFF

The font color of the main menu (Menu page): #063954

The background of the arrows of navigation at the main menu page: #B7B3B0

The buttons of form pages (log-on, type expenses forms) uses a gradient of: #006293 and
#063954

The main menu background buttons: #EFEDEC

The font color for the text fields: #373534

The font color for all the select menu and check box fields: #222

7.3.2.

Font types and sizes

According to the brand guidelines the font type ITC Avant Garde Condensed is used for headings,
Arial is used for text in general, and the Evry Script is the font used for the EVRY logo
Header

The title of the headers: ITC Avant Garde Condensed, 18px bold.

The small buttons for navigation at the header (previous page, user button): Arial, Sans-Serif;
12.5px.

Body and Navigation

Arial, Sans-Serif; 16px bold for:

The font of the main navigation menu

The font used at buttons at form pages (log-on, type expenses forms)

The font color for all the text and select menu fields (not bold).

7.3.3.

Buttons and fields

Having in mind that the focus of the design is for iPhone devices, it is obvious to think that buttons
and field elements should not be too small, Apple recommends that they need to be at least 44x44
pixels. But in Photoshop I applied the following sizes:

The navigation buttons (back buttons and top buttons) are 52 x 32 pixels

26

The main menu buttons are 298 x 41pixels

The form buttons and form elements are 298 x 42 pixels

7.3.4.

Logo and images

In figure9, it is presented the logo of the application. It was created it by putting the existing logo of
the company next to the name of the application using the ITC Avant Garde Book Condensed font
type. There was also a consideration of space between the word EVRY and the name of the
application; this can be observed in figure10.

Figure9. The Expense Registration application logo

Figure10. To the left the Logo of EVRY with measurements regarding space, to the right the scale X

27

Figure11. Final mockups, to the left the Log-on page, and to the right Menu page

Figure12. Final mockups, to the left the Travel page, and to the right the User page (includes a log-off button)

28

7.4. Conclusions of Iteration 2

I created successfully a new set of wireframes and so they brought a better perspective and
understanding of the functionality of the application. These wireframes were tested by a user
and they passed the test.

I made a detail of the report of the visual design elements, such as, colors, font types and sizes,
buttons and fields, and of the logo. This will be of a lot of help when implementing the HTML
and CSS code within jQuery Mobile.

I did not make any wireframe design to show how errors would be handled. But at least I made
a description of them.

8.0 IMPLEMENTATION
8.1. Electronic Prototype
In order to implement the user interface in Neptune, I thought convenient to first make de HTML5
and CSS code using Adobe Dreamweaver. The software also makes it easier to work with the
syntax

of

the

architecture

of

jQuery

Mobile.

The

pages

are

hosted

at

http://evryapp.byethost13.com/expenses/log-on.html
8.1.1. Basic HTML5 and jQuery Mobile

Here is a very brief description of a HTML5 document working with jQuery Mobile. From figure13:

New type declaration for HTML5 <! DOCTYPE html> (line 1)

The viewport Meta tag allows the page to be adapted to the mobile and disables zooming (line 5). I will
use this configuration for all the pages.

JQuery Mobile requires linking its script and CSS code, either from CDN hosted versions or by hosting
the files in our server (line 6 to 8). At the moment January 2013, the latest stable version is 1.2.0.

Normally, it is used a div-based markup to work with jQuery Mobile, but this practice is a bit
old and busted. Nowadays, it is possible to markup content using the HTML5 tags <section>,
<header>, <article>, <footer>, <div>, and others. I find it a bit confusing yet to use the new tags
<section> and <article>, so I will use the <section> tag to wrap pages and <div> tags to refer to
the content and body parts.

JQuery Mobile does not need a specific markup but it needs us to indicate the role of the content
area. To do this, jQuery Mobile uses a custom data attribute: data-role, and it includes: page,
header, content, and footer (line 11 to 16).
29

Figure13. Example code of HTML5 and jQuery Mobile

For better understanding of my approach, I divided the coding part in a description of the number of
pages created, the different page elements used, and finally the styling part.
8.1.2. Pages

I created the following html pages based on the final mockups and completed with the information
from the functional specifications detailed in chapter 6.

Log-on.html (authentication page)

Menu.html (main menu page, listing the five types of expenses and a the history of expenses)

User.html (log off page, about page, help page, links to evry.dk and to the Evry app store)

Travel.html, tra_confirm.html (travel expense type pages)

Accommodation.html, acc_confirm.html (accommodation expense type pages)

Perdiems.html, diems_confirm.html (per diems expense type pages)

Mileage.html, mile_confirm.html (mileage expense type pages)

Expenses.html, exp_confirm.html (expense type pages)

Viewhistory.html (history of registered expenses page)

Attach.html (attach receipt page)

Done.html (reference number page)

8.1.3. Header, navigation and buttons

The header holds the title of page and in most of the pages a back button. As an example I will take
the code of the header of Travel.html

30

Figure14. Part of the HTML code of travel.html (header)

From figure14:

In line 15 we can see the HTML5 <header> tag and the jQuery Mobile data-role attribute
belonging to the header. The data-theme attribute is used for theming specific areas, in this case
the header.

In line 16, I activated it the back button and the arrow icon. This means that when tapped or
clicked it will go to a previous page. Note that in order to achieve that functionality the attribute
data-rel should be set up to back

In line 17, it is simply the name of the page using heading1.

8.1.4. Form elements

I used only form elements at the body of pages, specifically at the Log-on page and the different
expense type pages. I will take as examples the log-on and travel pages to show most of the form
elements I used.
Forms need to be wrapped inside a form tag and must be specified an action and method that will
handle the form data processing on the server. It is also very important that id attributes for each
form are unique across the entire site. This is because jQuery Mobile will load the origin and
destination page into the DOM at the same time to make a smooth transition. It is also important to
establish a relationship between a form field and its label, so the for attribute of a label element
should correspond to the id attribute of an input element (see lines 23 and 24 from figure15).

Figure15. Part of the HTML code of log-on.html (form elements)

31

Input types

In figure12 we can observe the text, password, and submit input types. An important feature of
jQuery Mobile is that we can hide the label of some input types by adding the class attribute uihide-label and setting it up to true (see results in figure 17). I have also used the input types date
and number, their syntax is very similar to the ones mentioned above.
Select Menus

JQuery Mobile will automatically enhance all native select elements with no additional markup
required. To make a Select Menu, we simply need to call a select element through the jQuery
Mobile <select> markup and a set of option elements with a value; note that the attribute for at
the label element and the attribute id of the <select> element are identical because they need to be
semantically associated. (figure16 lines 24 to 33)

Figure16. Part of the HTML code of travel.html (form elements SELECT and CHECKBOX)

32

Figure17. Screenshots (iPhone 4), to the left the log-on.html page, and to the right the travel.html page

Checkbox

Checkboxes are As with Select Menus, checkboxes are automatically enhanced by jQuery Mobile
and they are styled by default to be more touch-friendly. When creating a single checkbox as in
figure 13, we need to add an input with an attribute type checkbox and a corresponding label.
8.1.5. Styling

The theming system of jQuery Mobile takes advantages of CSS3 properties so we can add rounded
corners, box and text shadows and make nice gradients without the use of any images.
JQuery Mobile has a group of themes and calls them swatch, by default there are five themes (a,
b, c, d, and e) and each consists of a header bar, content body, footer, and button states that can be
mixed This was of great help, specially theme d has similar styling to the brand guidelines of
Evry. As when I started styling the Html pages, I did not know how to customize properly the datathemes, therefore the form buttons use the c theme, while everything else works with the d
theme.

33

I will take as examples of explanation three pages. In some of them I made inline styling since there
were things that only needed to be changed for certain elements, but for most of the big
customizations I used external styling (expenses.css).
Log-on.html

The result is shown in figure17. The page is composed only of a body, which in jQuery Mobile
terms is data-role=content. The modified style of this page corresponds to the logo-figure, to join
both input text fields to show them as one block and reduce the round borders, and to modify the
color of the input submit button.

Figure18. Part of CSS code of the log-on.html page

The CSS code from figure18 shows that border radiuses are reset, the top radius borders of the user
field are kept rounded, and so the bottom borders of the password field. So we end up with a block
of input text fields. Note that one em unit corresponds to 16 pixels, but this relation belongs only
for this example, since one em unit is related to the font size.
In order to style the borders of all the buttons (except input submit buttons) I modified the class .uibtn-corner-all. For the submit buttons the class .ui-btn-up-c had to be modified. In figure 19
line60, we can see how the gradient was applied.

Figure19. Part of CSS code of the file expenses.css

34

Menu.html

The menu page is composed of a header and a body-content (as all the others, except log-on.html).
The header has two small navigation buttons to the sides and in the middle the logo of the
application. JQuery Mobile allows us to do all this with no extra CSS but just adding the correct
classes.

Figure20. Part of HTML code of the menu.html page (HEADER)

From figure20 we can see that I added the classes ui-btn-left and ui-btn-right, also at line 28 I
added the data theme d. It finally worth mention that the attributes data-transition and datadirection defines the type of transition between the menu page and the user.php page.

Figure21. Screenshot of the menu .html page

(iPhone 5)

35

Figure22. Part of HTML code of the menu.html page (Body part menu list)

The code from figure22 denotes the data-role list view; this will bring a set of list items, and
together with a link will active an interaction. Each list can be styled to contain an image by editing
the CSS class .ui-li-thumb (images are 36x36 pixels), and by adding several headings or
paragraphs. These lists can also accept the data-transition attribute.

8.2. Neptune Application Designer

The application designer is part of the Neptune software, which includes four main components:

Neptune Application Designer, where applications (pages) are built using HTML5, CSS3 and
JQuery Mobile.

Neptune Application Class, that handles the business logic part. Allows the creation of ABAP
object classes. Public attributes in the application class can be used for binding in the
Application Designer.

Neptune Application Builder, that organizes projects and contains the applications created with
the designer. Also offers the great tool to translate all field labels of each application into
another language.

Export to Phonegap, this component provides a user interface for preparing the application,
splash screens, icons and Phonegap API features.

To be able to install Neptune in my computer, I had to first install SAP GUI of Netweaver v 7.0 for
Windows on my personal computer. After that I was able to access the system DE5 where the
Neptune software was installed (see figure23).
36

Figure23. SAP GUI showing access to the Neptune Components

The first thing to do was to create the exact same pages I created in Dreamweaver, add a description
and title for each of them, and select the plugin to be used (jQuery Mobile). As example I will
explain the application MENU_EXPENSES (menu.html), and show how to import the HTML and
CSS code created in Dreamweaver.
8.2.1.

Menu_expenses

First of all, as I mentioned before and as I would recommend, I created all the applications and kept
them empty, this because Neptune needs to recognize existing applications when choosing the
option to navigate to another application. Then, I created a project EXPENSE_REGISTRATION
using the Neptune Application Builder, and added all the applications to this project.
In order to replicate what was done in Dreamweaver, there were two choices, either to create the
application from scratch by dragging the HTML5 library included in the Application Designer and
then manually adding all the attributes and style to the elements, or to import the HTML code by
right clicking under HTML5 Document.

37

Figure24. Screenshot of the Application Builder showing all the applications created

I used the last option, but implicated some customization of the document. By default the
Application Designer adds text-tags to all imported div-tags and some of the classes and id
attributes are not imported. Also, it is a good idea to add a name attribute to all the objects (tags)
in order to understand the structure of the Application.

Figure25. Screenshot of the MENU_EXPENSES application

38

The custom CSS can be attached to the Stylesheet area as code, or uploaded it as a .css file at
MIME repository folder, which handles all files like images and customs CSS sheets. I preferred
to add the CSS code to the Stylesheet area window; Neptune creates then a file called app.css.

Figure26. Screenshots, to the left Stylesheet window, and to the right the MIME repository folder

Figure27. Screenshots from the Chrome browser, to the left the application made in Dreamweaver, and to the right
made in Neptune

39

9.0 FINAL TESTING

9.1. Purpose
The main purpose of this test is to know if the application fulfills the expectations had when
analyzing the problem statement, which involved how to achieve usability and a good user
experience regarding the use of an Expense registration app. I have previously made two usability
tests; unfortunately, they were only made using plane wireframes and their purpose was to know if
the end user was able to understand the process of navigation in order to make an expense
registration, which in that case the Travel expense type was used.
Now after going through the different phases of the development of the project, I count with an
electronic prototype which in reality is more than only a prototype since this could be immediately
used in Neptune to start working on the back end layer.

9.2. Test Approach

This is the approach with regards of testing usability and user experience. I based it on my
understanding of the User centered design (Wikipedia, User Centered Design: 2012) and from
chapter 11 Testing iOS Webapps from the book of Andrea Picchi (Picchi 2011: 389).
Phase 1: Self-test

I compared the purposes and goals of the project from chapter 5, and the scenarios and functional
requirements from chapter 6 with the final prototype compiled in Neptune Application Designer by
making a list.
Phase 2: Extra code

I added some server-side scripts in PHP to the form pages to allow the participants to have a closer
interaction to a complete application by simulating the interaction of the backend
Phase 3: Scenario

I made the test with a user from the target group (Consultants from Evry). The test was made
between the participant and I who sat in front of him at the education room of the company. The
participant was told that this was an improved electronic prototype of the Expense registration
application and that he was going to go through a registration of a Travel expense. Fortunately, the
participant was used to do the process at his desktop computers, and there was no need of extra
lecturing about explanation of the application. So I let the user to go through using his intuition and

40

I started to take notes regarding his number of touches/taps, number of mistakes and estimated time
of arrival (Picchi 2011:405), also about his emotional response towards the experience.
Regarding the minimum number of touches/taps is fifteen (15) considering from the Log-on page
until reach the Reference number page where the registration is done, and there are six screens
involved, see figure30.

Figure28. Touch event diagram for registering a Travel expense

Afterwards, I asked the participant the following questions:

Did you feel comfortable in using the application?

Did you understand the process of registration?

Do you feel satisfied, and does it cover your expectations?

Was there anything that made you doubt regarding labels, fields, and buttons?

Do you think there could be any necessary improvement to the functionality or information
design?

41

9.3. Results
Result phase 1: Self-test

The application fulfills main purpose which was to deliver which was to deliver a final
product/prototype in Neptune, applying a user centered design.
The application covers all the functional specifications, which briefly includes: a Log-on page, a
Menu page, five types of expenses pages and their respective forms and confirmation pages with
option to take pictures of the physical receipts, and finally a reference number page. Also, includes
a User page with the ability to log off and find technical help, link to the website of Evry and their
applications store.
Result phase 2: Extra code

I created five PHP/HTML5 pages to handle temporary string text-data when filling up the fields of
the five types of expenses; this creates the experience as if there were a backend system already
implemented. From figure29, the $_POST variable is used to collect values in a form with
method="post", in our case is the form from the Travel expense type travel.html. Later this values
are called (<?php echo $project; ?>).
The confirmations pages have also been updated to handle access to the iOS camera through safari
as a web app. <input type="file" accept="image/*" capture="camera">

Figure29. Part of the tra_confirm.php page (Travel confirmation)

42

The result is shown in figure30

Figure30. Screenshots of Travel.html and tra_confirm.html

Result phase 3: Scenario

The participant made 19 taps, because of exploring Web application.

The participant did not make any mistakes with regards of misidentified areas but got a bit confused
when using the API menus of iOS.
The estimated time was of 1 minute and 10 seconds until reach the Reference number page.
Regarding the questions:

Did you feel comfortable in using the application?

Yes, even though it was my first time seeing this structure, I believe I knew where to go and
what to do through the process.

Did you understand the process of registration?

Yes, I am used to do it on my laptop and the features are the same, just in a smaller screen and
with a nice layout.

Do you feel satisfied, and does it cover your expectations?

43

Yes I do, and I believe it does. I hope they will implement this app soon, looks like a really
good idea to have at the company.

Was there anything that make you doubt regarding labels, fields, and buttons?
In the beginning I doubted whether I could understand it, but I do the travel expenses all the
time so I think I adapt it very fast to the pattern.

Do you think there could be any necessary improvement to the functionality or design?
I think it would be nice to make the take a picture-button a bit bigger, but besides that I think
everything looks nice.

9.4. Test conclusions

The first part of the test was covered successfully, I was able to compare and to proof that the
purposes, goals and features of the application were implemented in the electronic prototype and at
the Neptune Application Designer component.
In the second part I could test the functionality by myself adding some PHP code, which allowed
me to go forward in the third test and improve the test of the user experience when testing the
application with an end user.
In the third part the participant was able to register perfectly a Travel expense, and had a good user
experience by using the prototype.
In average I will say that the user interface of the application has been implemented under the
purpose and requirements established in the first chapters.

10.0 CONCLUSIONS
The main goal of this project was to achieve usability and a good user experience when using the
Expense Registration application. I believe that this goal has been achieved. From the start of this
report, I focused on describing the limitations in use of the actual system and the tendency to
implement mobile applications. These mobile applications of course need to have a foundation, and
therefore first, they should be looked from a business context perspective; by analyzing the target
group, and the pros and cons and the main necessity of implementing one.
Further, the project describes the tools and methodologies to use in order to analyze, design,
implement and test what is now the graphic user interface of an Expense registration application,

44

always oriented in the needs, wants and limitations of the end users. For this, I started identifying
the target group and creating fictional characters that helped to understand what mentioned above.
The approaches of designing required to research and analyze the requirements and functions of the
actual desktop system. Afterwards, two iterations were made, which helped to not stress the work
under only one phase, which made the process faster, more agile and less stressful. In addition,
designing tools like wireframes and mockups have played a very important role, each of them being
made at their respective iteration, were submitted to a usability test performed by a SAP Consultant
from Evry and observed by the author of this report.
The implementation of the user interface was divided into two phases, the first by creating and
editing the HTML and style code in Adobe Dreamweaver and hosting the pages in a free-server, to
later on import the pages to the Application Designer of Neptune. This method proofed to be very
efficient.
As the last phase, the final test confirmed that the design and final product/prototype of the user
interface fulfilled the goals of the project in mention, and the expectations of the stakeholders.
During the project process I have acquired new knowledge and experience regarding the use of
image editor and web tools like Adobe Photoshop, Adobe Fireworks and Adobe Dreamweaver.
Moreover, it has been a very educational experience having learnt a basic introduction to the SAP
systems, and to be part of this little contribution of designing and implementing the user interface of
an application using the Neptune software.
Finally, I hope this report will be useful to other designers/developers to recreate or find inspiration
with the approach I took on the development of a business oriented application.

11.0 BIBLIOGRAPHY

Picchi, Andrea (2011) Pro iOS Web Design and Development: HTML5, CSS3, and JavaScript
with Safari. Apress.

Garret, Jesse James (2011) The Elements of User Experience: User-Centered Design for the
Web and Beyond. New riders, 2nd edition.

Neil, Theresa (2012) Mobile Design Pattern Gallery. Oreilly, 1st edition.

Wikipedia (2012, 19th of December) HTML5, at http://en.wikipedia.org/wiki/HTML5

45

Wikipedia (2012, 31st of December) JQuery Mobile, at

http://en.wikipedia.org/wiki/JQuery_Mobile.

SAP AG (2001) Travel Management (FI - TV) Release 4.6c.

Wikipedia (2012, 29th of December) User Centered Design, at

http://en.wikipedia.org/wiki/User-centered_design.

12.0 APPENDICES (Screenshots)

Pages found at: http://evryapp.byethost13.com/expenses/log-on.html

log-on.html

#problems

46

menu.html

travel.html

tra_confirm.html

47

accommodation.html

acc_confirm.html

48

mileage.html

mile_confirm.html

49

perdiems.html

diems_confirm.html

50

expenses.html

exp_confirm.html

51

history.html

done.html

52

user.html

about.html

user.html

53