Designing DayQuarium — App Design Process — UCSD Capstone Project
It all started with the assignment: “Redesign how people experience time.”
At first it seemed a huge challenge — Who could imagine something like redesigning the wheel? “How can I redesign the experience,” I thought to myself, “Design a new kind of clock or calendar? It must be possible.” We measure time in units — 60 seconds in a minute, 60 minutes in an hour, and 24 hours in a day. However, these are just units of measurement based on something. It’s not about the “tick tock.” We have underlying reasons for our need to track time. Consider how timekeeping first became super important when people needed to catch trains on time. On the other hand, some units of measurement are based on objective time correlating with something like the earth’s orbit, but we don’t experience daily life in that way. We break down our lives into meaningful events.
By breaking down the objectives of time into smaller pieces, I was able to dive into this project. I observed when we check our wristwatches or phones, we are wanting to know how much time we have left (or has passed) before something important will or has happened, not how many ticks of the clock have happened. We are goal-oriented or task-oriented in this way.
I needed to get outside of my head and into the brains of other people — the potential users of my app mostly because they have different goals and perspectives than I do — Different lives than mine. Afterall, I ought not design an app for myself solely. It needs to be for other people to find useful!
Needfinding
I observed three users in their environments naturally using their scheduling tools. I also asked them later on to walk me through how they were interacting with their calendar apps/timing devices and schedule earlier in the day. My goal was to learn about their interactions with their scheduling tools and how those interactions affected and related to their behavior.
Jacob
Jacob was a 15 year old student, and high functioning on the Autism spectrum. He needed gentle reminders to keep on task. He was sometimes overwhelmed, in a sensory way when dealing with too many notifications. He disliked sudden changes, and thrived in a well organized schedule — Unfortunately, it is unrealistic to have a strict schedule work 100% of the time, unless it is adaptive when things come up. He relied on his scheduling tools heavily! When he was in the middle of using a computer deeply, he would get “wired in” or “in the zone,” and had trouble snapping out of it without a countdown. At the same time, he had the habit of dismissing calendar notifications while in the middle of something, and then accidentally missed the event or the task. He often lost track of time, and wanted to know what he had time to squeeze into his schedule.
Observations
When Jacob spotted an assignment deadline on his school’s web portal, he began to add a reminder to his phone by manually memorizing the date and information, and then switching to his calendar app to type in a reminder. He went back to double check his information and realized he had made an error. Jacob then copied and pasted each section of information, one at a time into each cell of the calendar entry, and hit save. He then manually downloaded the files from the assignment into his cloud file app, renamed them, and then he put them into a folder for that specific assignment. Next, he pasted the link to the cloud file folder into that same calendar reminder entry. Jacob was supposed to be eating lunch at this time. Distractedly, he grabbed his thermos of coffee and drank. Jacob sat down to do a coding project just for fun and forgot to eat. Later, his reminder notification to work on his assignment beeped loudly. He was in the middle of deep thinking, solving a coding problem, “wired into the computer,” seeming to be hypo-focused. He then clicked snooze on the notification delaying the alarm for ten minutes. When the notification beeped again, Jacob was still “wired to the computer,” or “in the zone,” doing the coding problem. He looked irritated by the beeping notification, and hit snooze again. Suddenly, he received a message from a friend, and swiped dismiss. When he swiped dismiss, it accidentally shut off his calendar reminder. Realizing this and seeming to look distraught by the sudden change, he had to adapt his schedule rapidly, reactivating and rescheduling the reminder again; Then he abruptly switched to working on the soon-to-be-due class assignment, forgetting to eat his now long overdue lunch — The lunch break time window had already passed.
Recapitulation Questions
When Jacob was asked “If there was anything you could change regarding your scheduling experience, what would you change?” Jacob replied, “I need the calendar to be more streamlined, less overwhelming, and less frustrating. I need the app to actually work for me.” He also mentioned that he wishes there was a vastly easier way to attach files, communications, and web links from his classes to specific events on his calendar centrally instead of needing to multitask between several apps on his phone.
Initial Thoughts
I was surprised by his highly methodical way of organizing his schedule, but I was not surprised when he expressed how frustrating the scheduling tool interaction experience was for him with respect to both the breakdown of how long it took to schedule a reminder, and how quickly the user interface breakdown occurred. Other breakdowns during data entry were also observed.
It occurred to me there may be design opportunities in making the calendar app more streamlined, less frustrating, less overwhelming, and more usable, with an explicit transition of exiting a task, a means to lock into a task better, and a way to avoid swaying off task. Another design opportunity could be adding more integration between what the user interacts with that is relevant to his schedule, and the schedule itself. The having to “tune out the alarm sounds” breakdown ought to be fixed by offering a more immediate way to respond. In Jacob’s case it would be better for him to be given an estimate of time amount required for each task.
Jen
Jen was a 47 year old bank manager. She relied on physical, tangible scheduling and notation tools such as a paper calendar, sticky notes, print outs, and a telephone voicemail. She had trouble staying on task, starting task habits, and knowing how to quickly alleviate schedule conflicts. The employees at her office used a shared computerized calendar. Since Jen prefered tangible interfaces and learned best kinesthetically, the electronic calendar interface caused scheduling conflicts with her personal scheduling system and abilities. Jen needed to use her electronic calendar but dreaded using it.
Observations
Jen received an electronic document which she needed to process later. She printed it out, copied it onto a piece of sticky note by hand, and set the original printout in a paper folder. She pinned the second sticky note onto her office wall. I was curious why she hadn’t simply printed out two copies and pinned one onto her wall instead of copying it by hand onto a sticky note but she indicated she learned by writing her notes out. A moment later, a coworker higher up told her that she needed to do a task — it wasn’t due until sometime the next month, and it required homework. I observed her calling someone; she left a voicemail saying “Ok Me, don’t forget to do (homework task with lengthy instructions were spoken)…before the deadline on October 5th.” Her boss later walked up to her and told her to do an assignment right then and she replied, “But I’m in the middle right now working on assignment X that you put in the e-calendar.” He replied, “The e-calendar says you have an open time block right now though.” Jen apologetically replied, “Sorry, I forgot to mark myself what task I was doing.” The boss shaking his head replied back, “You really need to use the e -calendar for everything, and stop using your paper calendar.” Jen again apologized and seemed frustrated. She scrambled to adapt her schedule. She crossed off something on her paper calendar and jotted something down, then she edited the e-calendar on her computer all abruptly, and on the fly. She muttered, “I wish I had my secretary back.”
Recapitulation Questions
Jen was eager to give feedback without a prompt.
She said, “When I arrive at work in the morning, I’m flying by the seat of my pants, and I forget to check the e-calendar that we share. I use my paper calendar because it helps me to be able to glance briefly when I arrive to know my schedule without having to manually check on an outlook e-calendar. It’s hard to make a habit of checking the shared electronic calendar. Since I don’t use the shared electronic calendar as much as everyone else does, I don’t hit confirm every time, and this causes it to mark my schedule as open. Then my boss gives me more assignments because he thinks my schedule is open at that time, but I’m actually in the middle of an assignment. This makes me feel overwhelmed, which makes it even more difficult staying on task. Our computer system is old, and sometimes it fails to accept input, this causes our e-calendar (which we would normally use to log bank filings) to stop counting all that we’ve actually completed. This causes more trouble when we get audited and I can’t show documents to back us up — So that’s my excuse why I tell everyone to print everything off. I guess my real reason for printing everything off personally is that it doesn’t click in my mind unless a can write it out. It has to be tangible. I don’t know why, but writing things out help me to remember them. We are expected to conserve paper because we will be going green, so we get in trouble for using too much paper.”
When I asked Jen, “If you could change anything about your scheduling experience, what would you change?” She told me, “I need a way to stay on tasks and know when I have an open time block; I wish my calendar would give me a suggestion of what to do next. I need the e-calendar to stop marking my time blocks as open when I forget to click confirm! On the other hand, I would much rather keep using a paper calendar because I need to feel it in my hands to help understand it and lock it into memory.”
Initial Thoughts
There may be several design opportunities here. For starters, there seems to be a need to fix the communication disconnections between all the employee’s shared electronic calendar and Jen’s personal methods of scheduling requires an overall change. The e-calendar could be made more explicit and tangible for users like her that learn best kinesthetically; Breakdowns during data entry were observed; Paper documents could be better integrated with the electronic tools; I also recognized a better way to stay on task and to reschedule on the fly could be design opportunities for new interaction processes and new interfaces.
Meera
Meera was a 36 year old, and juggled an immensely busy, stressful schedule. She had three children, and was a lawyer in the middle of a hectic case. She shared court dates are often delayed or rescheduled, and court hearings often take more hours than expected. With her schedule pivoting on those events among others, she had to edit and repair her calendar on the fly. Her schedule also had to be in sync with her children’s school and their extra-curricular schedule which she managed along with her husband’s schedule. This was a daily challenge when dealing with deadlines so often. When she came home and her phone was within range of Wi-Fi, all the notifications that required an internet connection refreshed all at once, making a long list of new information to sort through.
Observations
I observed Meera receiving several important emails, over the course of only a few minutes. She was in the middle of helping her daughter with homework, and upon hearing so many notification sounds, she was distracted. She checked her device to read the email titles, and I noticed she forwarded two of the emails to a different email address she owned. I found out later on during my recap questioning that she did this as a workaround as a way to bookmark emails for a later time to add key time information from the emails to her calendar — She regularly did these steps as either reminders or logs every evening before bed. Another notification “dinged.” This time it was a message about a physical event for her work that was happening right at that moment which she was supposed to be attending, and she had missed it. I found this out later when she walked me through what happened from her perspective — One of the emails about that missed event was something she had meant to forward, then bookmark, and then add to her calendar last month. Unfortunately, it had been scrolled past and missed in the earlier bombardment of emails. It was observed that Meera often has to process stacks upon stacks of time stamped, non-electronic, plain paper documents and she was constantly receiving notifications.
Recapitulation Questions
When Meera was asked, “If there was anything you could change regarding your scheduling experience, what would you change?” She said, “I forward emails that mention tasks that will be due to my other email address to bookmark them. What I need is a quick way to prioritize them as they come in, and export the emails to calendar reminders. Earlier today, I received a bunch of emails in a quick burst. It happens a lot. I bookmarked some of them, but what happens is I fail to bookmark some and then when that task mentioned in the email is almost due I forget and fail to meet the deadline completely. Often a deadline mentioned in an email isn’t due for long time, and it gets lost in the sea of emails! Bill notifications can have far off deadlines like this. I need a way to simply highlight a line on any text, or email from someone else, and add that mention of an event, or task to my calendar, or other actionable operation with ease. I also need to know when my schedule is open at the same time as my husband and children’s schedules. All our calendars need to talk to one another, but we all use different calendar systems and apps. I would like an easy to use documentation tool in my calendar app that I can quickly and easily scan and the tool could log how long I spent at a task, including photos or scans of documents.”
Initial Thoughts
Breakdowns during information entry and information processing were observed. This suggests there may be disconnections between electronic scheduling and interactions with physical documents. Also, other breakdowns occurred as disconnections between different locations of information on her device and her family member’s devices. Her need for a means to respond to notifications was also an opportunity to save her time and account for many hours of actual time spent in her busy day that probably she was unaware of its impact on her. There seemed to have been a need to fix these breakdowns which were latent design opportunities.
POV
After these observations and interviews, I distilled my findings down into a Point of View: Needfinding research from the previous assignment showed that a disconnection breakdown occurred regularly between the artifacts and the people a user interacts with relevant to the user’s work schedule, personal schedule, current projects, and to-dos, versus the user’s actual use of time. These breakdowns were identified as an opportunity to be alleviated by prioritizing and by adding a better integration between the systems, people, and interactions relevant to the user’s schedule.
Brainstorming Ideation
From the user’s needs, I came up with this list, however, I was not ultimately able to address all of these needs in the final app design, but it was useful to flesh the needs all out into a list. The users:
- Need the ability to prioritize notifications prior to dismissing them.
- Need to integrate projects, free time, and scheduled time.
- Need to integrate work and family life.
- Need the ability to manage the achievement of personal goals.
- Need reminders to stay on task.
- Need to know what to do next.
- Need ability to easily adapt calendar on the fly.
- Need the ability to link all related sources of information about something.
- Need the ability to easily access all related sources of information.
- Need the ability to integrate calendar to accurately reflect time spent in a day.
- Need the ability to produce reports which reflect how time was spent.
- Need the ability to measure success toward personal and professional goals.
- Need the ability to communicate effectively across different calendar systems.
- Need to have analytical suggestions to not waste time.
- Need a preplanning mechanism for time management.
- Need a transitional guidance tool for moving to a paperless system.
- Needs to work cross-platform.
Storyboarding
I sketched out several quick storyboards in order to convey to clients potential solutions to the problems/opportunities I found. It was better to start with hand drawn storyboards because it took far less time than it would have if I had jumped straight into making costly electronic prototypes or coding. The storyboards were able to pitch potential ideas expediently during this discovery phase.
Paper Prototyping
I proceeded to make and test some paper prototypes. These were simple paper cutouts of elements of the app design that were moved around on a mock screen to simulate interactions with the app design. This way I was able to give my ideas a presence that I could put in front of somebody else (stakeholders and clients) to see what parts of the ideas had value. When they wanted to add an extra component or to change something all they had to do was take a paper cutout and draw the updated component on it. This prevents having an elongated cycle of leaving each meeting to make changes, and then scheduling a new meeting to come back and discuss changes only to make more changes.
One of the stakeholders expressed a desire for a way to quickly see if they had time for something in a day at-a-glance. This later grew into the fish tank component of my final design. The water represents time in a day. If you overbook yourself, the fish loses the water it needs to swim. Ironically we often hear the phrase, “I am in over my head.” With the fish tank we want to keep the fish swimming as long as we can in the day without draining every last ounce of water much like counting down the hours in a day. The user can visualize their limitations yet push goals to their fullest achievement. One of the stakeholders even mentioned wanting to account for the time they sleep because they think the variances each week account for much lost time thereby having an impact on the tasks which can be accomplished in any given day. The ring around the tank represents daily task progress. Thus in one simple screen we can see we are not wasting time and we can see we are accomplishing real goals and tasks without having to peruse an entire calendar day.
Heuristic Evaluation
Next, I recruited testers to try out the paper prototype more in-depth. I asked them to think aloud and tell me what was going on in their minds as they tried out the advanced paper prototype. I used Nielsen’s Ten Usability Heuristics to analyze what the testers said and did.
The heuristic evaluations revealed ideas for further work-Overall navigation
and clarifying the design purpose and potential required the most rework for
error prevention — The first reflection for consideration after the team
discussions and the consolidation of the evaluations resulted in a complete
redesign of the prototype screen one since the evaluator’s perceptions of
the app functionality was unclear due to their preconceived notions on time, thereby creating difficulty for the user to navigate the calendar usability and unleash the apps potential to meet the POV objectives. The second major heuristic design barrier included considerations for navigation buttons to account for human error, an inclusion of titles, and a better positioning and sizing for aesthetics. The third major opportunity identified ways to consolidate prospective apps one and two for greater user and stakeholder satisfaction. I spotted several usability issues and fixed them in the next step.
Development Plan
I wrote a development plan which was updated each week.
Getting There…
The project now blended designs to meet two of the design briefs — Glance and Time — The new blend aimed to enable an easy way for users to visualize their day and pin information from notifications to calendar reminders in order to make the information readily accessible. The re-design is for users who want to improve the connection between the artifacts and other people they interact with daily relevant to their schedule, and the scheduling app itself. The user needs were discovered through the needfinding process.
Mockups, Mockups, Mockups
Since the programming required to develop an app would be more advanced and costly, for now I decided to use the interactive prototyping tool Marvel. Marvel allows you to link together screen mockup images to make a static simulation of an actual interactive app. Other prototyping tools were either time or financially prohibitive. Marvel proved a good fit but was limited for many of the features I had planned on implementing, including but not limited to a fully functioning database and keyboard. Overall, it met the scope of the project. I hope to develop and deploy the actual app at some point in the future, but that was not the focus of the UCSD Capstone Project.
I created the individual screens in Microsoft Powerpoint because the assignment recommended using a slide presentation software tool. In the end there were over 68 screens/slides per iteration! It was quite a complex undertaking for this capstone project but I was up for the challenge. However, the high number of screens due to the complexity of the app I undertook prevented me from making global or even minor changes after the ninth week with so many app layers and screens. Marvel, although offering great functionality, created limitations for my project particularly in the end. One limiting area was in altering the white space at the bottom of the prototype. — I realized that there is a white space at the bottom of the prototype due to the aspect ratio when in Marvel. An aspect ratio of 9:16 was the proper ratio I ought to have used. This error was discovered later on in the prototype development and given the short time frame, Marvel application limitations, and the advanced number of screens already developed it would have required a major redo of every screen and prevented the completion of the capstone project on time. Aspect ratio fixes will need correction in the final app development.
Multiple Prototype Versions
I came up with two different versions of the DayQuarium Marvel Prototype.
Link to Prototype: Marvel Prototype A
Link to Alternative Prototype (out of the box) offers an option to pin any incoming notification to the user’s calendar and account for the time spent in their day on such tasks. — This prototype begins with the assumption that an incoming notification has just arrived similar to what happened to the users during the needfinding observations when the user needs to pin it to the calendar for future reference without having to re-key in all the content from the notification: Marvel Prototype B
Description of Online A/B Test
I used UserTesting.com to run the A B test. Two testers tried version A, and two tried version B. This test identified if the Prototype A Users would click the Info button (?) with greater frequency than the Prototype B Users.
The hypothesis was that Prototype B users would click the Info button (?) with less frequency since most users are familiar with the use of a calendar to visualize their day versus in Prototype B where the user arrives at the calendar immediately, and is trained first to adjust their mindset from a calendar to a “New” way of visualizing time before they are arrive at the Day Level Calendar. Once they arrived at the Day Level Calendar the user was expected to adapt to understanding the functionality, creativity, and power of the app similar to how one learns to crawl before one learns how to walk. Or a dyslexic learns to read a word in its proper context after learning to decode the word.
Prototype B users were expected to more intuitively acclimate to the Day Level Calendar with fewer clicks of the Info Button (?). In Prototype B the App offered more of an immersion method to teach the inexperienced user.
The basis for the A/B test design was derived from the input during the in-person user tests explained below:
User Test A Description:
Prototype A began with a Day Level Calendar screen showing Allocated hours to their day versus Available hours remaining — User was not expected to identify with the app’s new way of visualizing time, therefore, the user was expected to click more frequently on the info button (?) to learn how to use the new type of daily calendaring app which gives a user a “true” glimpse of their actual time spent in any given day.
User Test B Description:
While conducting the in-person test with user 1 it became evident she was inexperienced with technology and the use of apps. She preferred simplicity and she was reluctant to use any calendaring or productivity apps. User 2 was also frustrated with the lack of usefulness in calendars offered nowadays because they do not capture what she actually does in any given day and much time gets wasted or is not captured. Both of these became evident as opportunities for further testing of the app with its additional component to where the component trains the user to use a new type of a calendaring system having explicit content in an incoming notification and it adds functionality to the app.
To train the user, Prototype B began with an incoming notification screen which the user pinned to the calendar day and identify immediately with its usefulness to how they would actually spend their time. Once pinned, the user arrived at the Day Level Calendar and could see their Allocated hours to their day versus Available hours remaining.
Prototype B is also an outside the box alternative design suggested through the needfinding interview when the interviewee was frustrated by the lack of any calendaring apps enabling a simple means to pin “To Do” files or relevant information for future access on a particular date that it may be needed.
Prototype B should have yielded fewer clicks on the info button (?) due to its explicit instruction. This proved not the case due to limitations in the A/B test using Marvel and by having such a small testing sample — four testers.
A B Test Results
It was interesting, however, to see that most of the users who got stuck kept trying the same method over and over again — even though they knew it kept failing. I expected most people to try different routes when the previously tried route failed — In all four testers, they rarely tried the info/ help button (?), if at all. One user made 84 total screen clicks and never once clicked to find help yet all her questions would have been answered had she clicked the info/help button particularly in the beginning. The other users also had high frequency of total screen clicks. When the info/help button was finally clicked by other users it was not read, glanced over, or if it was read the response was off task from what the user was suppose to do. I had developed very comprehensive info/help screens as a bonus feature since I was trying to help the users rethink about time.
Since the app offers an brand new way to view time…and a brand new way to interact with user calendars, then we know there will need to be a strong marketing campaign which begins with user education — Think about the first time people had to use a microwave when they were accustomed to the stove. Many demos were done at local grocery stores and department stores just to educate the users. In the case of a new type of calendar promotions will be paramount to the apps success.
As far as the validity of the A/B test, the test was inconclusive. I did not have a large enough sample size (four) to run a valid Chi-squared statistical test, but I would definitely delve further into the data next time with some financial expense and a greater sample size. Again, this was outside of the scope of this capstone project unless such means were available. Regardless, here is the results of my info-button click result:
Screenshots of DayQuarium App Prototype
Video Demo:
https://www.youtube.com/watch?v=LJ2GUut7ZjE
Summary
This UCSD course in Interaction Design Specialization provided an opportunity to learn all the stages of concept to development then finally to evaluate and promote an idea. I was able to design DayQuarium and implement it as an interactive prototype using Marvel, test it out with real users, analyze the results using meaningful tools, and then finally promote the app prototype. I would enjoy further development of DayQuarium into an Android or iOS app that anyone could download and enjoy!