Bold and unique identity via WordPress websites

The challenge & my role

Role: UI Designer

Across nine months I had the opportunity to work on websites for new Universities London Campus. Two of them are from the same university Glasgow Caledonian University (GCU) providing postgraduate courses in the field of Fashion and Management. On the other side, I have also designed the website for YSU.London for York St. John University which provides Master degrees on latest business thinking and practice.

 

My Role
I led the design and the development of the websites in WordPress with the help of two frontend developers.

Main challenge
Although the content was quite similar, the clients need a strong identity for each website.
On the other side, I come up with a solution that allowed to use the default structure of a WordPress with a tweak (using small changes in the css files) to remove the most recognisable design feature of the provided theme, as per the use of the bootstrap columns, padding, and separation of the sections.

 

Fluidity in the layout
Especially in YSU.London I have chosen to provide more fluidity on the page, avoiding a clear separation between the sections of the page. The use of plain colour background and increase the distance between elements helped me to reach the scope.

 

Design Execution & Validation
I executed journeys, wireframes, prototypes and design specs. Plus I have built the pages of the websites in WordPress.

Universities in London

Glasgow Caledonian University

Glasgow Caledonian University London
GCU London is a postgraduate university campus of Glasgow Caledonian University (GCU), located in an ultra-modern environment in the heart of London. Situated in Spitalfields, one of London’s most attractive locations, GCU London is close to the globally recognised financial and fashion industries.

 

The campus offers a unique range of MBA and MSc courses, high-quality teaching and links with international businesses. GCU London provides students with an enriching and diverse learning experience underpinned by a vibrant international, intellectual and cultural life. We attract students from over 56 countries, from a range of backgrounds from all corners of the world.

British School of Fashion

The British School of Fashion intends to build upon the foundation provided by our strong heritage and fashion industry expertise through continued innovation of new programmes and investment and development of our ‌academic faculty.

 

British School of Management

The British School of Leadership and Management stems from Glasgow Caledonian University’s longstanding commitment to education in responsible business leadership and management since 1875.

Their vision is to develop a new generation of conscious leaders, innovators and entrepreneurs through an education industry-relevant expertise.

Both websites have the same structure, the top slider and the section regarding the courses. Then we have a difference in the middle and bottom part with elements like blog, video and an overview of the Campus

Every element was crafted and combined in the layout to ensure a consistent and intuitive interaction with every screen while maintaining a unique personality for each section. This created a stronger visual identity, which embraced their users’ needs, positioning the students right at the centre of the online experience, with a much wider reach and impact for the brand through the student community.

In the layout I have decided to introduce the use of white space, allowing a clear scan of the text in the page.

I have also introduced the use of a set of icons to mark quotes and call to action

Responsible. Collaborative. Forward-Thinking. Inclusive.

YSU.London

York St John University: London Campus
As an innovative Business School in the heart of London, YSU works closely with the business communities we serve in the private, public and third sectors; locally, nationally and increasingly on an international basis.

 

Their business engagement strategy is designed to provide events, learning interventions and consultancy, knowledge transfer and applied research within and for your organisation that is predicated on transformational management and leadership development for challenging times.

York St John University
York St John University has been a leading education, training and research institution for over 177 years. We stand for equality, ambition and social justice.

 

Founded in the heart of the historic city of York we serve a global campus of students who thrive on academic excellence, graduate employability and a strong sense of community. Read more about the heritage of York St John University.

Essential factors of website usability.

Scannability and negative space

Scannability
I am always trying to apply what a decade ago Jacob Nielsen reply to the question “How people read on the Web?” simply: “They don’t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences”.

 

In the projects above I have increased the space between elements (negative space) to allow the users to complete their tasks and achieve their goals quicker:
– users make fewer mistakes in the search of content they need
– users understand the structure and navigation of the website faster
– the bounce rate is reduced
– the level of retaining users gets higher
– the SEO rates are affected positively.

 

Scanning Patterns I consider while I am designing
Z-Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy.

 

Zig-Zag pattern is typical for pages with visually divided content blocks. The reader’s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.

 

On the other side, the F-pattern is negative for users and businesses and consider no good design.
F-pattern presented in the explorations by Nielsen Norman Group and showing that users often demonstrate the following flow of interaction:
– Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
– Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
– Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

Negative space (or white space)
On the projects above, I have considered the importance of the Negative space, or white space, is the area of the layout which is left empty, not only around the objects in the layout but also between and inside them.

 

Negative space defines the limits of objects, creates the necessary bonds between them according to Gestalt principles and builds up effective visual performance. In UI design for websites and mobile apps, negative space is a big factor of high navigability of the interface: without enough space, layout elements aren’t properly seen so users risk missing what they really need.

 

I used Micro negative space between lines and paragraphs. It includes the space between grid images and that used to separate menu links.

 

Macro negative space instead, is the large space between major layout elements, and the space surrounding the design layout.

 

With the user’s key goals in mind, I was designing for simplicity, helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.

 

Combining Proximity & Similarity
The gestalt principles — similarity, proximity, closure, figure-ground, continuance and common fate — are a popular tool that I used for visually organizing information, and the projects above can be considered a good example.

 

Similarity
The gestalt principle of similarity says that elements that are similar are perceived to be more related than elements that are dissimilar. Similarity helps us organize objects by their relatedness to other objects within a group and can be affected by the attributes of colour, size, shape and orientation.

 

Proximity
The gestalt principle of proximity says that elements that are closer together are perceived to be more related than elements that are farther apart. As with similarity, proximity helps us organize objects by their relatedness to other objects. Proximity is the strongest principle for indicating relatedness of objects, helping us understand and organize information faster and more efficiently.