Introspecting the human-centered design process through Intraspect
Mental illnesses plague over 26% Americans today, in some form or the other — depression, mood swings, anxiety, to name a few. Sometimes, people tend to not pay heed to signs of mental illnesses, however, the ill-effects have been on a drastic rise. Given the advancements in technology today, it seems apt to turn our head towards this tool to find a solution to the different mental illnesses that society faces today. In an interaction design class at UC San Diego, my colleagues (Ribhu Lahiri, Prabhav Khandelwal) and I were motivated to work towards the particular issue — and decided to create a mood-journaling application: Intraspect, which helps a user track his or her level of happiness through the day in relation to the different activities he or she takes part in, and over time, gives recommendations for activities that can boost overall happiness levels.
Here, I am going to talk about the process we followed to create this application, which included identifying user needs and making storyboards, creating paper prototypes and mockups, carrying out user testing and taking feedback, analyzing that feedback, rapid re-prototyping — and finally arriving at a final product after following the Human Centered Design process.
User research and Needfinding
Identifying potential users and figuring out what they would want and need from such an application was the first step in getting started with our design process. For this, we each interviewed three subjects (total 9) (students who are involved in a heavy schedule — but different majors and types of activities) and asked them questions about their current mood-journaling habits. Some relevant questions we asked to test out the usable feasibility of the application were:
- Do you experience a range of different emotions/moods during a day?
- How do you currently keep track of your moods through the day, if you do?
- What other methods of reflection/introspection do you use (e.g. keeping a diary?
- Why do you use this? What are your biggest pain points with using this?
- What is your view on integrating technology into mood journaling?
- Would using an application as compared to *method* be an interesting idea to you?
After analyzing the answers we got from our users, we made out a list of needs that each individual user had and utilized this information to guide us towards the next steps of the process. We saw that a lot of needs were repeated amongst different interviewees, and used those as a baseline to start thinking of our different design criteria and design our point of view.
Our major learnings at this step was that our application was catering to a niche market segment (not everybody mood-journals), users were interested in the idea of using an application to journal their moods as long as it was clean and simple to use. The focus would be on making the user input process as simple as possible and also ensuring that there is relevant visualization from which the user can learn more about himself or/herself.
Experience Prototyping
The next step in our process was experience prototyping to see how users reacted and felt about our application. For this, we designed the basic application idea to be mood journaling application that keeps track of your mood as Happy, Neutral or Sad through the day and would ask the user to note why he or she felt so. In order to test this core functionality, each of us physically conducted two experience prototypes — we identified potential users (from different backgrounds/cultures/majors) and pretended to be the application for them and conducted all the functions our application would. The experiments were conducted with different users in the following way: call them up at the same time for a week, 3 times a day, and ask them to log their mood. Then, get a reason and note that down.
We got back some valuable feedback from our four experimenters: Harshil, Devyaanshu, Mo and Rishabh.
Major design feedback was around:
- Monitoring the time between recording the mood and putting down a reason for that mood, to ensure accuracy of the information
- Increase the spectrum of moods from just Happy, Neutral and Sad and add other emotions
- Add the choice to feel more than just one emotion at a time (incorporate a 2 dimensional approach to convey a deeper feeling — a combination of two emotions)
- Instead of having the app ask you how you’re feeling at a specific time, you should be able to log your feelings whenever you want to.
Storyboarding and Paper Prototyping
We incorporated the feedback obtained from our experience prototyping sessions and went forward to create storyboards for users of our applications. We assumed various mock users and created three 6-block storyboards to define that users need and interaction with Intraspect. An example of a mock user is shown here of a college student Dave, who is stressed out after his examination because of a lack of preparation, and begins to use Intraspect to prevent a repeat scenario. After getting onto Intraspect, he is able to introspect into his past and make better decisions before his next exam.
We also created the 3 different complete paper prototypes of our application. Our plan at this stage was to use these prototypes on different users and test their interactions with our design. We would then incorporate the best elements from these two prototypes and create one final version which we would digitize. A link to a short video we made displaying our paper prototype and and a potential user interaction can be found here.
User Testing
A good amount of the next phase of our time was spent getting evaluations from other users regarding our two prototypes. We sat with interviewees and had them complete a specific task using our paper prototypes just like they would on a regular phone screen, and took note of their interactions with the design. Notes were taken specific to Nielsen’s design heuristics and based on the feedback we got on both prototypes, we made a list of changes we should make to the final application.
Through this process of understanding which elements of the design worked and didn’t work, we finalized the design of the application. There were five main pages:
- The home page, which would have a ‘happiness’ slider and tags to record other emotions and activities. There would also be a place to add notes.
- In the analytics page, there would a graph showing happiness level vs different activities and it would be based over the period of time chosen by the user.
- In the history page, there would be a chronological framework of a journal that would show every entry, and the option to open and view it fully with tags/activities/notes.
- The settings page would be a simple menu that would have simple and clear cut functions.
- The profile page would be where you could view your overall happiness score and also change your profile picture username/basic settings (for future possible ‘share’ features of Intraspect)
Creating wireframes and setting it up
Now with our design on paper, we built up digital b/w wireframes for the application using Sketch. I’ve attached a screenshot from a report at that time showing the two basic screens that we first started to develop.
We began to design the screens using basic HTML, CSS and javascript. The front end framework was materialized and we set up a backend database using MongoDB, and lastly used jQuery to implement buttons, icons and clicks implementation.
User testing #2
After setting up the basic framework and deploying it online, we conducted our second round of user testing. We had users make and account and log in, and interact with the happiness slider deployed on the screen, had them add activities and emotion tags on the same page and log their happiness level. They could also manage their activities from the setting page and view their profile and picture on the profile page.
The users enjoyed interacting with the application and gave us feedback around the location of the slider and the interface to add emotion tags. There was also major discussion on the color scheme and they reported the red and white looking too generic. We also conducted A/B testing using google analytics and tracked various interactions users were having with different design components on different pages.
Final Design
After going through all the feedback we got through the entire process and through our testing, we finally created our final design and re-iterated point of view.
The final version you see here has incorporated a lot of the design feedback we got through our various stages of user testing and analytics, and we also decided to go with a complete rebrand with fonts and color. The app is designed keeping specific user needs in mind that it solves, and gives activity-based recommendations that can help users in their daily routing. To automate this, there is also a feature to integrate your calendar with the application, so it tracks your happiness level with relation to activities in your daily schedule. It then recommends similar activities after it learn more about what activities correspond with higher happiness scores. Overall, these recommendations are based on activities that will make you happier!
P.S.: If interested, you can check out Intraspect here !(but make sure to inspect it and view it as a mobile application.)