Project Overview

The Project

This design is part of a larger group study, aimed at exploring how innovative technology can create enchanting every-day experiences by improving emotional connectedness between people. We created a lounging hoodie that had a built voice sending and receiving and sharing hugs through heat.

Alone, I designed the application in 2 days (lo-fi in 1 day and hi-fi in 1 day). Babette Scheepers was the co-researcher for this project.

The Product

My team and I created The Lobit, which is a lounge hoodie with technology to foster connectedness between 2 people. To better understand the functionalities of the product this app aims to configure, please view the full case study.

The Goal

Create an app interface that allows for easy and straightforward configuration of the hoodie if it were to be produced.

Responsibilities

• Conducted a literature review to understand enchantment and social presence in technology
• Designed and created the hoodie with my team (see case study)
• Created user personas
• Create user flow diagrams in Miro
• Create app maps in Miro
• Conducted User research (with Babette Scheepers)
• Create low-mid and high-fidelity prototypes in Figma

The Product & The User

The app needs to…

• Walk users through configuration
• Have steps easy to understand for all users
• Have an intuitive interface

User Personas

This is one of the user personas we used to create the hoodie. I adapted this persona to represent the user once they’ve purchased the hoodie, and the specific characteristics relevant to configuration.

John (27, M)

John is a dedicated PhD student who thrives in collaborative study environments and enjoys leveraging technology in his daily life. He is in a long-distance relationship with his partner, who is also pursuing a PhD. While he has no experience with wearable technology, he possesses strong technical skills and is quick to learn. John ordered the Lobit online to his partner’s home and his own. He bought this in hopes that they would connect more off their phones.

Goals:

1. Have deeper communication with partner on a regular basis
2. Be able to study with his partner
3. Feel the presence of his partner
4. Reduce Screen-time

Challenges:

1. Forgets to check phone for contact when busy
2. Sometimes gets distracted during video calls
3. Balancing long distance communication while being on top of responsibilities

Needs:

1. Simple set-up that allows him and his partner to use the product right away
2. Set-up that allows his partner to connect with his hoodie
3. Be notified to wear the hoodie when his partner’s hoodie is on

Problem Statement

I need assistance setting up the hoodie to connect with my partner's hoodie so that we can connect and communicate with each other immediately.

User Journey Map

• Opens package
• Finds hoodie, manual, setup guide | - Excitement about trying out new technology
• Potential difficulty knowing to download which app | | Messaging His Partner | - Sends message asking if partner received hoodie
• Expresses excitement about trying the technology together | - Confirmation of partner's readiness to set up the hoodie
• Shared anticipation for using the hoodie together | | Setting Up His Hoodie | - Reads setup guide
• Downloads Lobit app
• Turns on hoodie
• Puts on hoodie
• Follows app instructions for pairing | - Progress through setup steps
• Encounter difficulties
• Potential need for assistance or troubleshooting
• Completion of pairing process, ready for testing | | Ensuring His Partner is Doing the Same | - Communicates with partner about setup progress
• Offers assistance if needed | - Missing confirmation of partner's progress
• Mutual support and troubleshooting
• Shared experience of overcoming challenges | | Completing Setup and Testing | - Sends signal to partner's hoodie - Verifies signal reception
• Confirms successful connection | - Testing functionality
• Verification of successful pairing
• Satisfaction with setup process | | Using the Hoodie | - Regularly wears Lobit hoodie - Enjoys enhanced communication features
• Utilizes notifications for partner's presence | - Improved communication and connection
• Reduced screen time
• Potential confusion of the successful communication between hoodies
• Integration of technology into daily life |

Information Architecture

User Flow

Simplified user flow once both users have downloaded the app.

The App Map

Simplified app structure to accommodate for the likely method of configuration of the hoodie.

The Design

Design Considerations

The design considerations for this project prioritized a minimalist and modern aesthetic to enhance the simplicity of configuration. It was crucial for the design to align with WCAG guidelines, ensuring accessibility for a diverse target audience with varying ages and digital literacy levels.

As the goals of this project was to minimize phone usage, the app was designed to have minimal functionalities.

Digital Wireframes

Lo-Fidelity Prototype

Usability Studies

My teammate and I conducted a proctored usability study using the low-fidelity prototype of both the app and the hoodie. In regards to the app, we wanted to find out:

• Are users successfully able to configure their own hoodies?
• Are users successfully able to see configure the hoodie of a partner?
• How do users experience the Intuitiveness as the app?

We found that users are….

• Able to configure the hoodies intuitively with no guidance
• Thought that the functionalities were enough

“Its clear what we need to do - its very easy to set up!”

Improvement Opportunities

Through user feedback, I found that users want:

<aside> <img src="/icons/phone_lightgray.svg" alt="/icons/phone_lightgray.svg" width="40px" /> To make it clear that you can only have one partner instead of multiple connections

</aside>

<aside> <img src="/icons/phone_lightgray.svg" alt="/icons/phone_lightgray.svg" width="40px" /> Able to better see if the partner is wearing the hoodie

</aside>

<aside> <img src="/icons/phone_lightgray.svg" alt="/icons/phone_lightgray.svg" width="40px" /> Notifications that their partner is wearing the hoodie

</aside>

High-Fidelity Wire-frames

Since the digital wire-frames, I made changes to better reflect the requirements of the user flow as defined by our project. Unfortunetly, this app had to be finished before the hoodie was complete. Thus, images were supplemented with iconography. Overall, I improved the lo-fi prototype through:

• Implementation of relevant iconography
• Updated use of colour for higher contrast and simplicity
• Improved clarity of instructions by implementing brevity (i.e., “Add connection →Connect”)
• Aided instructions with icons