Biblioteca Horticultura Website Rebranding

Blog | Directory | Membership

The Objectives

The main objective is to redesign the Biblioteca Horticultura website to have a more modern look and more structured. We need to improve the consistency of the website, in terms of design.

We also have to migrate an online library that resided in another subdomain. We need a feature where those academic papers and books can be searched, filtered, and sorted.

The Process

1. Finding Inspiration

Building an online library is pretty challenging for me. I made some research on what an online library should look like by looking for the actual journal/article library such as Research Gate, Wiley Online Library, and Elsevier. This worked well for me because I can see the similarities and patterns between these sites and how I can implement my founding to the site I would be working on.

2. Planning the Project

I virtually met Celine, my working partner, to discuss the project and how we will do it. Celine will help me to communicate with the client since I’m not a Spanish speaker.

Based on the study we had on the old site, we decided to start with the site’s structure. We list all the pages that are shown in the menu and group them according to the content. Below is the original menu of the site. As we can see, the menu holds too many parent pages which makes the navigation looks cluttered.

To make the navigation easier, we made two sets of menus, the primary menu and the secondary menu. The secondary menu goes above the primary menu. We also filtered and listed crucial pages.

2. Colors and Visual Design

After we knew how the website would be laid out, we then worked on the branding. The branding actually already existed, but unfortunately, it wasn’t deployed consistently throughout the site.

The colors were extracted from the existent logo we have. The fonts are found according to the mood of the site and approved by the owner.

Primary Color: Venice Blue #0855A3
Secondary Color : Tangerine Orange #F38919
Neutral Colors :

    • Spanish Gray #88918F
    • Alabaster White F1EEE7

Heading: Lato
Body Text: Merriweather

3. Wireframes

Here is a wireframe for the homepage created in this project.

4. Building the Site

We’re finally building the website after sketching the pages. We deployed the sketches with Divi Theme.

5. The Challenges

What was really challenging for me is we had to come up with an idea where the visitor could easily navigate our site and there are hundreds of articles, books, authors, etc. Also, we need a plugin to help the client manage the publications residing on the site easily.

After trials and errors, we decided to use WooCommerce. Although we don’t use it for money transactions, the plugin helped us to build an online library system.

The Outcome

Visit the site to see more of the pages.


It wasn’t easy to make an advanced online library and the learning was really steep for me. I’m actually quite surprised we can come up with a creative solution, that is using WooCommerce to build the library structure.

When I’m building the website, I was afraid of how the communication would go because of the language barrier (between Spanish and English). But the project went surprisingly well. We delivered a good outcome for the client.

Although we were going back and forth in the process, I am really glad that we could finish this big project.