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:
- Event’s Gallery (future events & past events using Elementor Theme Builder + Search & Filter Plugin).
- Professors’ gallery;
- the nice & clean simple design.
- a friendly mobile experience.