Case Study: University Website Redesign

Posted on

The challenge

The client asked me for help with redesigning and restructuring the old website. The deadline was tight – 6-7 months and I was the only person in charge of the whole project: project management, wireframing & content, design and development.

The easy part was that I was familiar with this University as a student (20+ years ago) and as a 10 years employee (I quit 7+ years ago). So my personal experience helped me a lot to deal with all information needed.

Key Elements

What I recommended as new elements:

  • using a short video for the hero section to show to make a strong impact on the user;
  • to add as many testimonials from the alumni students;
  • to pay useful content about the courses to show more about what the students should expect attending the courses and after graduating;
  • to show up the Artistic Events on the Events Page.
  • to show up all the Professors in a gallery with a short description.

The Workflow

  • Based on the Analytics data & the goal of the website, I started to trace the main sections and pages.
  • Due to the big number of sections and pages, I built the wireframes & design in the browser;
  • I asked for feedback in terms of structure in the first phase.
  • I set a specific goal for each week and get feedback after each week / when a big section was done.
  • Keeping the self-tracing deadline close, I managed to finish the project as we scheduled.

Kadence Theme + Elementor

I started the project using the Astra theme, after a few years of using it for many small websites. But after one month (when working on the wireframe phase), I encountered an annoying error that makes me change my mind and I switched to Kadence.

What I really liked about working with Kadence compared to Astra, was:

  • customizing global colors with accent, contrast, and base color set;
  • default settings & default CSS for custom post pages;
  • overall, modern CSS in terms of general spacing, shadows, and contrasts – is a good system;

The only thing I didn’t like about Kadence, working with Kadence on a big project was that the custom CSS added in style.css has no effect without using the !important – too much headache so I decided to use Customizer CSS instead. As I found in the Facebook group discussion, my experience was not singular.

I chose Elementor Pro over Kadence blocks Pro because of:

  • easy-to-copy section when needed;
  • the builder functionality for Custom loop (together with Custom Skin Plugin);

I hated Elementor working on this project:

  • unexpected css error after an update (related to the widget class);
  • inability to use global Sections for full-width headers (why this is available just for elements);
  • zillion classes used by Elementor;

What I liked working on this project:

This project was difficult just in terms of organizing all the content on hundred pages and different custom post types. Overall, the structure is easy-to-follow for the users (students) and the data shows a decreased bounce rate and a longer time spent on the most important pages.

In terms of design:

  • I used a color palette based on the logo, accent color and shadows,
  • simple UI elements,
  • many icons (cusomized),
  • and fewer images due to GDPR restrictions.

The following functionalities I’m proud of: