Faculty of Sociology and Social Work
A full redesign of an old faculty site. Highly customized Wordpress site: Custom Posts and Taxonomies for courses, programmes and staff, multilingual site with customized headers and templates.
Goal
Enhance the online experience on both ends: for people visiting the website and for the staff using the website.
My Role
UX Designer
Wordpress Designer
Timeline
Jun 2023 - Jan 2024
Process Overview
- Research
- Information Architecture
- Design
- User Testing
- Implementation
- Launch
Tools
1. Research
For this project, my methodology was inspired by the design thinking methodology, which I narrowed down to Discover – Define – Design – Ideate.
The foundation of every project is a strong research. I started with a competitor analysis and user interviews. I conducted the interviews to explore in-depth the issues that the users had. We established a few user journeys and task flows.
Tools used
- Competitive Analysis
- User interviews
- User journeys and task flows
- High-fidelity mockups and prototypes
- Usability tests
Problems discovered
1. Students had trouble finding important information due to the overcomplicated information architecture, especially on mobile devices.
2. Search function was not returning accurate results
3. Faculty members were not using the website based on a given documentation nor had proper Wordpress training, which created a lot of chaos in the backend (multiple taxonomies, posts used as pages, menu anchors taking users to other websites, etc)
Goals and Objectives
Project Goal: Improve the user experience of the website and the usability of the dashboard.
- Objective 1: Create a straight-forward information architecture
- Objective 2: Simplify Wordpress back-end by expanding it with Custom post field and plugins.
- Objective 3: Create a user-friendly documentation that can be used as reference by users of the website (extra video trainings if needed
2. Information Architecture
As this was a redesign, I wanted to understand the old site and its content. I did a content audit listing all available information and features and interviewed different members of the staff and students. Based on this, we decided to split the content into 3 areas of interest: faculty, admission and students.
3. Design
As this was a redesign, I wanted to understand the old site and its content. I did a content audit listing all available information and features and interviewed different members of the staff and students. Based on this, we decided to split the content into 3 areas of interest: faculty, admission and students.
4. User Testing
The foundation of every project is a strong research. For this project, I started with a competitor analysis and user interviews. I conducted the interviews to explore in-depth the issues that the users had. We established a few user journeys and task flows.
5. Implementation
The most important part of the implementation process was choosing the right tools. Wordpress was already a given, but I needed a way to simplify the editing process for the staff so I wanted to create custom posts and custom taxonomies and link them together seamlessly. That’s where the Pods framework came in extremely handy. It offers a way to customize your Wordpress in any way you want and helps keep costs low. On top of Pods, I choose to work with Elementor as a site builder, because it gave the opportunity to build your own templates and this was necessary with all the new custom posts.
pods
Custom Posts, Taxonomies and bi-directional Relationships
With the help of the Pods Framework, I created custom posts for courses, programmes, departments, staff and announcements and corresponding taxonomies for each. I created relationships between them, for example, a course would be linked to a professor and vice-versa.
pods
Custom templates for custom posts
I set up templates for each custom post and created custom fields for the editing process. Each template would reflect the bi-directional relationships established with Pods: a course template would include the tutor of the course and a staff template would each include all courses taught by that professor.
Multilingual
Custom headers and templates for each language
Since the information was split into 3 main area of interesant, each area of interest (faculty, admission, students) had its own header template, one for each language. Moreover, I set up templates for courses, staff, programmes and single posts, all available for each language.
Search
Expanded Search Capabilities
Native Wordpress and Elementor search functions are limited, so I used Search and Filter Pro to expand these capabilities. This added taxonomy filtering and search on staff or courses archive pages, where the number of data was significant, thus making this filtering options a must.
Simplified Dashboard and Technical Documentation
When working with such an extensive number of pages, posts and taxonomies, as well as multiple users, it is VITAL to document the process and to deliver a technical documentation. While it might be well beyond my job as a design, I went the extra mile to create a documentation that presents the way the website is built, how to work with custom posts, taxonomies and fields, as well as how queries are built.
Visual Design
The faculty had a good brand manual and I relied on it to develop the visual design of the pages. I used the colors to help separate the type of information. Their main font was unfortunately not web-friendly, so I decided to choose one that is so that it wouldn't cause issues on any browser.
6. Launch
The most exciting step is the ‘go-live’ step. While some may think the work ends here, I believe it’s important to follow up for a few weeks to see if everything is working as intended, to fix any potential bugs and offer some much needed support.
