MIND.OT
BACKSTORY
The team at Toda.Network, an IT & Services company with offices in San Francisco and Toronto, was working on a proof of concept for a machine learning notification centre. This was an extension of The Shell project I had worked on earlier. The idea was to allow the receiver of messages be able to see his or her notifications organized by his or her preferences (e.g. family, work, etc.), but also according to priority classes. The end goal being that the device would eventually learn what action to execute on behalf of its user.
OVERVIEW
Problem: As a receiver of emails and messages, I would like to be able to sort my notifications by grouping of choice as well as by high-to-low priorities to better organize my time and device activity.
Objective: Demonstrate how these actions would present themselves in the user's notification centre.
Deliverable: High-fidelity wireframes & animated GIF in line with Apple's iOS design system for demonstration & presentation purposes.
INITIAL INFO
Blessed with clear communication from the project manager at Toda, I was given the following information.
(1) a lo-fi example of the direction they wanted to go in:
(2) the following use case:
For example, in his priority list, Bob (the Project Manager of M2M Inc.) can see three emails he has. One of them is from his boss that says some stuff regarding a meeting about Maximum, the project they're working on. Any Maximum related email is high priority for Bob. The action options that he has are:
-
Contact the developers to let them know
-
Make an appointment
-
Custom action
All this he sees when he taps on the message received from Bob's boss in his High Priority section.
MY SOLUTION
To tackle this, I parsed the above information down to the main two views/actions:
-
The lock screen with different priority action "buckets" — high, medium, and low.
-
Upon clicking a bucket, seeing what actionable items are suggested.
Here I put myself in the shoes of our user, Bob. For him, his work emails are top priority. Applying the iOS design system to the lo-fi suggestion that I was given, I created the following:
Here we can see that Bob has created two separate groups and the device filters his new emails, messages, and phone calls into those two groups or "buckets".
The device also recognizes his priorities in the section entitled Priority Actions. The goal of the Mind.OT concept is for the priority sorting to utilize advanced AI techniques that are able to understand context and make sense of natural language, dividing the actions into three priority levels. These levels are represented by easily recognizable colours: "alert" red is high, "caution" orange is medium, and "calming" blue is low.
When Bob clicks on the red top priority icon, he receives the following message previews:
Here Bob sees the three messages that have been designated as top priority. He sees that they are all emails (indicated by the Mail icon) and he sees that they are indeed top priority (as indicated by the red icon).
When clicking on one of the messages, he sees the important actionable items that the device picked up on:
As previously mentioned, the system is smart enough to offer specific actions related to the content of the email. And as seen, Bob could easily and conveniently access these in just a few steps.
Here is the entire flow in a short lil' video:
Toda went on to present this concept at a conference, using these wireframes to demonstrate the interactions.
TAKEAWAYS
1. Clear use cases are important. Receiving a rough sketch of what the client wanted was fine, but things really clicked for me once a clear use case was defined — in this particular project we had that with "Bob". Knowing Bob's work background and what his desirable actions were really made the flow and wireframe creation process much quicker. The end goal was suddenly much more clear and tangible, eliminating a lot of guess work. Since my background is in acting, I am used to creating characters and picking actions that are suitable for them, so applying this type of thinking and creating personas and user stories is very helpful for me in the design process.
2. Continue to learn your tools. I love Principle for Mac for its ability to create quick little GIFs and videos for demonstration purposes. Seeing wireframes is great, but seeing them in action makes a big difference. The issue is, Principle also has its quirks, and when it's acting funny, it's REALLY acting funny. The timeframe for this project was super short, so of course I ran into a little technical hangup while using Principle for my deliverable. But after banging my head against the desk a few times, and then jumping into action and thankfully finding a solution, it did become a good lesson for me to keep working with these tools and figuring out their quirks so come crunch time, I can troubleshoot quickly.
Thanks for reading! This project was done in 2018. If I were to revisit this project today, there are some key UI/UX changes I would make, however I haven't included them in this write-up. If you would like more info or have any further questions, please don't hesitate to get in touch!