Invation

Invation is an ICT company with a special eye on the Future

The name of the company is related to the union of Innovation and Invention, two words that already communicate the value proposition of our company. We propose "Visions": a collection of thematic guided tours across different innovative digital products. Developed as an interactive itinerary, each Vision is a set of Invations, bringing the user to explore new solution related to the theme chosen.

The aim of the project was designing a webpage for the aforementioned company. The website must contain three different entities: areas, products and people. Developing the Company concept, we played with the name of the three entities so we came up respectively with Visions (Interactive itinerary based on a chosen theme, created as a set of innovative products), Invations (Innovative inventions and ideas to shape a new concrete concept of future) and Invationers (Employees of the company).

Design Process

The first step in the design process was Conceptual Design. We defined the identity of the company to build, Invation, and we proceed by creating the relationships among the main entities to be contained in the website. Also, different grouping possibilities were explored in order to create some grouping criteria for our entities. This allowed us to group invations by technologies for example, creating the relative webpage.
The Conceptual Design continued by identifing all the properties for the main entities, so Visions for example have a name, a description, a responsible and a set of invations (products). After identifying Topic, Kind of Topic and Group of Topic, all the contents were separated in each page to start Wireframing. Both low fidelity and high fidelity wireframes were produced and commented.
To conclude, we wrote three Interaction Scenarios to test the intent of the personas using our website, testing the usability and the possibile flows inside the site.

Technical Specifications

The website is implemented using the Nuxt framework for Vue.js. Particularly, since the main focus of the course was the usage of the Vue framework, we concentrated on some Vue designs principles:

• We leveraged the power of the nuxt-links together with the convenient structuring of the pages folder to make the routing very easy to be done
• All the components are design for maximising reusability. Their are also grouped hierarchically in the project files structures.
• we always used props in order to parametrize as much as possible every component so that they can achieve an excellent level of reusability, avoiding every possible type of hardcoded data
• With the aim of improving the look and feel of our web application, creating a unified page structure among all the pages

In order to have our application accessible online, we developed a simple web server using NodeJS with Express. In particular we created a server middleware that acts as request handler. Our database instead, is implemented with the use of PostgreSQL with the help of Sequelize for ORM in NodeJS. Axios was used to handle the HTTP requests.