Helping connections between loved ones shine.
I took on the responsibilities of establishing Oobi's visual system and branding, as well as leading the UX and UI design of Oobi's accompanying mobile app.
How might we design a unique interactive experience that combines the digital and the physical to recreate feelings of implicit connection between remote loved ones?
Due to the Covid-19 pandemic, social connection was forced to go virtual as Zoom parties and livestreams became the new norm. What these virtual platforms could not recreate, however, was implicit forms of connection that we often take for granted. My team and I were interested in designing for these implicit and ambiguous forms of connection.
This project was designed for the Prototyping Studio course at University of Washington.
Oobi a hand-held squeeze ball that facilitates a 1:1 connection between close family members & loved ones via ambient light communication and haptic vibration.
Feel free to watch my team's prototype video below to get a better understanding of how our product works.
I designed Oobi's default, passive mode to be translucent white in color based on user preferences for unobtrusive ambient display objects shown through my secondary research. Thinking about the scenarios where users are not actively using Oobi but instead may have it sitting passively on their desk or night stand, I wanted to ensure the Oobi device remained low-key yet elegant when not in use.
I also designed the Oobi device to be rounded and small enough to fit in the size of one's hand for ease-of-use when users are actively interacting with it.
I also designed a simple mobile app to help facilitate the Oobi device set up and personalization, as shown in our prototype video. The app, however, is intended to be set aside after set-up is complete, as it is not a main part of Oobi’s product experience. This was a decision I made based off test feedback where participants said they did not want their Oobi to feel tethered to a digital interface.
For the Onboarding flow, I chose to keep it as possible, focusing only on the necessary actions users would have to take to activate their Oobi device. I also included a "Skip" button to enable users to skip steps wherever possible.
To sync two Oobi devices, users would need to enter the other user's Oobi product code in the app to initiate product pairing. For the purposes of our MVP, my team and I were focused primarily on nailing the experience for 1:1 connections before considering multiple connections.
I had initially considered using Bluetooth to sync Oobis, but decided against that to take into account inconsistent user purchasing logistics.
I chose to limit the amount of customizable features to only color to, again, focus on fostering intimate connection through ambiguity. I had initially planned to allow users to set emojis and text statuses to their color choices in app, but felt that was too explicit and decided to strip down the design to just color to allow more flexibility in what each interaction means for two people.
Implicit forms social connection are those shared moments that are often unspoken and not so obvious. Moments such as watching a movie with a significant other, or moments where you and a family member are quietly having your morning coffee at the dining table. My team and I defined implicit connection as those small moments where you are simply enjoying another’s company without feeling the need to speak.
We began our design process with a competitive analysis of 25 products that focused on the type of implicit connection we were designing for. We chose to conduct a competitive analysis to identify what already exists on the market, and where there may be opportunity gaps.
While these products sought out to meet the same objectives we were seeking to design for, they were still too complicated, too obtrusive or too simple in terms of their functionality. We were inspired to design a solution that fostered a sense of implicit connection through a "balanced" experience and feel— whatever that meant at the time.
In addition to competitive analysis, I also led the secondary research on the role of physical objects in fostering connectedness. I conducted 5 literature reviews of design research and gathered the following insights:
Ambiguously designed presence displays actually foster more intimate connections.
Participants in a study around connection through presence displays really valued having awareness of their friends’ online presence and that was enough to foster connection, even without rich media or if they did not feel like interacting with others.
Presence displays led to greater levels of connectedness between study participants and their close friends.
To help guide our ideation, my team and I established the following design pillars to keep in mind:
Our design solution should emulate the types of non-verbal interactions that you miss when you are away from loved ones.
Our design solution should embody an intimate and familiar feel to emphasize feelings of connectedness.
Our design solution should be tactile experience with a nice tangible feel that aids in conveying feelings of connectedness.
Our design solution should be aesthetically pleasing and should blend into users' home environments.
In addition to our design pillars, we determined our target users to be loved ones ages 15+ who are physically separated from one another. We chose to focus on loved ones since intimate and implicit moments of connection are more common and meaningful in close relationships rather than acquaintances and other more casual relationships.
We chose the age of 15+ as we envisioned a technology component in our final design solution, and users younger than that age may not have the access to technology needed for a meaningful experience with our final prototype.
With our design dimensions at front of mind, my team and I brainstormed 20 ideas using round robin, and down-selected to 10 ideas using affinity clustering and dot voting. We then involved our classmates in a second round of down-selection and voting where our peers could select two hot ideas and one favorite so that we could gauge concept appeal.
Our aim was to select a concept we could rapidly prototype and test with users. We ultimately selected an initial idea called the "Comfort Stone", a handheld object that communicated through ambient light. We felt the concept met most of our initial design dimensions, seemed feasible and viable to build out.
To test the Comfort Stone prototype, One of my teammates and I ran a co-design session with the UW KidsTeam, a team of 7-11-year-old students who help with design research projects facilitated by the university.
While the KidsTeam children do not fit our target user criteria, my teammates and I determined that if we could get children— who typically have shorter attention spans than adults— to feel excited about our prototype concept, then we could also get older users who do fit our target user criteria to feel excited about it too.
We presented a concept video of the Comfort Stone to a group of 7 children with the objective of observing their immediate reactions to the concept, potentially validating our concept and co-creating new ideas. We also had the kids sketch out the scenarios they would ideally use the Comfort Stone to get a better understanding of the use cases for our prototype.
The Comfort Stone concept was well received overall; however, the kids indicated a need for the following:
The kids expressed dissatisfaction with the crystal-like shape of our prototype.
Multiple kids had asked if it would be possible to personalize the color communication.
Some kids had mentioned that they would not want to disturb family members living in different time zones with their light messages, and requested a DND capability.
Taking that feedback back to the team, I led a moodboarding and branding workshop to determine the design direction our product should head towards as we worked on the next iteration of our prototype. I felt it was important to nail our product's brand at this point in the process because I knew branding would be essential to the overall product experience. If my team was seeking to create an intimate, familiar and elegant experience for our users, strong branding would be essential for communicating our product promise to our users.
After creating and exploring 8 different moodboards, we established the following pillars for our product's brand, which also complemented our guiding design dimensions: Calming, Togetherness, Comforting and Minimal.
Using these design dimensions and our co-design session feedback, we chose to focus on organic, rounded shapes as well as soft, squeezable textures.
We renamed our product to "Oobi", a rounded-looking and sounding name that better fit our new visual direction.
As we worked to design the next iteration of our prototype, my team and I began considering what interactions to include in the Oobi. To do so, my team and I conducted a Wizard of Oz prototype test with remote family members with the objective of determining how users would ideally use the Oobi to communicate. Participants included a middle-aged mother of two, and two brothers in their older teens— users who met our target user criteria.
We gave each participant the option of shaking or squeezing their Oobi prototype, and had them interact with the prototype to express a series of emotions. Due to time and resource constraints, we used a light up toy orb we purchased online that enabled us to control light colors via a remote.
We intentionally kept the actions limited and vague so that we could observe the natural way users would tend to interact with the prototype. As users interacted with the Oobi, we would display random colors of ambient light as feedback, keeping it random to gauge the importance of color in communication and feelings of connection.
By the end of the test, we concluded the following:
The intensity and frequency of shakes and squeezes varied among users and seemed arbitrary to users as it often depended upon the intensity of their own emotions, which depends on the individual themselves. This indicated to me that it was okay for my team and I to determine a default set of interactions in our final prototype.
In terms of color, users expressed a desire to customize the colors to their own meanings. Color customization would be a necessary feature to include in our prototype.
Users enjoyed the simple design of Oobi, viewing it as an "off-screen alternative to texting and FaceTime". This indicated to me that the physical prototype would need to feel detached from any digital interface we design.
Following our prototype test, we began developing the final product.
Based on insights generated from our co-design and test sessions, I created a list of user scenarios and key features to include in our MVP. This would be used to align the team on what functionality to include in our prototype and guide us as we began development.
Due to time and resource constraints, we decided on using a dryer ball for the device’s outer shell. Ideally, we would have used a soft silicone for the outer shell.
For the center piece, we decided on using LED strip lights and a 3D printed translucent core that would hold diffuse the light communication. We sketched the following device specs to ensure we had the right dimensions for our prototype.
My teammates Kelsey Olivier and Yimeng Hou were responsible for putting together the physical device and developing the code on Adafruit MakeCode.
I created the information architecture for Oobi’s mobile app to layout the framework and structure for our wireframes. I focused on three key flows: onboarding, device sync and color personalization.
Once my team and I agreed on the IA, I led the design of the lo-fi and hi-fi wireframes to capture the features and flows mentioned above. Wireframing helped us to further determine how minimal the app’s role would be in the Oobi experience as a whole.
Through the logo, I aimed to visually emulate the round and soft form of Oobi. I used the typeface CoconPro for the logo's body as it features thick and bubbly strokes. I also added an arched stroke above the two "O's" in "Oobi" to represent the connection between two Oobi devices.
In terms of the visual system design, I kept in mind our brand principles and chose purple as our dominant color with pink as the Oobi accent shade. The purple has a cooler value, and comes across as calming while still engaging with its vibrance. Pink, on the other hand, is often associated with feelings of love and connectedness.
Given that the Oobi device is rounded and soft, I wanted to emulate that visually through typography while maintaining a clean and minimal look. I selected the typeface Noto Sans as our primary typeface since it features clean yet rounded strokes, and is very legible so that users of all ages can read it clearly.