Olemassa olevan verkkopalvelun käyttöliittymän uudistus
Oja, Joona (2024)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202403144389
https://urn.fi/URN:NBN:fi:amk-202403144389
Tiivistelmä
Opinnäytetyön aiheena oli suunnitella uudistettu käyttöliittymä ja toteuttaa siitä toimiva prototyyppi jo olemassa olevalle Purot.net-verkkopalvelulle. Purot.net on Innowisen tuottama ja ylläpitämä monikäyttöinen yhteistyö- ja oppimisalustapalvelu. Käyttöliittymän uudistamisen tavoitteena oli kehittää palvelun käyttäjäkokemusta erityisesti mobiilikäytössä, ja päivittää ulkoasu modernimpaan muotiin.
Tässä raportissa käydään läpi työn käytännöllisen osuuden eri vaiheita ja niissä käytettyjä metodeja. Käytännön työn tueksi kokosin raporttiin tietoperustaa erilaisista lähteistä, muun muassa käyttöliittymä- sekä käyttäjäkokemussuunnittelua käsittelevästä kirjallisuudesta, aiheeseen liittyvistä verkkolähteistä ja artikkeleista, sekä varsinkin prototyypin ohjelmoinnin osalta tärkeistä React-kirjaston ja Next.js-kehyksen dokumentaatioista.
Opinnäytetyön tuotoksena Purot.net-palvelu sai uudistetun käyttöliittymän prototyypin, jota voidaan käyttää mahdollisen jatkokehityksen perustana. Purot.net on toiminnoiltaan hyvin laaja sovellus, ja koko käyttöliittymää ei tämän opinnäytetyön aikataulussa ehditty uudistaa. Sen sijaan prototyyppi keskittyi ratkaisemaan sovelluksen käyttäjäkokemuksen kannalta oleellisimmat toiminnot. Uudistusprojekti oli myös tekijälleen tärkeä oppimiskokemus ja tilaisuus toteuttaa todellinen projekti kiinnostavan aiheen ja oikean tuotteen parissa.
Tuotettua käyttöliittymän prototyyppiä ja edeltänyttä suunnittelutyötä voidaan hyödyntää käyttöliittymän jatkokehityksessä. Uudistetun käyttöliittymän suunnitelma tarjoaa näkemyksen käyttöliittymän uudesta ulkoasusta, ja Next.js-kehyksellä rakennettu prototyyppi tarjoaa rakenteelliset ja tekniset lähtökohdat varsinaisen tuotteen uudistukselle. Prototyypin avulla uudistettua käyttöliittymää voidaan tärkeimpien toimintojen osalta testata ja arvioida sen jatkokehityksen mahdollista suuntaa. The topic for this thesis was to redesign the user interface of an existing web service Purot.net, and to provide a working prototype done with React and Next.js. Purot.net is a multi-purpose collaboration and learning platform service provided by Innowise. Redesigning of the interface was done with the aim of improving the mobile user experience, and with the goal of updating its look and feel to better match the preferences of modern audiences.
This report describes the practical work, its phases and methods used. To support the practical implementation, a knowledge base was constructed and gathered from various sources, including literature on user interface and user experience design, related online resources and articles, and the documentation and guides of React and Next.js.
As a result, the Purot.net service received a renewed UI-design, and a working prototype for further testing and development. The prototype does not cover every aspect of the existing service but aims to offer solutions for the basic structure and most important functions. During the process, the author was able to gather experience working on a real-world product and learn more about UI and UX design.
The produced prototype and design work provide a starting point for possible further development. The report also provides some insight into working with tools such as Figma, React and Next.js. Observations regarding the use of Next.js are particularly relevant if this prototype receives fur-ther development in the future.
Tässä raportissa käydään läpi työn käytännöllisen osuuden eri vaiheita ja niissä käytettyjä metodeja. Käytännön työn tueksi kokosin raporttiin tietoperustaa erilaisista lähteistä, muun muassa käyttöliittymä- sekä käyttäjäkokemussuunnittelua käsittelevästä kirjallisuudesta, aiheeseen liittyvistä verkkolähteistä ja artikkeleista, sekä varsinkin prototyypin ohjelmoinnin osalta tärkeistä React-kirjaston ja Next.js-kehyksen dokumentaatioista.
Opinnäytetyön tuotoksena Purot.net-palvelu sai uudistetun käyttöliittymän prototyypin, jota voidaan käyttää mahdollisen jatkokehityksen perustana. Purot.net on toiminnoiltaan hyvin laaja sovellus, ja koko käyttöliittymää ei tämän opinnäytetyön aikataulussa ehditty uudistaa. Sen sijaan prototyyppi keskittyi ratkaisemaan sovelluksen käyttäjäkokemuksen kannalta oleellisimmat toiminnot. Uudistusprojekti oli myös tekijälleen tärkeä oppimiskokemus ja tilaisuus toteuttaa todellinen projekti kiinnostavan aiheen ja oikean tuotteen parissa.
Tuotettua käyttöliittymän prototyyppiä ja edeltänyttä suunnittelutyötä voidaan hyödyntää käyttöliittymän jatkokehityksessä. Uudistetun käyttöliittymän suunnitelma tarjoaa näkemyksen käyttöliittymän uudesta ulkoasusta, ja Next.js-kehyksellä rakennettu prototyyppi tarjoaa rakenteelliset ja tekniset lähtökohdat varsinaisen tuotteen uudistukselle. Prototyypin avulla uudistettua käyttöliittymää voidaan tärkeimpien toimintojen osalta testata ja arvioida sen jatkokehityksen mahdollista suuntaa.
This report describes the practical work, its phases and methods used. To support the practical implementation, a knowledge base was constructed and gathered from various sources, including literature on user interface and user experience design, related online resources and articles, and the documentation and guides of React and Next.js.
As a result, the Purot.net service received a renewed UI-design, and a working prototype for further testing and development. The prototype does not cover every aspect of the existing service but aims to offer solutions for the basic structure and most important functions. During the process, the author was able to gather experience working on a real-world product and learn more about UI and UX design.
The produced prototype and design work provide a starting point for possible further development. The report also provides some insight into working with tools such as Figma, React and Next.js. Observations regarding the use of Next.js are particularly relevant if this prototype receives fur-ther development in the future.