Report of PLP Arturs Graumanis

Report of PLP UX design, CMS and

Development perspective.

By: Lillebaelt Academy May 2015 Course: Web15fi Artrs Graumanis Councilor: Website: Bjarne Slipsager http://live-artuu-portfolio.pantheon.io/

2

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

3

Executive summary This report will clarify the UX design, CMS and Development side process of 1st 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)? !

1 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+structure+of+teaching+activities/Personal+Learning+Portfolio+project_prcent_281_prcent_29.pdf

4

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.

2 http://designingwebinterfaces.com/explore 3 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

5

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.

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

6

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

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

7

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 http://fortawesome.github.io/Font-Awesome/icons/ 11 http://www.google.com/design/spec/material-design/introduction.html

8

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 HelveticaNeue-

Light 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.

9

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

10

Appendix Appendix 1)

Appendix 2)

Appendix 3)

11

Appendix 4)

Appendix 5)

Appendix 6) Front page:

12

About page:

Related subject page: