Project Links
Project DocumentationSource Code and Demo
Source Code hosted on GitHubDemonstration of UI
Live Application
Description of Project
The Pillow Project was a UI design initiative where our team aimed to transform an everyday object into a smart device and create an intuitive user interface for it. After several rounds of discussions, we decided on a pillow as our focus. Our goal was to integrate smart technology seamlessly into the pillow, enhancing user comfort and functionality.
For this project, we conducted research by interviewing several individuals to understand their needs and preferences regarding pillows. Our goal was to gather insights on what features and qualities are most important to them, ensuring our smart pillow design truly aligns with user desires.
Our team analyzed the affordance of a pillow, highlighting its primary purpose as a support for resting, whether for lying down or propping up the body to enhance comfort. Pillows are designed to be soft to the touch, with varying degrees of firmness to cater to different user preferences.
Interviews and Feedback
Based on these interviews, we identified some common trends and use cases. Many users rely on sound to aid their sleep, and value the comfort, firmness, and coolness of their pillow. Additionally, there is interest in tracking various aspects of sleep. These insights will guide our development, ensuring our smart pillow meets the key needs and preferences of our users.
Based on the interview results and our group members' personal preferences, we identified several key features we wanted to implement: alarms, white noise, temperature control, pillow firmness, and health tracking. From these initial ideas, we expanded and categorized them into several key areas: Sleep/Health, Alarm, Comfort, Personalization, and Settings. With these categories in mind, we set out to develop some initial design drafts.
Interface in Detail
INFO TO COME
Implementation
For this project, we utilized a Svelte framework as our foundation, integrating various libraries to enhance functionality and user experience. Among these libraries, we prominently featured Lucide for its extensive collection of customizable icons, ensuring our design remained both visually appealing and user-friendly.
AI Usage
Microsoft Copilot was utilized for the development of the personalization functionality for the backend/JavaScript work. Specifically, the AI was used to help address bugs/issues with setting the audio and ensuring that the audio played and stopped as expected and to address bugs/issues with uploading customized color values to the dropdown and having it reflect on the pillow. AI was also used to assist in developing some more complicated aspects of the comfort page. AI was also employed to check for punctuation and spelling mistakes in both the documentation and the project itself. In certain instances, Microsoft Copilot, ChatGPT, or a combination of both were utilized to add comments to the code.
Future Work
Looking ahead, if we had more time to develop this project further, we would aim to incorporate a 3D model with an integrated screen into the pillow. This would allow users to inspect the pillow in a 360-degree simulation, enhancing the interactive experience and providing a more comprehensive view of the smart pillow's features and functionalities. Another thing that would be implemented if we had more time would be to enhance the alarm setting system to closely resemble the design and functionality of Apple's interface.
In addition, with more time, there would have been a modification to the existing audio selection functionality in the personalization section to store all the audio in local storage or a backend database and be able to select between the preset and uploaded audio so that users do not have to reupload the audio every time. Additionally, the preset audio would be renamed, and the custom audio would be able to display their respective names in the dropdown on upload.
Given more time, we would address a set of known issues with the code, some of which can be observed using developer tools in search engines. Additionally, we would fully implement certain code segments that exist but were never polished enough to be usable in the final version, such as the blur effect when inside a menu.