Linked email iconLinkedIn Icon
3D rendering of the Oobi device

Oobi

Helping connections between loved ones shine.

MY ROLE

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.

TIMELINE
10 weeks
TEAMMATES
Jamaal Baki, Yimeng Hou, Kelsey Olivier
Problem Space

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.

Back to top arrow
Meet Oobi

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.

Our Process
Implicit Connection

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.

Competitive Analysis

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.

Various products focusing on our problem space, featuring colorful sticky note that briefly summarize each product's purpose.
Products we reviewed for our competitive analysis, with sticky notes summarizing each product's purpose.
Secondary Research Insights

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:

Insight 1

Ambiguously designed presence displays actually foster more intimate connections.

insight 2

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.

insight 3

Presence displays led to greater levels of connectedness between study participants and their close friends.

Design Pillars

To help guide our ideation, my team and I established the following design pillars to keep in mind:

Pillar 1
Non-verbal Connection

Our design solution should emulate the types of non-verbal interactions that you miss when you are away from loved ones.

pillar 2
Sense of Familiarity

Our design solution should embody an intimate and familiar feel to emphasize feelings of connectedness.

pillar 3
Tangible Interactions

Our design solution should be tactile experience with a nice tangible feel that aids in conveying feelings of connectedness.

pillar 4
Elegant & Unobtrusive

Our design solution should be aesthetically pleasing and should blend into users' home environments.

Target Users

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.

Ideation

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.

10 idea sketches with titles and descriptions. Image also features star and chili pepper stickers from the voting activity where our peers indicated their favorite idea and the ideas they thought were hot. Some ideas also have sticky notes attached where peers left their comments and critique.
The outcome of our second round of down-selection involving our peers, featuring 10 of our concept sketches and descriptions.
Co-Design Session

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.

Screenshot of the virtual co-design session held on Zoom. Screen features a slide that says "What do you think about the Comfort Stone?" and orange sticky notes with feedback from the KidsTeam children.
Virtual co-design session with the KidsTeam, featuring their initial feedback following the Comfort Stone concept video.
Co-Design Insights

The Comfort Stone concept was well received overall; however, the kids indicated a need for the following:

Insight 1
Softer, Rounder Form

The kids expressed dissatisfaction with the crystal-like shape of our prototype.

Insight 2
Color Personalization

Multiple kids had asked if it would be possible to personalize the color communication.

Insight 3
Do Not Disturb Functionality

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.

Branding Workshop

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.

Design dimensions

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.

physical form

Using these design dimensions and our co-design session feedback, we chose to focus on organic, rounded shapes as well as soft, squeezable textures.

product name

We renamed our product to "Oobi", a rounded-looking and sounding name that better fit our new visual direction.

(Left) Moodboard featuring purples, greens, pinks and images that elicit comfort. (Right) Sticky notes of brand values that tie into our design dimensions.
(Left) A portion of our moodboarding session. (Right) Our brand value brainstorm.
Wizard of Oz Prototype Test

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.

Jamaal Baki controls the faux Oobi with test participant who receives a light message.
We conducted WOz testing remotely over Zoom. One teammate would act as if they were communicating with the Oobi, while the "wizard" would control the test participant's device.
Test Insights

By the end of the test, we concluded the following:

Insight 1
Physical Interactions Seemed Arbitrary

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.

Insight 2
Color Personalization

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.

Insight 3
“Off-screen Alternative”

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.

Product Development

Following our prototype test, we began developing the final product.

product features

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.

User scenario brainstorm listed out in sticky notes.
As we began designing our final solution, I listed out the use cases and mapped the feature that would apply to each scenario.
Device Specs & Render

I created a 3D render of what Oobi could look like to help my team envision what the Oobi device would look like. 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.

Physical prototyping process featuring sketched device specs, 3D printed core overlaid on a dryer ball cut in half, and the physical prototype with LED light strips wired to a CPX.
Our physical prototyping process from device specs to the physical form.
mobile app architecture

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.

List of pages and components to be included in the mobile app. User flow map that lays out the information architecture of the mobile app.
I created the information architecture of the Oobi mobile app based off the app feature my team and I decided to include.
wireframes

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.

Lo-fi sketched wireframes of the Oobi onboarding and profile screens (left). Hi-fi black and white wireframes (right).
I sketched out lo-fi wireframes of the onboarding and profile pages before creating the hi-fi wireframes.
Design Solution
Core Features
Below I walk through our design decisions surrounding the Oobi device and app.
GIF of the Oobi prototype flashing a blue light.
physical device

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.

Onboarding

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.

Mobile mockup of the Oobi app onboarding flow
Mobile mockup of the Oobi app device sync flow
device sync

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.

color personalization

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.

Mobile mockup of the Oobi app color personalization flow.
Visual Identity
Below I walk through my decisions surrounding the Oobi visual identity.
Oobi visual system color palette
color palette

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.

Typography

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.

Oobi visual system typographic hierarchy
Oobi logo iterations, one purple and one white
logo

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.

Takeaways
While Oobi is a conceptual product that was designed for a class project, my team and I did receive positive feedback on the final product from various target users, including those who participated in our tests. Working on this project has taught me the importance of letting user input guide our design decisions, which I believe is what led to the success of Oobi's final design.

If my team and I were to continue to build out Oobi, I envision our next steps would be to determine how to implement multiple connections through a single Oobi device. I am also curious on how we might be able to detach Oobi from the mobile app entirely, making it a completely off-screen form of communication. These are all workflows that I would love to brainstorm through if we moved forward with the future state of Oobi.