Overview
⚠️ Problem
How can we help couples in long-distance relationships stay connected with their loved ones in a nonverbal way?
When two people have to “go long-distance” and create a gap between themselves, their relationship inherently changes. A new dynamic is created: they interact differently while apart, as opposed to when they are together (Sahlstein, 2004, 689–710). There are different ways couples in LDRs interact, new financial challenges, timezone differences, and changes in the quality of life for both. For this project, we are searching for a nonverbal way to connect couples over the day without actively engaging in ordinary text, phone, or video communication.
💡 Solution
Our final solution for the above-mentioned problem is an interactive water bottle lid paired with a companion app. The system - called YonderBottle - helps couples to stay healthy by sending personalized drink reminders to their partners. The lid allows users to remind their partners and see their reminders in different colors. With the companion app, one can also send an emotional status update to the partner and remind them of important dates.
Note: The lid can be seen in the video, and the app be tested in our interactive prototype.
📌 Figma Prototype
Click here to access Figma prototype
👨🏼💻 Personal Contribution
Organization
- Managed tools (Trello (Kanban), Miro (brainstorming, data organization, Google Workspace)
- Scheduled time, planning, and team meetings
Research
- Designed and put together Personas and Empathy maps
- Conducted user interviews
- Evaluated initial survey data
- Recruited participants for the survey and interview
Prototyping
- Created 3D models and designs in Fusion360 and Substance Stager
- 3D printed different versions to iterate on ergonomics
- Sketched out visuals (brainstorming and storyboards)
Testing & Improving
- Conducted user interviews
- Evaluated notes from heuristic evaluation
- Enhanced the Figma prototype
- Created onboarding tutorial to better guide the user
Video
- Wrote script and overall structure
- Filmed in-person parts
- Cut and assembled video
📼 Video presentation
Detailed information
🖌️ Design Process
The underlying design process of our work can be seen in the following graphic. Each project segment is listed as a chapter on this page. For fast access, use the side navigation on the left.
🧭 Exploration
Gantt chart
To visualize our tasks, we created a "Gantt chart," which gives us an overview of where we are and what is next. The chart automatically updates if we make changes to due dates, so we can still be flexible in our planning.
Kanban board/Trello
Not every tiny task is listed in the Gantt chart; sometimes, small todos come up and must be handled within a few others. We use a "Trello" kanban board to keep the Gantt chart clear. "Kanban" is Japanese for the card and explains why every task is put on a (virtual) card. The cards can then be moved around into different columns. We use "BACKLOG," "TODO," "DOING," "WAITING," and "DONE" every card is created in the backlog and is then pulled into each column depending on the actual state of the card.
Existing Solutions
Loopfamily frame
The "Loopfamily" smart photo frame can be accessed from anywhere in the world with an app. The user can then upload photos from their phone onto the frame, and it shows them immediately. For a long-distance relationship, this can enhance contact by updating the pictures of their thoughts.
Bond Touch
A connected bracelet is another gadget couples can use to stay connected while physically apart. The "bond touch" bracelet can connect to another one via the internet. Every time one touches their bracelet, the signal is sent to the other as haptic feedback and a color stripe.
Apple SharePlay
An example of a shared activity couples in LDRs can do is watch movies or shows together. With the introduction of SharePlay for Facetime, one can start a video in a SharePlay-compatible streaming service like Disney+, and the other person can join at the exact same second. The video is synchronized, and both can talk during the time watching. When one person stops the video, it is stopped for the other one as well.
Max 2 and Nora
Another aspect of being physically apart from each other is the missing sexual activity. Besides sexting via common chat platforms such as WhatsApp, Signal, or iMessage; or telephone sex technology can help enhance that part of an LDR as well. In this example, the company "Lovense" created "Max 2" and "Nora" (see Figure 7) as sex toys that can be controlled not even with a remote control but also via an internet connection and the feedback of the partner's toy.
🔍 Discovery
Target users
The target users are young couples currently engaged in a long-distance relationship who frequent need to keep in touch with their loved ones and are looking for new ways to do so. Research shows people feel that their emotional well-being while in an LDR can be improved and that current solutions on the market can’t do so. We are also interested in how our design could potentially benefit people with disabilities - such as those with speech/hearing impairments - whose access to modern-day technologies is limited. We will keep the accessibility aspect in mind as we explore design options.
Motivation for the problem space
Emotional connection is a major component of maintaining long distance relationships. Current technologies provide channels of instant sharing in real time, such as texting and phone call/audio calling. However, as we collected survey results and conducted interviews, a common theme emerged that LDR couples enjoy activities together in addition to texting or calling when they’re apart.
“I want to play games/activities with my partner, versus talking on the phone exclusively.” - Survey Respondent 26
Another area that LDR couples brought up in their responses is that there's a lack of methods that help them adequately sync their emotional state.
“[My partner’s] emotions don't really come through on texts/snapchats.” - Interviewee 1
Competitive analysis
Facebook Messenger
Facebook Messenger is an instant messaging app that allows users to send text messages and voice messages. It also allows users to have voice calls and video calls. Users are able to customize a wide range of features on the app, including setting the background image of their chat window, choosing a color scheme for all the texts, and editing nicknames for anyone in the chat.
Tietie
Tietie is an app that allows users to share photos, videos, and emojis to another user’s mobile home screen. Users can customize shared content, such as photos and videos, through in-app editing tools, and they can decide when the content will appear on the receiver’s home screen.
Teleparty
Teleparty is a web-based service that enables users to watch the same content together through streaming services such as Netflix, Disney+, YouTube, and HBO. Services like Teleparty enable concurrent live streaming and watch parties on different devices, which can help couples in LDRs connect.
Yuque
Yuque is a web-based collaborative document-sharing and knowledge management tool, primarily for the Chinese market. One of the participants we interviewed uses it primarily as a shared journal between her and her partner.
Survey
We first surveyed 27 participants to understand how people "managed" their long-distance relationships. We asked questions about what tools couples used, how often they connected via texts/audio calls/video calls with their partners, how much they felt like their partner was a part of their life and a few short-form questions about how they might improve it.
Interview
Our semi-structured interviews aimed to gather more qualitative data and dive deeper into some reasons and behaviors within long-distance relationships. We chose a diverse group representing different ages, genders, and ethnicities. We conducted all of these interviews over Microsoft Teams and Zoom, which gave our participants and us the most flexibility. This also allowed us to record our sessions for later reference.
🎯 Definition
How can we help couples in long-distance relationships stay connected with their loved ones in a nonverbal way?
Our affinity map - shown below - helped us identify 5 major pain points couples face in long-distance relationships.
1. Partner's physical presence is lacking
2. Couples want to feel connected but not necessarily talk
3. Hard to understand the partner's range of emotions
4. Challeging to know if partner is physically well and safe
5. Technical and Financial barriers (cannot be addressed in this project)
Personas
We met in a digital workshop using Zoom and Miro to create our personas. We developed the information for the personas based on actions, motivations, and pains as well as their values and their context. The Miro template we used supported us by asking questions we could quickly answer in the group workshop. Additionally, we came up with a name and a concise description to further define each persona.
The last step of our persona development process is the creation of a characteristics sheet which includes all information about each persona and gives us a good overview for further designs.
Empathy Maps
We put together empathy maps for each user to describe how our personas act, think and feel. This way, we understand how our users behave in certain situations, which can influence our future design solutions. Based on the sketches from Nielsen Norman Group, we created our own Miro template for empathy maps that we could fill together after our persona workshop.
💡 Ideation
After defining our problem space, each of us came up with a minimum of one idea, which we then presented to ourselves. Our ten ideas can be seen in the following graphic and will not be discussed in detail.
After every team member presented their sketches, we realized that a few of the ideas can be combined into one design. For instance, R-hub and the physical version of photo widget, where the photo uploaded to the center of R-hub’s home page can be displayed on the physical photo widget. We collectively decided to go forward with R-Hub as the first idea since it has the potential to combine many features into one app. For the second idea, we wanted to choose a physical product as it seemed like from the research we did, our users didn’t mention any physical product they used to stay in touch with their partners aside from their phones and computers. So we wanted to see whether we could tap into the space and create new interactive experiences. The team held a voting session to narrow the six physical product ideas down to one.
Final ideas to evaluate
R-Hub
YonderBottle
Accessibility considerations
R-Hub
- For people with visual impairments, the font size should be big enough to read
- The colors should be AA conform to have a high contrast
- All main buttons should be in the central thumb region, so the user does not have to stretch their thumb/fingers, and buttons are reachable
- Screen reader should be able to read the content of the app
- For people who are not comfortable with or don’t use fitness apps, the design should work just as well for them without these functionalities
YonderBottle
- The bottle is not easy to grab and can slip out of their hands
- The cost of the smart bottle may exclude users who are at lower socioeconomic levels
- People who are unfamiliar with smart devices may have a difficult time using the water bottle and its companion app
- Screen reader should be able to read the content of the app (e.g., alt text for each button and image)
- Buttons should be easy to reach, even for small hands and fingers
🔨 Prototype
Paper prototypes
Before we created the final prototype of our solution, we tested our polished ideas with a small user group (3 participants) with paper prototypes to do a quick concept validation. One of the biggest changes from the initial ideas was that we did not build a water bottle but rather a lid that fits different bottles a user already has. For testing, we created a foldable paper wireframe for the app and a cardboard lid in which we could put different images that are shown on the built-in screen.
Closed card sort
We utilized a card sort to understand where our features belonged. We did this through Miro with our interviewees and Google Forms with other respondents. The interviewees had a board in front of them where they could move the sticky notes (features) to the categories they saw fit. In the Google Form, the users could checkmark which categories they think the feature belongs to.
First findings
We could summarize our gathered data into 14 different findings from the first user tests. To keep this project overview short, I will only include our last findings in the final section. Findings in this section contained, for example:
- Users want to send and receive hydration reminders in an easy, unobtrusive way
- Users would like an easy way to turn off notifications on the bottle without using the app
- Users want clear instructions on how to send reminders from the bottle
From the card sort, we gathered information on which features we should include where. One example shows the question of where to present the partner’s hydration status.
Final prototype
The lid of our YonderBottle prototype is a physical lid that can be put on a typical water bottle. For our final prototype, we created a specific 3D-printed lid that fits one of our personal water bottles to represent the actual product. We redesigned it to be more ergonomic and feel better in a person's hands.
Physical prototype and branding - YonderBottle Lid
- Send reminder button
- Do not disturb button
- Dynamic ring light (show notifications in different colors)
Digital prototype - YonderBottle App
- The onboarding process guides the user through the different options and connects the lid to the app
- Hydration status and reminders can be seen from the main screen and sent with different colors or scheduled
- Emotional status updates can be sent and received in their own tab
- Important dates can be seen, added, and edited in the last tab of the app
The app follows our design guidelines and is interactive on the Figma Mirror iOS app, so the user gets the closest feeling to an actual application. (The prototype can be accessed here)
🧪 User Testing
To test our prototype, we divided our testing sections into three main areas:
- Semi-structured interview
- Task-based testing
- Survey
In addition to the methods mentioned above, we also did a Heuristic evaluation. More information can be found further down below.
User-based testing
Participants
To recruit participants for our testing sessions, we reached out to a few students in our MS-HCI program and personal connections. The screening criteria is that they are young adults currently in a long-distance relationship with a romantic partner. Overall, we conducted six testing sessions, and 3 of the participants have taken part in previous user testing with us for this project.
Procedure
The structure of the testing session was as follows:
- Semi-structured interview questions - lid
- Semi-structured interview questions - onboarding tutorial
- Task scenarios - lid
- Task scenarios - app
- Semi-structured interview questions - app and lid
- Post-task survey
We conducted the testing session in-person at the TechSquare Research Building at Georgia Tech. We began each session by briefly describing our project goal and solution. Then we explained the evaluation process and the various tasks during the session. We conducted the sessions by having participants interact with the YonderBottle lid and YonderBottle app prototype on the phone with Figma. After each section, we asked participants follow-up questions to gauge their thoughts about a particular feature or task scenario.
Semi-structured interview
Our evaluation goals for conducting the interview were:
- Determine the usability of the YonderBottle lid
- Identify any accessibility issues with the lid’s design
- Evaluate the effectiveness of the onboarding tutorial
- Assess the enjoyableness of the overall system
- Identify areas that need more clarity or explanation
- Gather feedback on features and suggestions for design improvement
We discussed every question we wanted to ask due to the limited time of each session. To agree on why we are asking a question, we came up with a rationale for each one. Examples can be seen below.
Task-based testing
Our evaluation goals for this method were:
- Determine the effectiveness of the task flow and the ease of use of the user interface
- Identify any usability issues or areas of confusion
- Gather feedback on the intuitiveness of the design
- Qualitatively measure the time it takes to complete a task
- Assess the user’s level of comfort when performing a task
- Identify areas that need more clarity or explanation
Analogous to the interview, we discussed each task with our team and agreed on one rationale, as seen in the example tasks below.
Survey
The evaluation goals of the survey were:
- User’s overall satisfaction level with the product’s features and design
- Impression on usability and ease of use
- Impression on the discoverability of product features
- Value of product to the user
In addition to the rationale for each question, we also agreed on the survey options we want to give the user. It is essential to align those options across the survey to ensure the user understands and is clear during the survey. A few example questions can be seen below;
Heuristic Evaluation
Besides the general user-based testing, we executed a Heuristic Evaluation to dive deeper into the usability issues of our YonderBottle system. Furthermore, each issue's rating would allow us to prioritize them for future enhancements.
Participants
We recruited three MS-HCI students to be our experts in our evaluation. One of them had previous experience working with us, but we gave all of our experts the necessary context.
Procedure
To conduct our evaluation, we sat our participants with an iPad, our app prototype, and our physical lid prototype. On the iPad, we displayed a slide showing our expert Nielson's usability heuristics and a scale on which our experts could rate each issue in terms of severity. After setting them up, we gave a brief overview of the context. From here, we opened it up and let the expert explore the app and lid to call out usability challenges they have faced. When they brought up an issue, we wrote it down on a PowerPoint slide, wrote notes as they explained the problem, then logged which heuristic they were referring to and how severe it was.
🏁 Suggestions
After conducting the user-based testing and the heuristic evaluation, we analyzed the data. We gathered not only issues that need to be addressed in future iterations but also findings that users liked our system and should remain unchanged. For each of the issues, we came up with design recommendations.
Positive findings (examples)
- Information is well laid out on the home page
- Users enjoy the ability to customize the color of drink reminders
- The onboarding process is very informative and clear
Issues (examples)
- The lid dimensions are too large for smaller hands and bottles
- Adjust the height and width of the physical lid to be smaller and more compact so it fits in users’ hands better. Or offer different sizes of the lid
- Lid buttons have low affordance and cannot be differentiated without looking
- Make the Do Not Disturb button smaller and create a raised texture on the buttons so that users can easily distinguish it from Send Reminder. This also addresses visually impaired people better
- The surprise photo is poorly explained and missing a confirmation
- Create a tutorial for surprise photo mechanics in the app when users interact with the system for the first time. The tutorial should also be accessed in the “Help” section of the app if they need to walk through it again. In addition, add a confirmation button to not accidentally choose a surprise photo.
Further Design examples
