Wireframes
I first sketched a simple low-fidelity wireframe to get down my ideas for each screen. I then developed a mid-fidelity wireframes based on the sketches in Figma. This was my first time trying out Figma, so it took a few moments of getting used to, nonetheless it is overall a simple and intuitive tool, at least from a designer point of view.
The aim of the wireframing is to work out the flow in preparation for prototyping, so that the prototypes can be used for usability testing before it is developed further.
Low-fidelity Wireframes
Mid-fidelity Wireframes
I added some simple interactions to the wireframes to add some clarity to the flow. I found that the prototyping features on Figma are limited, but still able to provide a clear sense of the app.
User Testing
As a preliminary exercise for an usability test, four participants who participated in the survey were asked to provide UX feedback based on the mid-fidelity wireframes. Their feedback is summarised below:
What is good
- Intuitive UX: quick to get started and begin watching the film without too many extra steps;
- Good use of visual cues through emojis and pie-charts to make the experience user-friendly and pleasant;
- The slider for selecting the intensity degree for each emotions was appreciated for its usability and flexibility;
- Unintrusive app, it works with any platform for watching films, it provides a unique solution to enhance a regular activity;
- It was suggested that the user flow should begin with selecting an emotion from the start. This was subsequently incorporated in the current wireframes.
- Good use of visual cues through emojis and pie-charts to make the experience user-friendly and pleasant;
- The slider for selecting the intensity degree for each emotions was appreciated for its usability and flexibility;
- Unintrusive app, it works with any platform for watching films, it provides a unique solution to enhance a regular activity;
- It was suggested that the user flow should begin with selecting an emotion from the start. This was subsequently incorporated in the current wireframes.
What needs improvement
- After finishing a film, the user should receive immediate feedback on how their emotions changed compared to before starting the film;
- Add user profile and a way for users to track their watched films and emotional journey as well as add friends and social features;
- Add knowledge base on academic research on EI, as well as on the methodology that motivated the app;
- Replace the pie graphic used for selecting primary emotions with a different visual representation as a pie typically represents quantity in relation to a whole.
- Add user profile and a way for users to track their watched films and emotional journey as well as add friends and social features;
- Add knowledge base on academic research on EI, as well as on the methodology that motivated the app;
- Replace the pie graphic used for selecting primary emotions with a different visual representation as a pie typically represents quantity in relation to a whole.
