Web-sovelluksen visuaalinen päivitys : osaamispankki

Abstract

Tämän opinnäytetyön tarkoituksena oli toteuttaa ja dokumentoida Netum Oy:n sisäisen Osaamispankki-web-sovelluksen käyttöliittymän päivittäminen. Osaamispankin tarkoituksena on toimia Netumin työntekijöiden tietopankkina. Siellä säilytetään työntekijöiden sinne tallentamia tietoja heidän taidoistaan, työkokemuksistaan ja koulutuksistaan. Sitä käytetään pääasiallisesti tukemaan myynnin työtä.

Osaamispankista on tehty jo useampi versio. Ensimmäisenä toteutettiin Microsoftin PowerApps -palveluun pohjatuva versio, joka ei kuitenkaan ollut haluttuun tarkoitukseen kovinkaan hyvin soveltuva. Tämän jälkeen tehtiin versio talon sisällä käyttäen nykyaikaisia ja moderneja verkkokehitystekniikoita. Tähän valitut tekniikat olivat React, TypeScript ja .NET Core. Tässä opinnäytetyössä puhutaan tämän viimeisimmän version päälle rakennetusta päivitetystä versiosta, jossa tarkoituksena on ollut suoraviivaistaa ja yhtenäistää käyttöliittymä, päivittää käytössä olevat kirjastot sekä päivittää käyttökokemusta yleisesti. Käyttöliittymäkomponenttikirjastoksi valittiin tässä tapauksessa Material UI.

Hyvin toteutetun käyttöliittymäsuunnittelun integrointi sovelluksen kehitykseen on todella hyödyllistä. Se nopeuttaa sovelluksen kehittämistä huomattavasti, varmistaa käyttöliittymän yhtenäisen ulkonäön sekä se avustaa mahdollisten rajatapausten ja pullonkaulojen havaitsemisessa. Suunnitteluun täytyy kuitenkin panostaa resursseja ja aikaa. Huonosti toteutettu suunnittelujärjestelmä aiheuttaa vain epätietoisuutta kehittäjien keskuudessa ja hidastaa kehittämistä.

The purpose of this thesis was to document the updating of the user interface of Netum OYs internal web application called Osaamispankki. Osaamispankki is Netums internal competence management system. It allows the employees of Netum to document their knowledge, skills, work experience and educations. The system is mostly used by the sales team.

The first version of Osaamispankki was based on PowerApps, which had technologies that were not suitable for the purpose of this app. That is why it was decided that the application was to be rebuilt from the ground up by a team inside Netum. Technologies for this release were chosen based on their modernity, efficiency, and maintainability. React, TypeScript and .NET Core were chosen as the technologies. This thesis is about an update that was built upon that version of Osaamispankki. It was meant to integrate and streamline the user interface, update all the libraries used, and update the user experience on more general level. Material UI was selected as the component library.

Integrating well-executed user interface design into application development is highly beneficial. It speeds up the development process, ensures a consistent appearance of the user interface, and assists in identifying any edge cases or bottlenecks. However, investing resources and time into the design process is necessary. Poorly executed design systems only cause uncertainty among developers and slow down the development process.