UX Final Project: Comiary

Motivation

My personal experience during and after studying away motivates me to create a project which can record the life. Thoughts, feelings, and attitude toward life or people change all the time. It would be nice to have my own biography in which I can record these emotions and ideas so that when I looked back I can see the change and growth.

Based on this idea, I started brain storming. At the beginning, I want to do a game. The form will be like an interactive comics. User can make choices at turning point of life, such as which college to apply, what major to choose, and what job to do. However, I soon abandoned this idea because I didn’t know what should be the proper structure of the game, and drawing comics would be a heavy work load.

Then I changed my mind: instead of making a game, I want to make a diary encouraging people to keep diary, especially young generation. I think comics can be a trigger because most of the young people enjoy different kinds of comics. Therefore, I did a second round of brain storming. You can details below.

The APP will use machine learning to recognize key words in diary entry and audio log, and match key words with the picture library. This is the mechanism of how the APP can generate comics based on the content of user’s entry.

User Research, Personas, and Scenarios

After figuring out what the product and how the products works, I worked on finding my target users and their interests.

I conducted two kinds of user researches: online survey and face-to-face interview.

Online survey

I used Tecent questionnaire to do the online survey. In the survey, I collected the basic information about potential users, such as gender, age and job. Moreover, I asked some questions related to their behavior and attitude related to diary.

I collected 57 responses in two days, which is not bad. Two-third of the people responded were female, and the majority of the people responded were students (This result is biased because I don’t have enough connections off-campus).

It is also interesting to see that people don’t keep a diary not because they have nothing to write, but because they are lazy or they don’t have enough time.

Following are the screen shots of the results of the online survey:

The gender distribution of people respondedReasons why people don’t keep diary Whether people have the habit of keeping a diary

Interview

I interviewed people who shown a strong interest in my APP. During the interview, I asked them the motivation of keeping a diary and what features they expected while using the app.

Personas and Scenarios

I built the personas based on the data I collected. Since most of the people responded are female, I assumed that female would be more interested in using my APP. Therefore, these are two female personas: one is relatively introvert, while the other is more extrovert. Besides the differences personality, they have different motivations using the APP.

You can find more info about these two users and the scenarios of using the APP.

Story Board

The following story board is about a young white collar using my APP. He had a bad day: he didn’t bring the umbrella, and it started rainy; his boss was angry about his work. After he went to home, he took out his phone and made a new diary entry about what happened and how he felt. The APP then generated a healing comics based on the content of his entry. Viewing the comics, he felt be healed. He then went to sleep.

This story board was created before making any wireframe. The interface looks different from the one of the prototype. However, the concept is the safe.

The App, Comiary, encourages people to capture event no matter big or small, and their emotions. It simplifies the process of writing a diary, and the comics generated can provide positive energy for users.

User Flow and Site Map

After several interviews in the user research, I decided to create three section in the APP: today, where user can add new dairy entry for the day; past, where user can view his or her previous diary entries or comics; future, where user can send a letter to the future or add to-do list.

The initial user flow and site map look like this:

After a discussion with Professor Azure, I decided to delete the ‘future’ section, because the function of this section went too far away from my initial idea and the core task of the APP: recording life.

Following is the site map for my prototype:

Wireframe

My wireframe is base on the user flow diagram and the design of APP icon I made earlier.

The idea of the icon is the combination of “D” from diary and an element representing the feature of comics. I chose a face without mouth because I want to leave space for user to add his or her feeling.

 

 

During the process, I found it quite different from drawing the user flow. I needed consider so many details, such as the position of a segment, the grid, the exit button. Moreover, when I added a new button, several interfaces needed to be added. When adding one new function, a UX designer needs to consider a lot of things.

You can get a general idea of my wireframe through this screen recording: ScreenRecording_09-26-2017-0020 or see the pictures below. At that stage, I didn’t think about the details of the “setting” menu.

Usability Test

Before the National Holiday, I interviewed several students, two freshmen, 1 sophomore, 1 Junior,  2 seniors and 1 staff (who is about 4 years older than me). Following are the pictures of my notes (in Chinese though).

The interviewees gave me several useful suggestions:

  1. The name of the APP need to be clear enough to tell the user that it is an APP generate comics based on your diary entry. Therefore, I create “COMIARY”, which is a combination of “comics” and “diary”.
  2. The theme color of the app should be a warm an healing, instead of black and white. since it is an diary app in which people will express their negative feelings, using black and white may make them feel more upset. However, since different people have different taste, user can choose the theme color based on their preference.
  3. The section on the home page need to be refined. It is should to based on a timeline, instead of simply using present and past.
  4. The ‘adding a new entry’ button is not clear enough.
  5. User do not see that they need to input the weather and their mood before they make an new entry.
  6. There should be loading bar when generating the comics so that the users can know how long they need to wait. Moreover, it should be clear on the editing page that the next step will be generating the comics.
  7. About the voice input, it can be a short voice memo about 1-2 minutes long which can be inserted into the diary entry.
  8. Before generating the comics, let the user choose what kind of comics they want. There can be preview of what the comics will be like of each kind of comics. What’s more, user can choose they want the comics in black and white or in color.
  9. When a user is reading the comics, the gesture they use shouldn’t be scroll up and down but left and right.
  10. If the comics can be combined with the diary entry and the voice input somehow, it would be great.

Prototype

Based on these suggestions, I made the first version of prototype. You can see the screen recording here (There is some link errors).

After we learnt the design principle, I refined my prototype.

After researching on color mood on pinterest, I chose to use the color of this picture because orange is warm and attractive to capture people’s attention. Primary color: #ff5722; secondary color: #004d40; other colors: #ffffff, #ff8a50, #b2dfdb

I used Sketch to design the interface, and the Sketch Mirror helped me lot.

You can play with prototype on Marvel: https://marvelapp.com/10eda9ig/screen/33704055

 

Mock Up

To make the sense that users can use the App anytime and anywhere, I made several mockups with placeit.net.

Reference

  • pinterest.com
  • material.io
  • marvelapp.com
  • placeit.net
  • Diary Apps: 

Special Thanks to:

Professor Azure Qian

Leave a Reply