matt was a response to an initial brief called Moxi.
After doing some research the brief was modified and turned into matt. The research was done through reading about phone addiction, the mental impact of hobbies, and design guidelines for phone personal assistants. This was complemented with a number of interviews to better understand the problem.
This research helped with creating a storyboard showing the concept of matt.
Next, we spent time trying to figure out the look and feel, as well as the tone that matt should have.
We created three separate stylescapes each corresponding to a set of keywords;
Stylescape 1: Friendly, informal, colorful, sweet, caring, life, movement
Stylescape 2: Minimalist, Formal, business person, plain, classic, cold
Stylescape 3: Direct, hot-headed, direct, informal, warm colors, brute, rude
Stylescape 1: Friendly
Stylescape 2: Minimal
Stylescape 3: Direct
It was decided to keep developing the first and third one in the next week after collecting feedback on the designs. The feedback we got was that they liked those ones because they had more personality. On the other hand, they found the second one a bit too plain.
We moved on to making a wireflow to specify in greater detail how the app and widget should work. The wireflow was used to create two separate interactive Figma prototypes based on two of the stylescapes from the previous week. The customization of the two apps was created in two different ways to be able to evaluate the usability of both.
Prototype 1: This prototype was based on the friendly stylescape from the previous week.
Prototype 2: This prototype was based on the mean stylescape from the previous week.
We decided to combine the two prototypes in the end. The main look and tone was taken from the first prototype, but some of the structure and functionality was taken from the second one. We did this because we got the best feedback on the look on the first one, but some of the comments pointed that the customization of the second one was easier to understand.
After some feedback, we dove deeper into the concept of anthropomorphism and how it could be used to make matt feel more friendly and alive. We found out that "anthropomorphized technologies, in the form of both humans and animal creatures, increase social interaction and support emotional bonding with humans" (Lee, Baek and Ju, 2018). This made us add the dog to the design as well as add more colorful graphics to make the app feel more playful.
Our app was developed with React Native which allows code development for both Android and iOS using only Javascript without worrying about any native code. In order to accelerate our job, we worked with Expo. Expo is a framework for React Native applications that aids in developing, building, and deploying for every mobile operating system. We also make use of Redux to keep a centralized state of the application where we saved the user's personalized settings.
Lee JM, Baek J and Ju DY (2018) Anthropomorphic Design: Emotional Perception for Deformable Object. Front. Psychol. 9:1829. doi: 10.3389/fpsyg.2018.01829
