Victoria McKenzie
I hope you're having a lovely day!
DOORBELL
TIMELINE
10 days
ROLE
Lead UX Design, Presenter
AWARDS
Runner-up VicHack Mobile Hackathon
PROJECT TYPE
Personal Project - Hackathon
Overview
THE PROBLEM
Living apart from family makes it difficult to stay connected. It is hard to remember who you told what, and sending the same photos to numerous different group chats or shared albums gets repetitive.
OUR SOLUTION
A centralised, digital neighbourhood, where you can add everyone in your life who lives apart from you, then share photos, or text updates in real time. We named the app after our 'DoorBell' feature - a button you can press to remind a certain household to post if you haven't heard from them yet.
The Brief
This was a personal project completed for VicHack's mobile hackathon. The brief was to create a mobile app that connects people. As a UX student, this spoke to me deeply. Doorbell was a pre-existing idea that I decided to bring to life in response to this prompt.
Understanding our Problem Space
I had discussed this app idea previously in passing with my own family, but before we jumped into development I used convenience sampling to interview my friends, and some of their family members about what apps they used the most to connect with family. Using this data, and desk research on the competitive landscape, I identified the following apps as the current next-best solutions to our problem.
Most families use WhatsApp or iMessage groups to stay in touch. Good for both text and photos, however it's rare to have all family members, from both sides, in one chat. Becomes chaotic quickly with many people.
Shared Photo Albums
Shared Photo Albums/Google Photos are great for pictures, however lack interaction and follow up conversation. They miss the ability to provide feedback or engage in dialogue.
Instagram is good for younger family members to connect, however is difficult for less tech-savvy family members to use. It is also very public (even on a private acc), discouraging family use.
Ideation
Once we knew our 'What' to solve, we shifted to find 'How' best to solve it. We only had a week to complete the entire design, development and deployment processes, so time was of the essence. Scrappy moodboards, iterations of paper sketches and rough digital wireframes helped to quickly burn through potential solutions and land on an effective, and realistic, end goal for the upcoming week.
Click here to view our brainstorming on Figma
Below are some examples of our rough digital ideation, before we landed on our final designs.
Final Designs
Because of the short timeframe, designs were limited to 1-2 days so we could begin development. This meant that the final high-fidelity wireframes were static designs, and were not linked as a prototype. Though prototyping would have helped test the user experience, limited time meant it was more important that the static designs were perfect, to then replicate in our code.
USABILITY HEURISTICS
The final step before starting development was to check these designs fulfiled their intended usability heuristics. These are the two heuristics I determined most important for this design.
Aesthetic and Minimalist Design
DoorBell was created deliberately simple, with the lease amount of visual noise possible. This increases ease of use, and increases accessibility for less tech-savvy family members.
Recognition, not recall
The designs of DoorBell are intended to clearly show the right next step, with labelled CTAs and explanation text. User don't have to go digging - it's all right there.
CUSTOM ASSETS
An additional part of my role was to create the visuals and branding for the DoorBell app. I took inspiration from online, including various 2D digital neighbourhoods such as Club Penguin and Animal Crossing, as well as simple graphics like in Notion, Apple or Airbnb Products. I created graphics for the onboarding flow, as well as the main screen, user icons and doorbell functionality.
Implementation
OUR TECH STACK
This hackathon prescribed a specific tech stack we needed to use - which stretched both my teammate and I as we hadn't worked with Flutter, Google's UI SDK before. However, we learnt heaps and it definitely opened my mind to different ways of approaching front-end development.
Flutter
Flutter is Google's open-source UI SDK, that uses programming language Dart. DoorBell was coded entirely using this kit.
Firebase
Firebase is Google's back-end software with integrated authentication capabilities, as well as real-time data retrieval.
GitHub
GitHub was used for collaboration between us two developers, as well as version management.
TECHNICAL WALKTHROUGH
Below is a technical walkthrough of the full functionality we managed to code within the week, presented by my project partner and lead software engineer.
Reflections
AWARDS
We were fortunate enough to be awarded Runner Up in the VicHack Mobile Hackathon, winning a cash prize. Our DevPost submission can be found in the link below.
MY LEARNINGS
This hackathon stretched my existing capabilities beyond the standard UX process. It was a great opportunity to see how UX fits into the development process, and how to prioritise the user experience while working with tight deadlines. Learning Flutter was a new challenge that I really enjoyed, and working as only a pair of two to create a winning submission has made me extremely proud.
