Project 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 the reminder notifications. Smartphones reminders often enable procrastination as people tend to unconsciously go on Facebook, Instagram, and other social media apps when being notified. We are creating a new way of letting our users be reminded about upcoming tasks and events without becoming distracted by other things going on in this world.

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 light 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.

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. 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 that will be used to show messages and remind our users.

Primary sketch of Remind Holder 

We used cardboard to make the physical product and to visualize what would be the ideal size. Melody was in charge of integrating physical computing, and she got the sizes of an LCD screen and other digital parts down. Using the sizes, I cut the cardboard to make a pen holder. 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. 

Model prototype with a window (left) for the LCD screen and two layers of boxes (right) for LEDs

Then, I 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 of the app has a 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.

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. So we decided to display the 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.

LCD screen design sketch

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.

Sketch with exact sizes

First, Melody made a quick sketch of the model with exact measurements of the product. 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. 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.

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

Final 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.

Physical components of the 3D prototype

Final 3D prototype in resting state

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. 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.

RGB LED placed under the inner box

Interactive Prototype

For the mobile app, I 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.

Four main screens in the mobile app

I chose a mint circle to be consistent on every page. In the landing page, the first screen on the photo above, 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, I made the days on 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.

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 the photo above. 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.

All screens of two tasks for the second usability testing

After finishing the four features, I made all the screens for two tasks 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 3 pm, 6 pm, and 9 pm. 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, they wanted to have an obvious button to add many time slots.

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 “2⁄3 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.

Feedback from the colleagues in class presentation 

Two designers of Remind Holder

If we can work on this product continually, we will change our target user to be office workers who work at their desks for a long time. We might want to design the device to be more modular, so users could customize the shape of the desktop object to fit more purposes, like a flower pot, storage boxes, etc., which will improve the usability of the product. We are also thinking about having the object’s screen to be touchable, so users can have additional gestures with the device, such as swiping left or right to look up previous/upcoming tasks. To improve the appearance of the design, we would like to eventually replace the LCD screen with small LEDs to display texts on a touchable surface. To increase the number of users, we might also look into syncing google calendar with the mobile app to display tasks on the device.