Report of PLP UX design, CMS and

Development perspective.

By:
Artrs Graumanis
Councilor:
Bjarne Slipsager

Lillebaelt Academy May 2015 Course: Web15fi

Website:
http://live-artuu-portfolio.pantheon.io/

Contents
Executive summary ................................................................................................................................. 3
Introduction ............................................................................................................................................ 3
Assumptions ............................................................................................................................................ 3
Problem formulation ........................................................................................................................... 3
Limitations ........................................................................................................................................... 4
Methodology ....................................................................................................................................... 4
Research and process .............................................................................................................................. 5
CMS ..................................................................................................................................................... 5
Choice of WMP ................................................................................................................................ 5
Development installation and choice of connectivity...................................................................... 5
Theming........................................................................................................................................... 5
Information architecture, orientation within CMS .......................................................................... 6
UX design............................................................................................................................................. 7
Interaction design............................................................................................................................ 7
Interface design ............................................................................................................................... 8
Usability design ............................................................................................................................... 8
Conclusion ............................................................................................................................................... 8
Bibliography ............................................................................................................................................ 9
Appendix ............................................................................................................................................... 10
Appendix 1) ................................................................................................................................... 10
Appendix 2) ................................................................................................................................... 10
Appendix 3) ................................................................................................................................... 10
Appendix 4) ................................................................................................................................... 11
Appendix 5) ................................................................................................................................... 11
Appendix 6) ................................................................................................................................... 11

Executive summary
This report will clarify the UX design, CMS and Development side process of 1 st semester students, at
web development faculty, process of making, tools and methods used to achieve the intended goal of
Personal Learning Portfolio website. The report will introduce the goals and state a problem
formulation that is faced during the progress of development. It will indicate different limitations and
as well methodology list in use to provide the websites functionality. Therefore a description of resolved
content will be unfold in a contextual presentation. It will describe the steps taken to achieve the
portfolios result.
The content of report will describe different uses of methods and tools and define the purpose of these
means to be used. It will go in detail about how and why the use of Pantheon as a website management
platform is used to sustain Drupal. It will also include different uses of modules to accomplish result.
Development environment of the PLP description as well as the reasons of different choices made
regarding to user experience accomplishments for the sake of refining the Students Personal Learning
Portfolio.

Introduction
This report will describe the process of making a Personal Learning Portfolio. Here I will define subject
oriented description of such PLP from UX design, CMS and development perspective.
The objective is to create a digital, CMS oriented, portfolio for students to represent their work. The
purpose of PLP is to highlight the skills and thoughts from the perspective of web development student.
The general cause of such report from the CMS and Development perspective is to describe the use of
CMS factors taken in consideration. This is so to establish the development environment and make use
of inquired Content Management system Drupal. This also will involve the choice and description
of desired content, functionality and the choice of website management platform.
The general cause of such report from the UX design perspective is to describe the use of UX factors
taken in consideration to construct the best user oriented layout. This involves interaction, interface
and usability design of the website.

Assumptions
Problem formulation
Based on Personal Learning Portfolio requirements1 file provided by the councilor, I will define the
problem statement:
If I am to use CMS Drupal, on which website management platform I am going to sustain the
PLP?
How am I going to organize my development environment?
How am I going to resolve the functionality?
How am I going to achieve my desired content?
How am I going to resolve the interaction, interface and usability design (UX)? !

Bjarne Slipsager, (11/08 2014). Personal Learning Portfolio overview of structure and content. Retrieved from
http://fronter.com/eal/links/files.phtml/750482923$220415851$/SEM+INFO/02.+Detailed+contents+and+struc
ture+of+teaching+activities/Personal+Learning+Portfolio+project_prcent_281_prcent_29.pdf

The problem formulation defines the possible outcome of the website. Based on methods and tools
used to achieve the best product in terms of functionality, content and human interaction. The visual
component (human touch) is not assumed as corresponding or liable variable as it is defined by human
personality and in this case it is the choice of project author.

Limitations
Implementing and creating a new sub-theme turned out to be quite strive due to the level of knowledge
and experience, although expected, but quite a barrier to achieve the intended result.
The use of website management platform Pantheon provided with unexpected server slowdowns
and issues leading to reduced productivity.
Choice of development environment concluded on decision to change the way of implementing the
code directly as the preferred connection was SFTP. This way of coding caused a time management
unsettlement.

Methodology
Providing a problem formulation helps with defining the objective and productivity of the development
process and structuring of development environment.
Decision and research about trending design, wireframing hi-fi2 product gives a diverse decision on the
result and display of information architecture.
The use of Pantheon3 as the website management platform provides different variables that improves
not only the workflow but security as well, apart the limitations mentioned above.

Pantheon has a simple way of installation when it comes to CMS Drupal.

Simple safety guard and update system.
Pantheon developers are active.
Simple staging of progress (dev/test/live) as well as backing up files is as simple as installing
Drupal on it.

Views module provides with a simple and efficient way of orientating and organizing the content and
layout of the page4.
Font awesome5 module provides with a different way of styling the text and menus by giving the
possibility of providing an SVG icon to any menu element. The module also fixed mobile view problem
of defining the header looks and layout.
Ajax timeline6 module provides a block with a timeline like preview of the content, perfect for reflection
based intents.

http://designingwebinterfaces.com/explore
https://pantheon.io/
4
https://www.drupal.org/project/views
5
https://www.drupal.org/project/fontawesome
6
https://www.drupal.org/project/ajax_timeline
3

Research and process

CMS
Based on the information provided by the PLP structure description1 the main purpose for it is to
highlight the skills and progress of the student as a web developer. The main way of displaying such
content, based on the description, is to use Content Management System and chose the satisfactory
Website Management platform for the CMS.

Choice of WMP
Laid out in an article on how to pick the right WMP7, the main goal is to identify the pros and cons of
the CMS in use to figure out the right WMP solution for the purpose. For that matter as a web
development 1st semester student I did not indeed go in that deep as to figure out the right WMP for
the inquired CMS. This would be important when it comes to figuring out what exactly am I dealing
with, the purpose of the website and defining the financial side of it. As a student the choice is to stick
with the provided website management platform by the councilor as I trust the judgement of choice
based on the educational systems level of teaching. As the exposed WMP for our semester in use is
Pantheon my thought was simple, sticking with it.

Development installation and choice of connectivity

As defined development environment starting stage is to integrate Drupal into Pantheon and choosing
the connection in means of pursuing workflow progress on the website.
Pantheon platform provides a way of organizing and laying out CMS from a simple dashboard.
Dashboard layout and functionality contributes in quite a lot of positive influence over the workflow of
the website. User interface is simple and easily understandable among other things like collaboration
between team members, backing up files for safeguard and all sorts of different security measures. It
provides staging phases for even more secure way of defining and securing the progress of work
(development/testing/live stage). The platform is good with system maintenance and developer team
is active and implicated to provide the best service, leaving the customer happy, satisfied and secure.
Pantheon resorts in two ways of pushing the code onto the servers Git and SFTP. Although for the
group assignment work progress and good team member collaboration the choice was Git connection,
my initial way of pushing was through SFTP directly through FileZilla when it comes to PLP. As I might
admit SFTP connection was not the best way of going. Apart from the ease of team member
collaboration Git connection provides a systematic file transfer layout (commit log). This sort of charting
gives an easy way of backtracking the issues where SFTP connection is more direct and unconditional,
although still possible to commit. The main difference is that Git is commit log oriented where SFTP is
a connection with more or less direct approach.
As mentioned above the installation of CMS onto this platform is simple and pretty much one click
action.

Theming
Drupal consists of several core themes to use and organize as necessary. Also there are twice as many
theming possibilities downloadable on the internet. This means that the variations and choice options
are diverse.

http://www.entrepreneur.com/article/237693

For my PLP the choice of theme is one of the core ones. I made a decision of creating my own theme
for my own purposes by using a core theme named Bartik and created a sub theme to play around
with.
The steps of creating a sub theme can be treacherous for unexperienced beginner but pretty simple
when you get the hold of it. There are quite a lot of introductions and manuals that cover the extraction
and implementation of sub theming as well8.
The reason for creating a sub theme instead of making a new theme from scratch was simple enough,
the need of general layout of the page. The layout allowed the process of theming go much smoother
and faster, although it would lead to the same result if a completely clean start would have been
chosen. The theming process involved various changes into frontend as well as backend part of the
core. Using a sub theme opened an already structured content layout of theming, allowing the process
of structuring content to be simpler and faster. The frontend part of coding is initial and as important
thus allowing the actual layout to be determined. Frontend coding involving various .info file changes
to include .js files, .css files, etc., apart from HTML and CSS code extraction and implementation.
As mentioned above various MODULES are included as well to ease the content flow and improve the
functionality of the website. As the work was done through SFTP connection the modules are included
directly in the correct folder (code/sites/all/themes/sub-theme-name). As to benefit modules
different libraries are to be added as well (-//-/all/libraries) for example font awesome library. The
custom modules gain several fixes as to benefit the websites purpose, for example. Ajax timeline
module, different styling implementations is done to deserve the looks as intended as well as core code
.module file is improved also, to fix various bugs concerning teaser display for Drupal attunement.

Information architecture, orientation within CMS

As for information architecture9, the basis have been defined by the PLP project description (A1). There
after the creation of content types and defining the layout and structure comes in. The information
architecture for such portfolio is pretty simple and defined by the project description and there is no
need of defining new rules which would influence the functionality. The menu and submenu headings
are defined through a simple approach. The part where a continued parade of architecture has to be
displayed is up to the student. This involves figuring out the layout and the most effective and
sustainable way of presenting the information architecturally so that any user would easily understand
what is going on. The goal is to find solution of information relevancy, how items fit together to one
another within the system.
Views
The use of views comes in handy when it arises to orientating and laying out the content. The views are
used pretty much on every page to define a specific layout and structure, also essentially providing Ajax
page load.
Views are the whole structure of the page content. By creating specific subject related content types,
the page within the view is being displayed, and defining the content type to be displayed within these
views. Creates a nice and smooth way of organizing information throughout the website. The rest of
the visual looks is determined through frontend coding. Including different JavaScript and jQuery codes

https://www.youtube.com/watch?v=dS4JR0BbKO8, http://www.apaddedcell.com/how-create-drupal-7theme-scratch
9
http://www.usability.gov/what-and-why/information-architecture.html

for functionality and actions. Defining content-wise with simple HTML and of course CSS for visual
representation.
Ajax timeline
This module is used to create a way of displaying different content for specific time and date, perfect
for reflections. This module is defined as a block within the website and organized accordingly through
blocks section. The content of the module is written within a relevant content type. The module is fully
responsive and is simple when it comes to information architecture.
Font awesome
The module is pretty much self-explanatory. It defines a different way of displaying text for menus by
the use of SVG icons. The library of the icons is included into the library folder as explained before. The
rest is set within the Drupal user interface by going into Structure/Menus/Main menu (as an
example)/edit the specific menu entry. This module provides with more possible inputs that can alter
the menu when editing. In my case I used Font awesome library of SVG icons to display them right next
to the text of the related menu. This is done by adding a class within the edit menu, starting out by fa
and continued by the class represented within the library. Library of classes is accessible to anyone on
their website10.

UX design
To achieve websites functionality at its best it is also mandatory to counter UX design steps. Providing
the user with the best way of interacting with the page is important otherwise the functionality is not
achieved. To accomplish the right UX approach there are three main theoretical steps that have to be
solved, which are interaction design, interface design and usability design. As all these principles
complement each other I will try to clarify the functionality and design down below as precise as
possible.

Interaction design
User interaction towards the website is very important and will define the users attitude towards it.
Bad attitude can result in various user actions that might not consist of the websites intended goal. As
for my personal learning portfolio I have chosen to integrate Googles Material Design11 principles into
the website. The general reason for this is that I like what Google is doing and decided to implement
their solution into my own PLP. As for that reason it also solves few design concerns that might hinge a
designer from the beginning of the project. Material design guidelines are worked through and adjusted
to theoretical user interaction principles towards a website. This does not only apply to interaction of
the website but as well partially on usability and interface of the PLP.
As from the interaction point of view the website is simplistic and easy to understand. The website does
not use much transitions or latency based actions, the functions happen immediately except the front
page interacting with About page. It provides a smooth scroll down to preview the content. The
website is device size responsive. Although cross browser testing was not the main pain point. As far as
the testing goes the website is functional on Chrome browser, Firefox. Although some minor details
were encounter on Firefox, that for a WebKit browser it does not recognize percentages the way it
should. The site is not tested on Opera or Safari browsers, although if presuming is on table, it should
be functional on Opera as it is WebKit as well. As for IE, not going to go there (not necessary).

10
11

http://fortawesome.github.io/Font-Awesome/icons/
http://www.google.com/design/spec/material-design/introduction.html

Interface design
The color layout of the page is straightforward, background is light gray, providing impression that it is
not meant to be interacted with. General content and text fields are white with round or 90 degree
edges (A3), depending on content. The functionality colors for buttons are contrasted and easily
decipherable and surely display the interactivity (A2). As the interface is mostly Material Design
centered, the layout is clear and efficient. The website is card like displayed and easy to understand.
The spacing between items are sufficient and does not counter for the reason of not distracting the
user with content collision. The padding of content is consistent, previewing hierarchy (A4). Colors are
carefully chosen to provide an interactive way of understanding, where an active button will be
displayed as disabled thus providing an understanding of it being in action and unnecessary to interact
with. Where active buttons are colored to display usability (A5). The page uses font HelveticaNeueLight to provide hierarchy and simplistic clarity.

Usability design
The website by all purposes is clear and self-explanatory. The architecture of the PLP is simple and
thought through. For this purpose wireframes came in handy as to define the layout of the website
(A6). The content layout consists of different variations of containers that produce familiarity with each
other. This adds the importance of the content and lets human eye recognize the content. This allows
the user easily recognize what is available and interactive.
As to testing users, the general content layout proves to be resourceful and understandable. I have had
arranged few people the curve of trying the page layout and see if it feels right. Provided the
information gathered it seems that the website is user-friendly and interactive none the less. Although
my general though did not go so far as to use an actual method of user-testing but instead a brief
overview. This still yielded the intent of acknowledgement, the site is user friendly.

Conclusion
To conclude, all of the provided information above defines, in contextual layout, the settlement of the
refined problem formulation from UX design, CMS and Development perspective. How it is achieved
through various stages by the use of different methods and tools. Although I will admit that the website
still needs improving and several bug fixes like more thorough cross browser testing and User testing.
The website proves to settle as quite refined and user friendly. By definition, but not intended use of
Material Design guide lines for the reason of resolving user experience was used during the whole
webpage development. This resulted in to functional, simple user interface which communicates
hierarchy and clarity throughout the website my Personal Learning Portfolio.

Bibliography
Books:
http://www.amazon.com/Using-Drupal-Edition-Angela-Byron/dp/1449390528 - Using Drupal, 2nd Edition,
Oreilly. Author: Angela Byron, Addison Berry, Bruno De Bondt.
https://www.drupal.org/node/1849868 - Drupal 7 Development by Example. Author: Kurt Madel.
http://shop.oreilly.com/product/0636920021827.do - Lean UX: Applying Lean Principles to Improve User
Experience. Author: Gothelf, Jeff, and Josh Seiden (2013).
https://books.google.dk/books/about/About_Face_3.html?id=9F7gaZKd2rYC&redir_esc=y - About Face 3: the
Essentials of Interaction Design. Author: Cooper, Alan Cooper, Robert Reimann, David Cronin (2007).

WEB-Material:
http://designingwebinterfaces.com/explore
https://pantheon.io/
https://www.drupal.org/project/views
https://www.drupal.org/project/fontawesome
https://www.drupal.org/project/ajax_timeline
http://www.entrepreneur.com/article/237693https://www.youtube.com/watch?v=dS4JR0BbKO8
http://www.apaddedcell.com/how-create-drupal-7-theme-scratch
http://www.usability.gov/what-and-why/information-architecture.html
http://fortawesome.github.io/Font-Awesome/icons/
http://www.google.com/design/spec/material-design/introduction.html

Appendix
Appendix 1)

Appendix 2)

Appendix 3)

10

Appendix 4)

Appendix 5)

Appendix 6)
Front page:

11

About page:

Related subject page:

12