Projects always sound simpler and more straight forward than they really are when you’re in the planning phase. When we came up with the idea for Notify My Team, the programming sounded so simple to me. Sign up, add employees, post a notification via SMS or email. How hard could it be?
One of the most unexpectedly difficult aspects was getting the key user interfaces right (or, at least right enough for a version 1.0). Especially when you want the site to be fully functional on a mobile device as well and you’re working within a framework that has certain UI opinions. I ended up drawing a lot of inspiration from the most standard user interfaces I knew of that performed similar functionality: Twitter, WordPress, and Google Contacts.
Note – the screenshots below are for a fake company that I created for the purpose of tutorials and screenshots. I generated the names using a random name generator.
My Team – Google Contacts
This interface was the hardest. Managing your team requires that you be able to:
- Search for someone by name
- Filter by status – active, inactive, verified, unverified
- Batch verify and batch add to groups
- Show if someone is a Manager or Admin
- Show if someone is in a group
- Show the verification status for each email and phone number
When I first mapped all of this out, my head was spinning. The first attempt was ugly and unusable. Then I realized that what needed to be displayed was quite similar, almost identical, to Google Contacts. I kept that window open the entire time, and the result is something that will hopefully be recognizable and reasonably usable:
Post History – WordPress
This was another sneaky difficult one. I used the WordPress post interface as the inspiration here. There’s a lot that you need to be able to do – see the post content, who posted it, when it was posted, view stats, link to the actual post, delete it, etc. Posts that aren’t published look a little different, but I think you get the idea from this screenshot.
Post a Notification – Twitter & WordPress
Here’s where things got a little more straight forward. Much like Twitter and to a lesser extent WordPress, the goals here are to type a message, decide who to share it with, and then decide between saving it as a draft, scheduling it for the future, or posting now. There’s also a real-time preview of the text message and email down below.
Post Timeline – Twitter
Just like Twitter, this is a straightforward timeline of your posts where each post has a permalink too. By default, this is private and only viewable to team members, however there is an option to make it public.
It took more effort than I had anticipated, but I feel reasonably good about where it’s at for launch. As we get more feedback and data we’ll make improvements. I’ve already received some good suggestions from test users.
If you or someone you know has a business, organization, or group that might be interested in using Notify My Team, please reach out to me by emailing adam@ this domain. We’re still looking for a few more companies to give free accounts out to. The only small thing that I’ll ask in return is to give me your honest feedback to help us improve.
- Our Exhaustive Shipping Project – What We Learned and What New Features We Added
- Why The Release of IE8 Matters (to us at least)
- Integrating Customer Reviews into our Cart
- Apple Pay and Google Pay Now Live – Step 2 of Our Braintree Integration