Oriana Arnone
UX - UI, Digital and Iteraction Designer
Digital Portfolio
Phyleas: your travel companion.
My Bubble: UX of a bank mobile app.
Myni: emotions and little expenses.
Movo: innovative time management.
EGGup: AR app and IoT device.
360Learn: interactive 360videos platform.
Trenord website redesign.
Registry office website redesign.
Discover Lotte: immersive exhibition.
Smart Buckets: enabling interfaces.
Phyleas
We had to ideate an innovative service to give more meaning to the transportation experience in public transports. After research and analysis on commuters, we thought about a mobile application that has the role of a companion and gives instructions to commuters through earphones.
The application provides the right information at the right moment by telling the user about delays, cancellations, and walking time. During the time the user spends on public transportation, it will also suggest and play for him some audiobooks or music for the estimated while.
The application will self learn the user’s habits having access to his GPS location, calendar, transportation timetables, and personal taste of music and audiobook in order to suggest to the user when he should leave home and how he can productively spend time on the public transportation. We created a storyboard, an action diagram, a system map, and a business model canvas to describe the service.
After the course, I decided to continue the project. I designed my vision of the mobile application through maps, interaction study, wireframes, style, UX, and UI.
User Information Flow
Me and my teamates analyzed different type of user informations. In the schema below, we were able to translate user sources into different design opportunities. In this way we could continue in the framing of the service through maps, for example the system map, very userful to understand information, material and financial flow.
System map
Consequences and possible improvements
In this part of the project we tought about the consequences of our service in terms of Self-perception, Actions and interpersonal relationship.Our critical theme was the automation of actions and services through the use of data.
After the exploration of the consequences we though about possible improvements.
Wireframes
Final User Interface
Course of User Experience Design
Concept: November 2018 - December 2018 with: Azzolin, Hoogen, Shahriari, Xu,
Zheng.
App prototype, wireframes and graphics: June 2020 designed by myself.
My Bubble
My Bubble is a new service fow new generation to manage money through a mobile application and an IoT Smart Cardholder.
Banca Mediolanum asked us to choose one of four topics, and define our brief.
So, we decided to focus on Millennials to help them mindfully managing money, building awareness at the moment of payment, and decreasing the stress of checking expenses. In this way, they can achieve their financial goals and understand themselves better.
After the research, interviews, analysis, and personas, we started the ideation phase through “how might we” questions. We combined some ideas, defined a solution, and created two journey maps. Our system is composed of an application and a smart cardholder needed for people that used to pay with the card. It has a smart fabric where a line appears at each purchase.
People that used to pay with the phone have to unlock the payment using the app. They have to take money from the bubble of the homepage (their monthly budget). In this way the user can build awareness at the moment of the payment.
At the end of the month, they can see the report, discover which Avatar represents better their spending personality, and see some suggestions to change their spending behavior and take more control of their financial situation.
Personas
Interviews, digital ethnography, observation, and shadowing are useful methods to analyze the user, find problems, and collect insights. The insights are used to create personas that will set the values, goals, needs, and requirements of the project.
Customer journey
The ideation phase was done through how might we questions, crazy 8, and brainstorming. After the idea selection, the concept was defined through a storyboard, and 2 different journey maps: one for the user that pays with the phone and the other about the user that pays with a card.
Wireframes
Final User Interface
Professional workshop with Banca Mediolanum
12th february 2020 - 19th february 2020
With: Nikulina, Zhang, Zhou, Liao, Ye.
Myni
We focused on the relationship between the new generations (x and y) and small expenses. We did researches about users and their relationship with money. We use different tools: interviews, observations, questionnaires, customer journey maps, and personas. We understood that the trigger of the expenses is not the means but is the amount. In one month the small expenses became really big and no one remembers the experience linked to that purchase because it was not important.
So we decided to give value to the little purchases and link them to the user emotion using a smart bracelet. The system will know the feeling of the user thanks to different sensors and data gathering. Knowing the buying habits and the emotions, the system can suggest some adjustments to increase the quality and bring serenity to users’ lives. The system is composed of a social media campaign, a landing page, a smart bracelet, and an application. The bracelet allows users to have real-time feedback about the purchase.
It, also, allow them to be more conscious about the expenses.
At every moment the user can see the daily amount of purchases and the real-time emotion. The feedback is given by colored led.
User Actions Flow
Style and Graphics
Application Sections
The mobile application is composed of different sections: emotions, places, profile and reax. The emotion part is divided in hystory and past actions, current state and present actions, budget and savings for future actions.
Smart bracelet prototype
Render and Final User Interface
Course of Interaction Systems Studio
February 2019 - June 2019
With: Autori, Catani, Corradini, Giuditta, Venturis.
Movo
A classic way to measure time is not efficient enough when people are focused on doing something else. Very often, they lose the sense of time. Movo provides users a new way to organize their schedules in order to be more productive and efficient. Differently from a phone alarm clock, it is not possible to delay or switch the reminders off. Movo itself is a visual reminder telling that time is passing by. Movo is a physical object that catches the attention also when the user is busy doing something else.
Movo is mainly composed of two parts: the mobile application and the physical object.
The product contains a micro bit, two LEDs, a buzzer. The shell was 3D printed. The mobile application was developed with MIT app inventor and is connected to the product through low energy Bluetooth. In the app, the user can set 3 reminders for each event, and the object will show visuals and sounds accordingly to each reminder. The less time the user has and the more insistent Movo becomes.
The time cognition is presented in an innovative way and the closure interaction adds a sense of relief. To turn off Movo, it has to swing, so the user has only to push it.
User Journey map
User Process Flow
Final Product and Mobile Application
Movo is mainly composed of two parts: the mobile application and the physical object. The product contains a micro bit, two LEDs, a buzzer. The shell was 3D printed. The mobile application was developed with MIT app inventor and is connected to the product through low energy Bluetooth.
Course of Hardware & Software for Design
September 2018 - December 2018
With: Colombo, Ceriani, Zhao.
EGGup
The waste of food is an involuntary habit that is increasing each year. The willingness of healthy foods, overbuying, and overcooking practices are only a few causes of this huge phenomenon. Eggs are one of the most wasted foods and they have high environmental impacts in terms of water, land, and resource consumption.
EGGup is a system designed with the goal of rise awareness on egg waste for children and parents. The system is composed of a smart egg tray, a mobile application for adults, and a mobile application for children. The tray is used to store the eggs and to provide users useful information about the eggs through colors.
The main mobile application is used to configure the egg tray, manage the eggs, know how many eggs the user has in the fridge at every moment, also at the grocery store, and configure the children app.
EGGYup is a mobile application designed to raise awareness about the value of eggs. There are 3 ways to gain points: playing a memory game with the app and the eggs tray, answering questions about characters' problems, and finding eggs in AR.
Moodboard, sketch, 3D model
Augmented Reality App
The part of the mobile application related to the Augmented Reality was entirely developed in Unity. The Vuforia library was essential to create an AR interaction that was target based. The markers were completely personalized. The 3D models were created with Inventor and the animation of every single piece was done with Unity. The 2D UI was created with Illustrator and then animated in Unity.
App Architectures
Style and Graphics
Wireframes
Final User Interface
Course of Virtual and Phisical Prototyping
February 2020 - July 2020
Individual work.
360 Learn
During the internship in Gruppo Mediaset, I worked with some colleagues about defining scenarios that can enhance the Hyper360 technology developed by Gruppo Mediaset.
The platform allows users to make VR and 360° videos interactive by placing images, graphics, buttons, 2D videos, maps inside the video.
We defined user-centered research through observations, reviews, and questionnaires. We analyzed the insights, we searched use cases for the technology, we brainstorm about possible industries were to apply Hyper360.
We thought about two scenarios where this technology can be useful: one related to the media sector and one related to the educational sector. The first one was about enhancing advertisement through gamification. The second one was about increasing the learning experience in schools.
The tutors of the internship chose the second scenario, so we designed a system useful for teachers to schedule lectures, and assign homework, and it is useful for students to have an immersive experience, learn faster and better, and pay more attention to lectures.
Brainstorming in Miro
Hyper360°: make videos interactive
Teacher's side
Student's side
Internship in Gruppo Mediaset
May 2020 - June 2020
With: Azzolin and Picardi.
Trenord
The main aim of Trenord is to offer an adequate answer to the raising mobility demand of Lombardy citizens. All the train information is given by website and mobile application, the latter was recently redesigned to improve the usability. The website, on the other hand, needs to be redesigned.
We did research and analysis. We understood that the most used services are: buy a ticket, check train status and check the train schedule. We analyzed in detail every step of each task and we did a schema of the current page architecture. We analyzed the website and the application of 3 competitors: Trenitalia, Italo, and FSS. We discovered some useful insights and then we analyzed each website and mobile application based on our parameters.
After that, we started the redesign. First of all, we designed a new architecture to solve all the problems that we encounter during the analysis of Trenord website, then we started producing paper mockups. Based on them we define the website wireframes and then we finalized the style (fonts, colors palette, shapes).
Finally, we developed all the pages of our tasks using Adobe XD.
User Tasks Analysis
Style and Graphics
Wireframes
Final User Interface
Course of Interactive System Usability Design
September 2019 - February 2020
With: Bertazzoli, Colombo, Lasalvia, Picardi.
Turin Registry office
The Registry office of Turin collaborated with Politecnico di Milano to increase the quality of its services. We conducted some research through observations and interviews at the registry office, desk research, and digital ethnography.
We discovered some problems and we generated different service implementations starting from our persona needs. We focus on the website redesign with a chatbot integration to help users through the procedure in the best way possible. This solution gives the possibility to use a self-service machine to take documents at the office, without standing in line and talking to the employee.
We analyzed the website's current architecture, created a new one and we produced
paper mockups. Based on the wireframes we finalized the first prototype with Adobe
XD and we test it. Based on the feedback, we improved it, we did a second usability
test, then some adjustments until the website's final version and the chatbot innovative interaction.
Then we developed the website mobile version and tested it. The feedbacks about the guided procedure of the website and the interaction with the chatbot were positive and enthusiastic.
Current architecture analysis
Brainstorming and technology matrix
Chatbot innovation
The technology matrix helped us discover the most useful technology to make the Turin registry office more efficient. From the research, we find out that the change of residence task needs constant assistance. A personal assistant as a chatbot was a good solution. Ian, the chatbot, is innovative because its behavior is like a real assistant. Natural Language Processing technology needs a lot of previous work, as good quality data gathering and understanding of the procedure. It couldn’t be our short term solution. We opted for multiple choice questions because the user feels more confident. The innovative part of this chatbot is redirecting. As a physical person, Ian answers the user’s questions and then brings him to the right page, according to what he wants to do.
Style and Graphics
Wireframes
Final User Interface
Course of Digital Design Studio
February 2019 - June 2019
With: Colombo, Picardi, Shahriari, Zheng.
Discover Lotte: immersive exhibition.
Charlotte "Lotte" Reiniger (1899 – 1981) was a German film director and the pioneer of silhouette animation. Her best known films are The Adventures of Prince Achmed (1926) and Papageno (1935). She is also noted for having devised the first form of a multiplane camera with which she made more than 40 films.
We decided to structure the exhibition into 4 parts: introduction to Lotte, shadow theatre, immersive space, and interactive “do it yourself” part at the end. The introduction to Lotte consists of a video about her invention projected on a curved wall. The next part is a shadow theatre: a vertical 1:1 scale of her layers technique to better explain to visitors her concept. The visitors can download and use a mobile app to record a video of them acting in that place.
The following part is the immersive space with some pillow in the center and her films
projected on the ceiling. In addition, the vertical walls show some animations (birds, flowers, and leaves) that follow the visitors. When they come near the wall, it shows some information. In the last part, the user can use Lotte’s technics in first person thanks to a tablet application and the digitalized version of her multilayer camera.
Study of the space
The exhibition is composed of 4 main spaces: 1. the introductory part about Lotte's life and techniques. 2. The shadow theatre to experience in first person her animations. 3. The immersive spece where Lotte's movies are projected on the ceiling. 4. The interactive part where visitors can create their own movie using Lotte's techniques.
Introductive video
At the entrance, there is a curved wall where a video about Lotte’s technique is projected. It explains to visitors how she created her silhouettes, how she builds the layers, and how she used her multilayer camera. It illustrates every action and process that she took in order to create her animations.
Shadow theatre and mobile application
The shadow theatre is composed of three different layers, stairs, and some objects. Visitors can understand her animation technique becoming the characters of this giant living animation. By downloading the mobile application, they can record their performance and save it.
Immersive space
The immersive space brings the visitor inside her movies. Her films are projected on the ceiling and the room is full of pillows. The vertical walls show birds, flowers, and leaves animations that follow the visitors. When they come near the wall, it shows some information about Lotte’s life.
Interactive part: create your movie
In the last part, visitors can personalize the main character of Lotte’s movie through the tablet. Then they can use the digitalized version of her multilayer camera to choose the foreground, midground, background, set the environment, and record the self-made animation.
Course of Digital Art
February 2019 - June 2019
With: Kraanen, Picardi, Aggarwal, Cerrato, Shahriari, Nikulina.
Smart Buckets
“Smart buckets” is an interactive system based on a set of smart containers, which are capable of recognizing the presence and the type of multiple objects inserted thanks to a scale system. The containers are connected to the “Smart room” ecosystem, but they are also equipped with led strips for giving feedback. The target group is children between 6 and 10 years old with various NDD severity rate and their therapists and teachers, So we decided to design also a tablet application to be used as a control panel.
The design was guided by the user’s needs, so the main aspects of the system are:
Ergonomics, Accessibility, Engagement, Safety, Extensibility, and Reliability.
The dimensions are a good compromise between capacity and children’s usability, the bucket front panel can be removed giving access to wheelchair users, the bucket colored LEDs ensure clear feedback and children’s entertainment, the shape of the bucket is rounded and the electronic is hidden to children, the therapist can rapidly add an object to the system, without worrying to attach any tag to the object, the system is reliable to ensure a smooth experience for both children and therapists.
Stakeholders
Interaction study of two scenarios
3D model and physical object
Tablet application UI
Immersive environment
Course of Advanced User Interfaces
September 2019 - February 2020
With: Valerio Colombo.
Oriana Arnone
UX - UI, Digital and Iteraction Designer
I studied Digital and Interaction Design at Politecnico di Milano.
I did my master's thesis about developing tools to enable User Experience Designer to work on projects based on Artificial Intelligence and Machine Learning technologies.
I worked in Intesa San Paolo as a Digital Analyst on two project. The first one was an international project where I had the opportunity to improve my problem solving skills and practice english. The latter was the supervision of the testing phase of Inbiz mobile application.
I also worked in Gruppo Mediaset as UCD Researcher and UX Designer. I collaborated with different figures about innovative solutions that imply Guppo Mediaset's Hyper360 technology.