Scope
In the subject “Web of Things” we worked in interdisciplinary groups to produce a Web of Things (WoT) product. We were three IxD designers and three web developers. Our product ended up being an interactive art exhibition, where you could turn yourself into a art style of your choice, with the help of AI. We designed for a big projector screen, and a computer layout
We chose to use the “Double Diamond”, as this method is very iterative, and it fits well to tackle unknown problems. We started the course with several themes as a guide and not a specific problem, therefore the “Double Diamond” would be the best fit for our project .
interactive art
exhibition and
gallery
Tools
For the project most of the insight took place in Figjam. Big parts of the ideation, as well as the prototypes were created in Figma. As a part of creating our exhibit posters, some of our elements were set up in Adobe illustrator.
Physical elements for the solution were created using EpilogLaser, and Prusa Slicer.
Method
Discover
Problem
Solution
Define
Develop
Deliver
My contribution
The most important part of the project for me, was the focus on UX writing. The importance of using clear language, so that the user doesn’t misunderstand or misinterpret the task at hand.
I worked on using a cohesive language, and words that were very straight forward. As well as i asked users if there were formulations we were unsure of, to make sure they were easy to understand.
Intense colors and twisted forms
Skewed angles and distorted lines
Emotional, Dark Themes
*Focused on short and information, to avoid cognitive overload on the different pages.
I also created a ux guide and a small design manual for our developers to follow. This was to make sure they could easily code the spacing between different items.
I also interviewed most of our users, and held the user tests of our product. And at the end of the project i worked on creating the posters we used for our exhibit, and grading.
*Short and concise sentences.
As well as informing text, to show the user they are on the right track.
*Poster for the exhibition
*UX guide for different spacing and margins on one of our sides.
Select
art style
use the controller to navigate
Generating your art
Just a moment, the Ai is generating your image
Marger:
Bildet av brukeren:
40px topp, bunn, høyre
Logo:
26px topp
36px venstre
Boks med tekst/info:
120px høyre, venstre
140px topp, minst 40px bunn
Førstesiden:
Mellom objekter:
40px
Choose the art style you want, to see!
Read about it and its characteristics, then choose to take the picture.
Learn some fun facts, and see art from the chosen style while you wait!
There you go, your own art work in the style Expressionism!
The product
Our product and solution is built up and strengthened by user insight and a lot of guerilla testing.
As for the WoT aspect of the product we used APIs and web sockets to connect the controller to the site, and connect the pictures produced to our gallery wall.
We used a web cam to be able to take a picture of the user, we then sent it to the Open ai API, it describes the picture, before it sends the description, pluss a prompt that we have made spesific depending on which art style you select. The created art is then sent back to our client, and will be presented for the user, where they can then choose to send it to our gallery wall.
ai API
Gallery
Web sockets
Database
REST API
Client/UI