Remind Holder — HCDE 451 Final Project
By: Ruotong Melody Xu
Tags: 3D Printing, Prototyping, UX, Interaction Design, Product Design

TEAM MEMBERS

INHAE KIM — Interaction Designer

Special Task: Creating mobile interfaces and designing user interactions

MELODY XU — Product Designer

Special Task: Creating a prototype using physically computed components and a 3D printed enclosure

PROJECT CONCEPT

Figure 1. A sketch of the primary design concept

Remind Holder is a digital reminder tool that aims to reduce distractions and increase productivity when notifying people about upcoming tasks and events. It is a wirelessly-linked system of a mobile app that presets reminders and a stationary desktop object (the pen holder) that displays ambient reminder notifications. The reason for having the reminder on a physical object instead of a smart electronic device is to prevent distractions. Smartphones reminders, for example, often enable procrastination as people tend to unconsciously go on Facebook, Instagram, and other social media apps when they get hold of their phones. We are creating a new way of letting our users be reminded about upcoming tasks and events without losing track of task and time.

The main task users will perform is to use the mobile application to pre-schedule reminders, such as putting in the time of the event, alert time, and reminder description, which will be shown on the pen holder display at the scheduled times. They can also choose a color to categorize each task, which would be lit up on the device with the reminder. When users tap on the surface of the product, the task will be marked as complete and the notification will be turned off.

DESIGN GOAL

Our goal is to explore the desirability and usability of our product with the following questions:

Desirability — Is this a product that people find useful during their work?

Usability — Is the interaction between the physical product and the mobile app intuitive and effective for the user to be reminded about tasks?

IMPLEMENTATION

We implemented our product using three prototyping techniques: Model Prototype, 3D prototype, and Interactive Prototype.

Model Prototype

We chose a model prototype as our first implementation because it is a cheap yet effective way to plan out our design in the 3D form. First, we started with a few sketches on paper of our 3D object. Our initial idea was a box with a screen, but it could only be used as a reminder and there would be no other features or functionalities. So we brainstormed how it can be more useful for people’s daily lives. At last, we thought of merging a screen that displays reminders to a pen holder, as shown in Figure 2. By providing a pen holder feature, our product can be more useful and desirable for our users. Then, Melody sketched our product with placements of Liquid Crystal Display (LCD), RGB LED, and the Arduino Uno that will be used to show messages and remind our users.

Figure 2. Primary sketch of Reminder Holder

We used cardboard to make the physical product and to visualize what would be the ideal size. Melody is in charge of integrating physical computing, and she got the sizes of an LCD screen and other digital parts down. Inhae cut the cardboards based on the size. Together we created a simple design that has the storage for digital components at the bottom. At the same time, we wanted it to have enough space and depth at the top to put pens. We decided to have two layers of the pen holder to place LEDs in between the walls and to separate the contents of the pen holder and electronic parts.

Figure 3. Model prototype with a window for the LCD screen and two layers of boxes for LEDs

Then, Inhae designed a paper prototype of the mobile app and screen interface for the LCD screen to plan and test interfaces with the physical product before moving onto the interactive prototype. The main screen has the list of reminders that is divided by days of the week. Through the add button, the user can navigate to a new reminder screen where the user can make a new reminder. New reminder screen can be extended to alert and repeat screens where the user can choose more option for the reminder, as shown in Figure 4.

Figure 4. Paper Prototype of the mobile app and the LCD screen

For the interfaces on the physical product, we wanted it to be simple but informative for the user as shown in Figure 5. So it will display time and the number of completed reminders on the day at the resting state. When the user saves a new reminder, it will project “Reminder Added” to confirm that the new reminder is also linked to the holder. At the reminding time, it will show the title and the time of the reminder.

Figure 5. LCD screen design sketches

After designing the model prototype and paper prototype, we conducted our first usability testing to test the interaction between the model and paper prototype and get feedback on which part of the screen is hard to understand.

3D Prototype

After conducting our first usability testing on our low-fidelity prototypes, we moved onto creating the 3D prototype that has a higher fidelity to provide the closer feel of the final product. Building a higher fidelity prototype helped us to better assess the product’s usability and desirability. We chose to 3D print the object because we believed it is durable and exact in measurements. And we decided to print with the white PLA filament material because it allows LED lights to glow through the 3D print.

Figure 6. Sketch of the model prototype with exact sizes

First, Melody made a quick sketch of the model with exact measurements of the product (Figure 6). As anticipated, there were a few complexities in creating the 3D prototype. When designing the 3D model using Rhino, there was a problem of not showing fillet edges when converting to an STL file, shown in Figure 5. We tried to debug the problem but we were unable to resolve it. So we redesigned the model without fillets. In the printing stage, we faced the limitation that the 3D printer cannot print for more than 15 centimeters tall. We had to come back to our design again and trim the height down.

Figure 7. STL file of the first trial that was not able to be printed

Figure 8. Final Enclosure Design in Rhino

We also faced the problem of not having white filament at the 3D printing station (white is necessary for the LED colors to come through). So we waited for the white filament to come and distributed our time to print on two different days. We printed the inner box and the triangle supports first with a green filament on the first day and the outer box and the lid with a white filament on the second day. At last, after a total of 20 hours in 3D printing, we were glad that the two prints were successful. We ensured an enclosure that was able to integrate all the components.

Figure 9. Components of the Remind Holder

Figure 10. Final 3D prototype showing resting state (the status of tasks completed for the day with the day and time )

Additionally, we decided to integrate physical computing as part of the 3D model to better illustrate the functionalities of the product. Melody programmed the LCD screen and LED lights (some level of Wizard of Oz is involved) to demonstrate how the mobile app would interact with the physical device. Here are a few cases:

Figure 11. Remind Holder with the new reminder

As shown in Figure 11, LED lights up with pre-selected color, and the LCD screen displays “Reminder Added” when a new reminder is added through the mobile application. Both the display and the light last for 3 seconds.

Figure 12. Reminder Holder alerting the reminder

The screen displays a reminder with pre-selected LED color at the alert time to notify the user. Although the screen display in Figure 12 does not show the words, it displayed “Dinner with Alex” at 7 pm.

Figure 13. Reminder Holder in a resting state after turning off the reminder

The LED light turns off after touching the light, and task automatically marks as complete. Screen goes back to resting state with updated task completion.

Initially, we planned to have single-color and bi-color LEDs to be in between the walls, but it was inefficient and the lighting was not showing through the walls. Later, we decided to use one RGB LED to reduce the number of single color LEDs. Here are the photos showing how the LEDs were integrated originally:

Figure 14. Reminder Holder with single color LEDs

When using single color LEDs, there was an inconsistency in the brightness of the LEDs, and the placement of LEDs was not ideal.

Figure 15. Soldering the RGB LED and placing it under the inner cube.

We decided to have the LED go behind the walls for a more ambient and friendly look. We also tested that the LED color came out the best when it is perpendicular to outer walls.

Interactive Prototype

For the mobile app, Inhae designed a wireframe using Sketch. Based on the feedback from the first usability testing, we learned that the new reminder does not allow the user to choose a date to set the reminder. And our participant suggested that it would be better to set 15 minutes before on the alert to be a default because people usually want the reminder to alert them ahead of time. So when she designed the wireframe, she added a calendar icon with date buttons in the main screen and in the new reminder screen that the user can easily tap on the date to access the reminder in each day.

Figure 16. Four features in the mobile app

As shown in Figure 16, Inhae chose a mint circle to be consistent in every page. In the landing page, the first screen in Figure 16, the filled circles are the completed tasks. The user can select the other circles to be filled when completed the tasks before the Reminder Holder alerts. In the main screen, Inhae made the days in the list to be a mint color that the user can separate the reminders by the day easily.

In alert and repeat screens, the mint circle is used as an indicator of what has been selected. All of the wording for the alert and repeat screens are from iOS because its wordings are chosen from long-term research, and we believed that the user will find efficient with the given choices from iOS.

Figure 17. New reminder screens with different indicating ways on the color

In the new reminder screen, we had several trials in the light option in how to differentiate the selected color from others. We first used an opacity of the color to indicate the selected color as shown in the left screen in Figure 17. The opacity of unselected colors was in 50% when that of the selected color was 100%. But when we mirrored the screen through our phone, the colors with 50% opacity seemed as if they are pastel colors. So we tried a check icon on the selected color. But putting a check icon on the no color, which is the first circle on the circle list, seemed too crowded inside the gray circle. Then, we tried to put a smaller circle inside the colored circles. And it was easy to differentiate which color is selected. So we chose the last trial to indicate the selected color for the light.

Figure 18. All screens of two tasks for the second usability testing

After finishing the four features, Inhae made all the screens for two tasks, Figure 18, to conduct usability testing using both 3D prototype and the interactive prototype. We wanted to make our wireframe to be interactive, but due to lack of time, we exported all the screens to use it for usability testing.

TESTING AND EVALUATION

We conducted two usability testings to evaluate the usability and the desirability of our product. The first usability testing evaluated our initial concept with the model prototype and paper prototype. We gave our participant one task to complete. The first task was to make a reminder for the dinner with Alex for tomorrow at 7 pm. We told our participant to set the reminder to alert them 30 minutes prior to the time of the dinner with yellow light. Our participant was able to finish all the tasks, including turning off the holder after getting a reminder. He also gave feedback on the mobile app to allow more freedom to the user to select a date. In the paper prototype, the alert was set to remind the user on time, but he thought that he would want most of the reminders to alert him 15 minutes prior.

We evaluated the usability of the product based on participant feedback after completing tasks and their success in interacting with the system. We decided not to test the desirability of the product because it was in the initial stage. However, the participant was looking forward to seeing the product in higher fidelity. Based on the feedback from the first usability testing, we improved our interaction prototype. We changed our mobile app to have a calendar for the user to select the date. The alert in the new reminder was changed to have 15 minutes before as the default.

After the 3D prototype and interaction prototype, we conducted two usability testings with two tasks to complete. The first task was the same as the first usability testing. The second task was making a daily reminder to drink water every day at 3pm, 6pm, and 9pm. We told them that they would want to get the reminder on time with blue light. During the testing, we observed that both participants were trying to find out how to add three-time slots. Although they were able to find out in a short time by using a plus button in Figure 19, they wanted to have an obvious button to add many time slots.

Figure 19. Adding three-time slots in task 2

We asked our participants to rate the desirability and usability of the product during our second usability testing session. On a scale of 1 to 5, 5 being most usable, the average for usability was 3.86. On a scale of 1 to 5, 5 being most desirable, the average for desirability was 4. During usability testings, our participants generally liked our intent in creating it, but they said they were not the perfect users for this product. All participants were college students that move around constantly, and they do not usually work at one location. They believed that the product may be helpful for people in an office environment, especially for people who work at their desktops for long periods of time. Our second participant said that it took her a little bit of a learning curve to understand the “⅔ tasks done” on the LCD screen in the resting state. She said that the mobile interface was not clear on the daily tasks to show in one reminder instead of three separate tasks. She did not have the freedom to check them three times under the same task individually.

ANALYSIS

Remind Holder worked really well. In the class presentation, many people found our product to be useful and interactive. We received feedback from a number of people that are willing to use this product. Many expressed the need for this product as they become easily distracted by phone notifications. They wanted to have something that is conspicuous enough but not too distracting to help them stay on track in doing their work. On the sticky notes, Figure 19, many people commented on how they loved our product and the concept. They enjoyed the prototype’s clean mobile interface and a well integrated, high-fidelity physical form. The interaction with the physical device is simple and minimized, and many people enjoyed having the customized glowing LED color to notify upcoming tasks. People were curious about how the system worked and how we were changing the LCD screen display and LED colors during the class presentation.