INESC TEC CASE STUDY
UI & UX Design / Frontend & Backend Development
CONTEXT
INESC TEC is a private non-profit research institution, dedicated to scientific research and technological development, technology transfer, advanced consulting and training, and pre-incubation of new technology-based companies.
CHALLENGE
The purpose was to create a new and distinct website within the scientific sector, mirroring what the institution aspires to: innovation. It was intended to create a flexible layout to serve multiple purposes and enable different page configurations. Something different from a template, where page options are limited. Beyond the structure, it was crucial that the website could centralize all information, organize data and streamline processes.
APPROACH
Our approach and effort were to work closely with our client to assimilate thoughts, to learn processes and methodologies, to understand needs and write down a project specification. The specification brought together a small workgroup, but involved lots of people and entities, which required many hours of debate and meaningful learning.
Based on the specification, we started to design wireframes with the navigation structure, a quick and effective way to identify usability issues in an early stage. Once again, the client inputs in the process were fundamental to define the project direction.
The layout design resulted in modular sections that can be assembled in any order to create pages according to the content and customer needs. The bigger challenges were:
- create a scientific and innovative mood;
- assign chromatic differentiation to content, for example, departments;
- create an adaptable grid to very different contents so that they always fit together;
- organize a large amount of information (hundreds of news, projects, people…) maintaining a nice user flow like the menu or the navigation between sections.
All this was only possible due to the development of a CMS (content management system) that allows the client to create/edit pages and their sections, to select predefined colors and text styles, and to relate entities to each other (for example, a person can be associated to projects, centers, clusters, etc.).
In addition, this CMS will fetch contents to an internal client platform by importing data on a daily basis.
Our job was to transport all internal customer data to our CMS. To this purpose, the client provided web services to consult the data for import. Then, it was necessary to analyze the structure of this data and put it in such a way that the CMS could read them. Finally, a process has been created that runs in the background and updates the information every day. It was determined that this process would occur during the night because there is less traffic and it is a large volume of information.
The main difficulty was to gather the contents and realize all the connections between them. Some of them were only identified in the middle of the process which caused unexpected changes delaying the project.
TOOLS AND TECHNOLOGIES
- Design UI/UX: Sketch App, Invision, Zeplin
- Development: Node.js, Laravel, MySQL, Javascript, PHP, Elastic Search
If you enjoyed reading this article, don’t forget to click on the Clap button below! ❤️👇
Follow NQ Digital Agency on Linkedin, Facebook and Instagram.
