Home Dashboard
A physical & digital ecosystem designed for co-habitation
Overview
Project Description
I created a digital dashboard that’s embedded in my apartment’s entryway mirror so that my wife and I can be sure we’re ready for the day before leaving our home. Additionally, I created a PWA that acts as a shared todo list.
My Role & Responsibilities
As this is a personal project, I was every role, including end user! I identified problems and opportunities as a product manager. I also did user research & testing, experience design, interface design, programming and physical build.
Opportunities
Preparing for the day
Once I leave my apartment in the morning, I rarely return until the evening. So before I leave, I need to make sure I am as prepared as possible for the next 12+ hours. If I’m not prepared, a lot of my day can be ruined.
- It started raining at 2:00pm and I didn’t bring an umbrella
- When I get to the subway for my commute, I see that it’s delayed 20 minutes. I’m going to be late
- I forgot I have a dentist’s appointment and have double-booked myself
- My partner (Danielle) needs pens and there’s a Staple’s right next to my dentist. I could pick them up and save everyone a trip.
How do I quickly get all this information? How do I make sure I get this information before I leave for the day?
Helping with co-habitation
Living with Danielle requires us to be in sync with a lot of things. Since both of us are away from each other most of the day, this can be hard to do
- We need a new broom, so I buy one. Unfortunately, Danielle bought one too
- Danielle didn’t know I had dinner plans tonight, so she got us tickets to the movies
- The mayoral candidate Danielle likes is polling ahead. She should know about this
Process
1. Ideation
The key to delivering on the opportunity was providing a way to get the info I needed without requiring me to find it. All of the info I needed is readily available most places, I just didn’t check those data sources before I left the house. I needed to insert the info directly into my morning routine.
Looking over the morning routine of Danielle & myself, one thing we both always did was look into the mirror right next to the front door. A perfect place to put all the info.
2. Key Information Sources
Based on the experiences of myself and Danielle, we settled on the following necessary information sources needed for the dashboard
- ☁️ Weather
- 🚇 Subway Service
- 📅 Calendar
- ☑️ Shared to-do list
- 📈 Stock information
- 📰 News
All of this information is readily available via APIs from other sources, except for the shared to-do list. I couldn’t find a to-do list product that specifically fit my needs. So, I built one myself!
3. Shared to-do list app
I quickly developed a to-do list progressive web app for me & Danielle to install on our home screens. On this shared list, we can both add, remove and check off to-do list items. It actually uses WordPress as the backend database and user management system. It works really well and has been one of the most successful parts of the project.
4. Interface build out
I ended up building the interface using Vue.js. It worked well for the project and integrating the UI. All the content had to be mostly monochromatic, which presented a unique challenge. I ended up using font-sizing and placement to differentiate the content and set visual priority.
5. Making a “smart mirror”
Making a smart mirror is actually something that many people have done before, so it was actually pretty easy to get all the physical pieces together. The basic concept is that you put a screen behind a two-way mirror. In the UI, only the light parts show. There’s actually apps you install on a tablet that do it all for you. I decided to build my own using a replacement laptop screen and a raspberryPi unit.
The UI is running in Chromium in full screen mode on the raspberrypi’s Linux OS. It’s a very simple solution, especially since I’m a web developer and don’t know how to make anything else!
Outcomes
Successes
The mirror and the to-do list app quickly became an integral part of my daily life. It saved me time and removed a lot the little annoyances that make up daily life. We recently got solid proof of the importance of this product. We moved into new and were without the smart mirror set-up. Our lives were in complete disarray until I re-installed the mirror in our new place. You don’t know how important a product is until you don’t have it anymore!
Challenges
I think the final details of the execution could be better. The layout of the UI isn’t optimal and I can never seem to get the brightness of backlight just right. These are things that can be refined over time. The best part of a smart mirror is that you can change it.
Next Steps
Now that I own my apartment, I get to mess it up as much as I want. Right now, the mirror is powered by a cable running to an outlet. In the future, I plan on creating a port and cutout in the wall, so that all the power and hardware can sit within the wall, making the mirror flush to the wall.
What I learned
- Google Client API vue.js where to find specialty glass