Client: Icesi University

Industry: Education

My role: Product design, frontend development

Year: 2018

The Icesi University library bets on a portfolio of digital content to maintain a constant service outside regular hours. How to create better experience access to information to increase the use of library resources inside and outside the campus? Building a model entirely online with a centralized search engine accessible from any device.

The background

Tell me your story

Few months ago Icesi library has been facing the challenge of not having more shelf space to store all references to the university community demand, this is the reason the principal’s office decided to migrate all its contents took a digital environment semester to semester and expanded its digital collection.

Currently the library has more than 47,000 scientific journals, more than 10,000 thousand digital books and have access to more than 50 bases of academic and scientific first level data, allowing you to have an excellent academic and digital research material. By order of the university, all research projects and thesis of his students have to be indexed in a digital library.

All this effort should be made visible from its website and should not have limited access to one computer on campus.

The challenge

What problem do you want to solve?

This involved two challenges, the first; migrating from a traditional loan scheme physical books to a delivery model library services of online publications, where the community knew all computing resources that account and could access them easily.

The second, at the technical level, required a robust and user-friendly web portal that would support the entire operation of this scheme of service.

Until now, they received multiple complaints of the website for not being accessible from cell phones, as they had an ancient content manager (CMS), and they have much tricky management of new content to its officials.

The approach

Digital product discovery

After several meetings with officials of the library and the primary users of their services they made the following requirements:

The site should do much emphasis on the use of a unified search engine, should allow themselves to publish news and events quickly and easily keep up to date all the institutional content of the library.

The main groups of users of the library were: students, teachers and graduates, each group required services with different conditions and should be easily distinguished from each other.

The databases had to be categorized by faculties, it had to inform the access type and the credentials required for each case.

Additionally, the site should be more eye-catching, load fast and improve search engine rankings.


For two months old site monitoring was done, in this period user tracking tools were used to obtain heat maps of mouse movement, number of clicks, scroll and record as they were navigating within the site.

The heat map site was analyzed to find those areas most critical view of current users and was confronted with reports of Google Analytics. Finally, an analysis of engine rankings of the site was made and validated with Google Search Console, which they were top searches of the site.


The concept

This proposal seeks a way of efficient communication between the library and the university community, improving the user experience showing the different services and resources more clear and usable way to get users to navigate more efficiently and find the information they need in less time.

Each service of the Library has information to guide the user in its usage, who is responsible for the service, contact details, and frequently asked questions.

On the other hand, segmentation is added according to the type of user and depending on that the relevant services are filtered for each of the segments throughout each profile seeks to minimize the number of clicks required to access the service as well as having clear and concise information.

The exploration

Design concept

The portal design has influence by the design pattern Google Material Design, looking at saturated colors, solid surfaces, sans-serif fonts, original animations, and adaptive design.


Finding a visual style

To find the identity of each profile we create an archetype of the person for each segment in which attributes were given personality, emotions, regular expressions, and language, so color and iconography to represent them scheme was proposed.






Iconography & Typography

Several versions of the contents of the main menu were made, it was necessary for site development testing to achieve multiple users find the icons that best fit each profile and identified.


Iterate 1,2,3


The development

Time to code

We begin by creating a custom theme based underscores.me because it offers a clean code, with this, we seek to limit to 35 the maximum number of requests to the server for faster loading.

The main menu using this site represented a significant challenge, as was to be administrable by a non-expert user and scalable over time due to the possibility of creating or close services.

A 4-way menu was registered in the backend for different sections of the site, in case the main menu was necessary to inherit and make changes to the ‘walker_nav_menu’ class as a separate structure that provides the CMS to integrate adequately needed icons, text, color, and their respective animation.

The main menu was built on a grid within a file SVG ensuring the proper deployment on mobile devices and through CSS positions loaded image content required. The other site menus and icons simple monotone use a font created with icomoon.

All the styles of the site are based on the SMACSS standard, with the help of SASS files, reusable modules and mixins were created.

To facilitate the management of site content, a plugin that records the different types of content was created regardless of the features of the subject if a plan to use another. This way I managed the events and news of the site are handled as articles and blog type ordering them chronologically services and databases are registered as pages that are not updated very often. Each content type has custom fields facilitating their site management to non-expert users.

The workflow used was: VScode + NPM modules + gulp.js + Sass + WordPress

The product

Solving the problems with a digital solution

The home page offers four primary blocks of information, the main menu offers three blocks shortcut, within each service page a summary of the service, a call to action (CTA) to access the service is, are essential data access and button bar in which you can expand information as terms and conditions, FAQs, manuals, training, and others..

Although the search engine database was outsourced, the provider gave an HTML file with CSS and JavaScript inline static; it was necessary to reconfigure the entire code by passing a model view controller to be responsive. SASS and JS files were created separately for easy maintenance and scalability.

Site support is channeled to a single form, directly served by library officials significantly reducing response times to users.




View project

Icesi University Library

The results

A new standard

After three months of use, the user access to the site increased by 25% from a mobile device, monthly visits goes at its highest top, went from 2.5K to 6.5K, bounce rate was reduced on site, from one average duration of 1 minute to 2:30 minutes per visit.

The theme was develop with semantic content what allows a better positioning of internal links, additionally the site charged in about 0.3 seconds thanks to reduced requests to the server and web optimization.

It went from 7 clicks 1:30 minutes on average to 30 seconds with three clicks to perform a search. Besides, it was possible to make searches from any device on and off campus with only one authentication.

Lessons learned

Occasionally in the library arose projects that occupied 100% of the time of its officials so we could not move forward until they could free up space for this.

What works best for me was to make a schedule of activities that require the officials and tasks of autonomous work, so I give higher preference to those who needed the presence of someone else and downtime progress on individual missions to achieve shorten response times.

The product technical and aesthetic level was completed within the planned date but had to wait for almost an extra for the client update the content, so it is essential to anticipate the tasks by the client to achieve give tentative dates developmental month accurate.

Thanks for reading 😀

Like what you see?

I want to hear you

More work

A showcase of design, development and things that makes me happy