MAKING USER-FRIENDLY EXPERIENCES THAT LEVERAGE ONLINE COLLABORATION
UX Research, Web design and development, Iterative process.

The recent rapid advancements in web technologies has led to an increase in the development of new devices, applications and methods of interaction that are continually evolving. However, the rate of these technological advancements outpaces those of design.

DETAILS
  • Author: Sebastian Paz - VUW
  • Degree: Masters of Design Innovation
  • Location: Wellington, New Zealand
  • Date: 2018
ABSTRACT

This thesis sets to understand social aspects of online collaboration, new design methodology, and to design and develop a user-friendly interface for both front-end and back-end admin area to leverage the online collaboration within an educational setting. Using both iterative and experimental approaches, I have tried and experimented with a few content management systems(CMS) in order to find their strengths and weaknesses. These CMS being Joomla, Drupal, SilverStripe and Wordpress. Then continued to developed a set of prototypes in which the research findings were applied to aid in the usability of both the front-end admin area and the back-end website.

DESIGN OUTPUT
THESIS PDF
FEATURES
  • UX DESIGN
  • WEB DESIGN
  • WEB DEVELOPMENT
  • USER RESEARCH
  • TOPIC RESEARCH
  • PROTOTYPING
TECHNOLOGIES USED
  • HTML 5
  • CSS 3
  • JAVASCRIPT
  • jQUERY
  • PHP
  • MySQL
  • FOUNDATION CSS
SOFTWARE USED
  • ADOBE PHOTOSHOP
  • ADOBE ILUSTRATOR
  • SKETCH
BACKEND CMS
  • WORDPRESS CMS
  • SILVERSTRIPE CMS
  • JOOMLA CMS
  • DRUPAL CMS
WEBSITE FEATURES
  • CUSTOM MADE USER FRIENDLY CMS UI
  • DYNAMIC WAY OF CREATING CONTENT
  • ADDING STUDENT CURATED CONTENT AS SHOWCASE PIECES
  • EDIT ALL CONTENT OF THE WEBSITE
THESIS INTRODUCTION

This thesis focuses on creating a user-friendly experience for a sustainable and collaborative academic community website which showcases different work. The “users” in this case covers front-end users which include; prospective students, current students and their friends and family, as well as; administrative users student representatives, lecturers, tutors and course admins. Prior to my thesis, I had an idea of making a self-sustainable School of Design website which was run by students and made by students. The aim of it was to generate a collaborative community where students will have their work stored and curated. By the end of the students degree they will have a safe location to access their stored work. Because of this idea, I joined a group of graduates who had a similar goal. As a result, one of the contributors lecturer Walter Langelaar created a group in a VUW internet design course. During this course, I was a tutor. We included a project for students to continue on the development of the website under our supervision. This leads the students to learn, design and develop while collaborating with each other. This collaboration was done through the use of external software such as GitHub and google docs. After the end of the paper, I saw the advantages of what a group of students can design and develop as a community for a website that they will feel connected and showcase their own work in the future.

The research in this thesis focuses on two different categories: Online collaboration and usability design. The research into online collaboration explores a few themes. These themes include the culture, guidelines, lessons and the social aspects of online collaboration. As for the research into usability design, this research focuses on 6 applying the knowledge acquired during the online collaboration by looking into the themes of the psychology of design, user experience for the web and how to design for forms.

After the research was done I understood some of the challenges and downsides of both the usability of most admin areas and the usability challenges that front-end designs have for displaying data. Some of the downsides for the admin area shows in their lack of instructions, the lack of available types of fields and lack of documentation. As for the front-end design challenges they mainly show in the availability of content. How to get to the user's destination with the least amount of clicks.

But to properly understand most CMSs (Content Management Systems) This thesis experiments with some of the most popular CMSs in the market, and shows in more detail their strengths and weaknesses of their out of the box state. These content management systems being: Joomla, Drupal, SilverStripe and Wordpress. By understanding these challenges and the testing and exploration of some content management systems and throughout an iterative approach at designing new interfaces and the development of prototypes to attempt at solving these challenges for an academic websites run by the online collaboration of staff and students. During this process, some solutions to such challenges were found an applied.

How to make user-friendly experiences that leverage online collaboration? This is the topic of this thesis. I have spent 12 months trying to answer that question while designing and developing an experimental custom built WordPress content management system and a new interface for the web user to be able to get the information needed within very few clicks.

SCREENSHOTS - WEBSITE HOMEPAGE
SCREENSHOTS - CUSTOM ADMIN UI WORDPRESS
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 1
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 2
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 3
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 3
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 4
SCREENSHOTS - DYNAMIC PAPER/COURSE ENTRY PART 5
SCREENSHOTS - DYNAMIC DROPDOWNS