Digital Magazine
2022
Role
Stack
Introduction
Ab Origine Magazine is a non-profit history digital publication in catalan that needed to step up its current website in order to keep growing and plan for future projects so they reached out to me to see if I could do a complete redesign and improve the overall user experience with their site.
Defining the problems and the goals
The old design was not aging really well, not only in terms of user experience and overall look and feel but also in terms of old servers and the lack of keeping the WordPress and databases clean and updated.
The mobile experience was also a little bit buggy and that was starting to be a problem since the mobile traffic was increasing.
Last but not least, the current structure and setup of the site were not the best in order to expand the site and create new functionalities for future projects.
After having some meetings and analyzing the current situation and thinking about the objectives for the future we had a couple of goals that we wanted to accomplish:
- Fresh new responsive design that improves the UI and the UX of the site
- Improvement in load times (frontend and backend)
- Future-proof WordPress setup that’s adaptable and easy to expand
Competitor Analysis
Due to the nature of being a non-profit organization, we didn’t have a big budget to do extensive research so we had to adapt the best we could.
We decided to not go wild and try to reinvent the wheel, so we chose to invest some time doing competitor analysis and some quick ideation meetings with the team in order to have the initial wireframes.
Exploring with wireframes
With inspiration from the competitor analysis and the ideas produced by the team, I started creating the first wireframes to be able to gather feedback quickly and iterate.
Having some wireframes allowed everyone to give valuable feedback and bring new ideas to the table. It also helped us to think about how to structure the information in the backend of WordPress and what functionalities could we improve for the editors.
Attention to details
For the final design, we wanted to keep the old branding but with a refreshed interface and better usability and accessibility.
Choosing the right font
The web is mostly text, and especially for a digital magazine, choosing the right typography was one of the biggest decisions. We wanted to archive a modern look with little touches of seriousness and historic styles while keeping in mind that there will be a lot of text and should be easy to read.
Eventually, we decided to use the veteran Roboto for the headings and secondary text elements to provide us with that modern look and feel, and paired with Cardo, a medieval-style serif font that gave us that historic feel that worked really well with the brand for the text.
Adaptive header and navigation
We wanted to have a distinct homepage design that involved a big logo but having it on all the pages was too much as it was taking a lot of space. That’s why we chose to have another header version for all the other pages.
Special layouts for different content
We chose to be a little creative and have a special layout for one of the most distinct contents of the website, the interviews.
Implementing everything
Before doing the implementation, we worked on the migration and cleaned the old database so we could start as fresh as possible.
The new site was hosted on the fastest SSD hosting, using the latest WordPress version and Elementor to build the front-end.
Other plugins like Yoast SEO to improve the SEO and cache plugins to improve performance were used.
Final feedback and results
After the launch of the new site, we gathered a lot of positive feedback from users.
In terms of performance, we achieved almost a perfect score in lighthouse, a huge improvement from the old site.
And finally, we managed to set up a fresh new WordPress environment that is scalable and expandable to be able to keep improving and ship new features for the project in the future.
Final words
Overall I was really happy to be able to participate in this project and see that everyone is happy about the final result. Thank you so much to the entire Ab Origine team that collaborated and helped in the process, you are amazing!
You can check the live site at https://aboriginemag.com/