Doorbell app
Mobile app / UX Design
Student Project for General Assembly
Executive Summary
​
For my first user experience class project at General Assembly, I was tasked with a solo project to design a rapid prototype of a Mobile App, helping to solve a problem proposed by one of the other students.
The time frame for this project was one week for phase 1, in which I focused on the discovery phase through to paper prototype. A few weeks later, I revisited the project as part of phase 2. This consisted of working on a mid and high fidelity versions, user testing, and UI.
Tools: Sketch, Illustrator, Marvel, Invision
Methods: User interviews, Concept mapping, Storyboarding, Sketching, Wireframes, Prototyping, User Testing
Understanding the problem
Efrem has a really weird problem.
He and his girlfriend share a flat with another couple on the seventh floor of a recently constructed building, and there’s no doorbell.
For some strange reason, the building’s management decided to have the intercom at the entrance connect directly to one phone of one of the flat occupiers. So instead of having a conventional doorbell that rings loud and clear for everyone in the flat to hear, Efrem is the only person that knows if someone is at the door. He has to answer his phone and press a number on the keypad to open the building’s main entrance, regardless of where he is or what he is doing. If he misses a call, everyone misses a delivery.
And he often does…
“I could be in the middle of an important meeting and because, someone
arranged a Sainsbury’s delivery.”
The app
The Doorbell App allows the user to create a “group / household” and share the responsibility of opening the door, by having all the phones ring at the same time and answer on a first come first served basis. This solution also allows the user to quickly set his status to unavailable blocking any calls made from the intercom. Lastly, the user can also quickly notify all other household members that he is home, allowing them to switch the status to unavailable.
Concept map — One phone, four people, no doorbell
Narrowing down the user’s pain points and frustrations was key. Creating a detailed concept map, allowed me to visualise the problem, and to have a better understanding of Efrem’s needs. I wanted to create a platform that not only fixed the main problem, but also improved the user’s overall experience.
Storyboard and user flow — The path to solving the problem
Drawing some sketches of the Efrem’s situation allowed me to stay focused and on track to solve the core problem.
User flow
​
When making the user flow, I focused on creating a possible situation where Efrem would use the app to communicate with his household and open the door to the delivery man. In this journey I wanted the user to do more than one task so that I could validate the usefulness of possible features that I intended to introduce.
Sketches — Simple features to make life easier
​
When I started sketching my first iterations of the App I already had a pretty clear idea of what features it should include, this made it easy to create the first wireframes and begin the testing process with Efrem.
After testing on paper and getting feedback from Efrem I made a paper prototype and linked it in Marvel to test it with my other classmates.
​
Thanks to this process I successfully solved Efrem’s problem by creating an intuitive platform where he can plan, communicate with his flatmates, and most importantly allow them to also answer the door, preventing this responsibility to fall just on one person, and avoiding any more missed deliveries.
​
​
Next steps
​
-
Creating the journey of adding household mates, and more households (i.e. neighbours).
-
Introducing the option to view who’s at the door.
-
Introducing a location detection option that sends a push notification to the household informing when you get home or leave home.
Brand affinities — What if…
​
After a few weeks away from the project, my first action was to create brand affinities. I looked back at the brief, the proposed solution, competitors and most importantly how the user felt about the problem.
I discovered that the “ridiculous” nature of Efram’s issue could be an opportunity to introduce a fun element to the brand.
If it was a celebrity: The charismatic actor Simon Pegg was identifiable for this project. I thought about the way he does comic relief in his movies, and even when he’s playing a serious role there’s always a witty playful attitude to his characters (like in ‘Mission Impossible’ or ‘Star Trek’). He also twisted the zombie movie genre by co-creating ‘Shaun Of The Dead’ the cliché driven, fun poking comedy which is in my opinion the best zombie movie ever made.
If it was a car: This classic pop culture vehicle is functional and The Doorbell App is kind of surreal, yet useful, then the Delorean DMC-12 time machine from ‘Back To The Future’ is a perfect fit. This classic pop culture vehicle is functional and ludacris. Whenever you go in time, you’ll be better equipped with wheels, right?
Taking other platforms into consideration, the Duolingo App has become the absolute go-to resource for newbies trying to acquire any language. It’s fun, accessible and it’s based on solid research. What’s not to love, right?
​
The other area I wanted to tackle was communication. Skype is well known and used widely for video and audio calls, but iMessage, WhatsApp, Messenger, Snapchat and other messaging services have taken the lead in today’s conversations. I was also drawn to the way they keep their interface graphically simple and intuitive.
The Doorbell app is:
-
Informal
-
Fun
-
Colourful
-
Accessible
The Doorbell app is not:
-
Luxurious
-
Exclusive
-
Traditional
-
Boring
Above is a sample of the moodboard that influenced the vibrant look and feel of the Doorbell App’s interface. A selection of colourful buildings and flat illustrations dictated the colour choices.
The typography can make or break a design, so to keep in tune with the playfulness of the colour scheme I saw Gotham to be the best suited font.
It’s not the same Gotham used in the Obama campaign though, it’s the more friendly cousin, Gotham Rounded.
I carried this rounded theme when deciding the iconography.
Above is the evolution of the app through three iterations. I also took the opportunity to test some of the next steps from the previous sprint.
Next Steps
I left this exercise on a high fidelity level but not at a finalised stage. If I was to continue with this project I would test its accessibility, at the moment I’m not sure if it would pass the AA standards.
I would also create and test the missing interactions:
-
Create profile
-
Chose avatar
-
Add household
-
Connect with phone/intercom
-
Animate prompts (when user clicks ‘I’m Home’ or ‘Open Door’)
-
Calendar menu (book deliveries)
-
Settings menu
-
Sign up journey