Case Study — Digital Journal App

Echoes — Digital Journal App

Introduction

Hi, I’m Natalia, a Polish designer, currently undergoing a Master’s Degree in Human-Computer Interaction and Design at the Universidad Politécnica de Madrid, Spain. I enjoy designing things that have personality and balancing out an aesthetic appearance with functionality is my great passion.

Topic

The topic that we decided to cover this semester was Journaling and Mood Tracking. In brief, something that will let the users keep track of their memories and feelings associated with these memories. You may think it resembles some of the already existing apps like Instagram, but our idea aims at people who don’t feel comfortable oversharing on social media and would rather keep the memories only for themselves, but still having their thoughts and emotions organized in a timeline. The primary goal was to maintain privacy as a priority and sharing the posts only with the ones we want to.

Methods

In-person User Research | Contextual Inquiry | Observation | Profiles Creation | User Journey Map | Ideation | Lo-fi Prototyping | Navigation Map | Tasks creation| Usability Testing | Hi-fi Prototyping | Second Iteration of Usability Testing| User Satisfaction Questionnaire | User Experience Questionnaire | Interface Programming

Process Outline

  1. User Research
  2. Lo-fi Prototyping
  3. Usability Testing
  4. Hi-fi Prototyping
  5. Second Iteration of Usability Testing
  6. Conclusions and Next Steps

1. User Research

To get more perspective on the topic, we performed several interviews and observations that supplied us with valuable insights. Some of the findings helped us shape the process of creating a memory and we also defined two main profiles.

Preparation Of Templates

  1. Interview Questionnaire
  2. Observation Template
Interview questionnaire
Observation template

Interviews

Besides general demographics questions, we wanted to get to know users’ habits when it comes to saving their memories. That’s why we asked whether they keep a journal, track their moods, save images or post on social media.

  1. Users use various methods to remember a memory depending on the event type. Sometimes it’s a picture, sometimes video, text or an audio recording.
  2. It’s hard for users to maintain a structure of memory since each event is a unique experience. Moreover, consistency is also troublesome.
  3. Users value their privacy and don’t share every important memory on social media.

Contextual Inquiry

To get an overall idea of how the users save memories we asked 9 of them to perform a couple of tasks including:

Profile

We noticed that although users tend to save memories in a form of journals or on social media, they have different motives for doing that.

User profiles

Task Organization Model

Task organization model

Tasks

Based on the insights from the interviews and observations we decided to design and test 3 tasks.

  1. Log the memory
  2. Explore the mood patterns

User Journey Map

This UJM shows the process of logging memory and trying to remember it afterwards.

User Journey Map

2. Lo-fi Prototyping

Even though we found out already in the interviews that the majority of users prefer to use a mobile phone to save memories, we didn’t want to limit ourselves to only one design. Hence, two separate designs were created, the first one for a mobile phone, the other one for a desktop.

Register the mood
Log the memory
Explore the mood patterns
Register the mood Desktop

Key Differences

Also, the designs contained different solutions for the same issues that aimed to test which option has more supporters. For instance, the mood selection was designed to rotate a circle in the mobile version and to select a mood from tiles on the desktop.

3. Usability Testing

The usability testing was performed using the “thinking-aloud” technique with users of 4 nationalities, and during the test, we measured effectiveness, efficiency and user satisfaction through questionnaires we had prepared beforehand. In total, there were 12 participants performing 3 tasks in Useberry.

Mobile Device Prototype

One of the tasks — Log an event can be seen in a recording here:

Desktop Prototype

And the same task performed on the desktop app can be seen here:

Tools

Process

  1. Welcome text.
  2. Gathering personal information.
  3. Usability testing of one of the prototypes. Gathering data and noting down observations.
  4. User satisfaction questionnaire and general impressions.
  5. 🔄 Repeat step 3 and 4 for the other prototype.

Effectiveness — Mobile Prototype

The average and standard deviation of mistakes made per task using the Mobile prototype
Bar chart with the number of mistakes made using the Mobile prototype.

Effectiveness — Desktop Prototype

The average and standard deviation of mistakes made per task using the Desktop prototype
Bar chart with the number of mistakes made using the Desktop prototype.
A diagram comparing the number of mistakes per task and design.

Efficiency — Mobile Prototype

Table showing the average and standard deviation of the number of actions per task — along with the optimum number and the ratio — for the Mobile prototype
Bar chart with the number of elemental actions to complete each task using the Mobile prototype. The optimum value represented as a line.

Efficiency — Desktop Prototype

Table showing the average and standard deviation of the number of actions per task — along with the optimum number and the ratio — for the Desktop prototype.
Bar chart with the number of elemental actions to complete each task using the Desktop prototype. The optimum value represented as a line.
“Box and whiskers” diagram comparing the number of actions taken per task and design.

User satisfaction: SUS Questionnaire

Average SUS score: 80.63

Table showing the results of the SUS questionnaire for the Mobile prototype.

SUS For Second Design: Echoes Desktop

Average SUS score: 79.79

Table showing the results of the SUS questionnaire for the Desktop prototype.

Analysis Of User Satisfaction (SUS Questionnaire)

Table showing the SUS scores of both prototypes.

Findings

Some of the main usability problems we have found are the following:

  1. Some participants complained about not getting enough feedback due to the low level of details for both prototypes.
  2. One of the sections of the app — The Mood Tracker was hard to discover in the mobile prototype, mainly due to the mere selection of the icons.

4. Hi-fi Prototyping

After carefully selecting colours, fonts and components to match the look and feel we associated with Echoes, there came the time for the UI design.

Echoes Mobile — Task 1

Navigation Map

Navigation map of Echoes Mobile App

Main Improvements — Information Reduction

Some of the users complained that there were too many options to choose from on the home screen and therefore, they struggled to complete the task. We added labels to the top navigation bar and made it more prominent and also adding respective icons to the bottom navigation bar.

Main Improvements — Audio Recording

Users had troubles audio recording themselves since they didn’t know how the button works. We solved it by adding a “Tap to record” label. The position of the button was also moved lower for a better thumb reach.

Logo

Echoes logo

5. Second Iteration of Usability Testing

In the second iteration, we were testing only one of two designs — the mobile one that we have programmed in Android Studio. The prototype in a form of an apk could be installed by the users on their phones increasing convenience and real conditions. In several sessions, we performed 12 usability testings where 6 out of 12 were entirely remote. This was not the easiest thing to adjust the testing to the online scenario but with a help of various tools, in my case, it was Google Meet and screen recording, we were able to both observe the participant and the screen that he or she is operating with.

Effectiveness

Comparing the hi-fi and lo-fi values, it looks like the lo-fi prototype “wins”. The possible reason for that would be that in the lo-fi testing sessions users didn’t have direct control over the prototype because there was only one possible order of performing the tasks. In the hi-fi prototype, they had the freedom to take a look at functions that are not needed to complete a task and often didn’t pay attention to the time taken. In other words, they had a correct mental model build on how to use the creation functions so we take it as a success!

Bar chart comparing the number of mistakes made by the users when using both the lo-fi and the hi-fi prototypes.

Efficiency

When comparing the hi-fi and lo-fi efficiency ratios, the lo-fi prototype scored better at efficiency similarly as at effectiveness. We think it’s again the case of flexibility on the order of performing tasks which may have lead to taking risks by clicking more just to make sure if they were attempting the task correctly.

Bar chart comparing the ratios of the number of actions performed per task among the two groups of users and the optimal action ratios value.

User Satisfaction — SUS Questionnaire

As it can be seen in the values in the table below, the hi-fi prototype scored better after the performed tests than the previous lo-fi prototype. Furthermore, thanks to the standard deviation values we can observe that participants showed a higher level of agreements on the questionnaire this time. Overall, we could say that participants liked our improved hi-fi prototype after we implemented improvements based on the first iteration’s results.

User Experience — UEQ Questionnaire

We analysed the prototype in a context of six categories as can be seen below and overall 4 out of 6 scores were excellent and 2 out of 6 were good.

Chart displaying the UEQ results.

General Impressions

🟦 What users liked.

General impressions

Main Usability Problems

Usability problem 1
Usability problem 2
Usability problem 3
Usability problem 4
Usability problem 5

6. Conclusions and Next Steps

It was a fascinating project and really nice teamwork with Patricia, Andy and Octavio. There are still some things that we could do to improve the current product:

  1. Implement design improvements — the prototype had several negative issues that we identified and found solutions for. We believe that once these problems are solved, the prototype will perform even better.

Final UI Design

➰Aesthetics enjoyer, 🤹‍♀️Psychology freak, 🙋‍♀️People-oriented