University of Dammam build blog part 1

Teaser and leader image credit: University of Dammam

The University of Dammam in Saudi Arabia have recently unveiled their new Drupal powered website.

We led the discovery and subsequent development phase to provide a solution that took into account the needs of many different user roles from within the university and its associated entities including prospective and current students, staff, deanships, alumni, local business and the University Hospital.

We worked closely with Inspiral Design, a London-based creative agency who specialise in Arabic typography to ensure the site provided a seamless multilingual experience. The result is a platform that has placed the University of Dammam (UD) at the forefront of the Arabic world in regard to higher education websites.

Rebranding

UD were looking for a complete overhaul of their online and offline identity, brand consistency was key. A long-term goal is to bring all university platforms in-line with the new brand guidelines. For this to happen, it was important for us to understand the range of internal and external systems used by students and faculty. Online and print style guidelines with clear examples have helped to ensure the standards we set can be applied to new and existing projects.

Analysing user requirements

Important user journeys were identified from our early discovery sessions and these fed into an initial sitemap. Questionnaires were sent to representatives of the colleges and administrative centers, asking for feedback on our early ideas and suggestions for what was missing. Analysing this feedback helped us to determine if any additional functionality was needed. New requirements that were shared across multiple groups would often get scoped out in detail and could result in dedicated functionality being developed.

Site structure and information architecture

With over 20 Colleges and up to 30 Departments within each College plus Deanships, Centers and a University Hospital, each section had their their own unique set of requirements, therefore, it was important that we took the time to understand the internal structure of the university. This allowed us to make a decision on how information could be shared across the site and as usual, taxonomy played a vital part in achieving this.

Wireframe prototype

To get a better understanding of page content, site functionality and also to test the user journeys, we created a wireframe prototype using Axure. This was a great way to share our ideas with a large group of international users and immediate feedback was received direct to each page using Axure’s hosting service called Axshare. This allowed us to open a dialogue and make quick updates which resulted in informed layout choices that all stakeholders were happy with.

 

ud-wireframes.png

 

Living styleguide

An important deliverable for this project was a front end style guide that could be used to test the responsive nature of the site and serve as a reference for future UD web projects. We wanted to identify common functionality and design elements from our wireframes that could be developed into reusable components. This was done with the help of Pattern Lab. It uses atomic design to break down interfaces into their individual building blocks.

 

pattern-lab.png

 

To see our wireframes come to life in a fully responsive style guide was a very important step in the process, it allowed us to test our ideas and refine user interactions which resulted in a high quality front end interface.

 

ud-pattern-lab.png

 

Flexibility for content editors

One of our key requirements was to provide editors with the ability to easily create and maintain custom page layouts. For this reason we decided to use Panopoly, a fantastic panels based distribution which provides and in-place editor with drag and drop functionality for page building.

We took full advantage of the Fieldable Panel Panes module to create custom panes that implemented some of the functionality from the components identified in our wireframes and style guide, this included header images, links, media carousels, menus, videos, maps, files and more. Views were also made available to editors within the panels interface, with exposed settings to control the display mode of the content, the number of items and filters. This has allowed editors to build out custom landing pages, displaying lists of study programs, news, events or faculty that had been tagged with a specific taxonomy term.

 

ud-panels.png

 

Keep an eye out for the second part of this University of Dammam blog which will look into translation and how we made the website work in both Arabic and English.

Find out more about the launch of the UD website on our blog and more about the education websites we build on our case study pages.