Case Study: A Better Lock Screen
When I get too many notifications, I want to have a functional overview so I can quickly digest and act upon important notifications.
Problem: Being away from your phone can be a stressful experience. Curently iOS creates one big list of diverse notifications, from urgent calls to junk mail, where every item is treated the same. That’s kind of silly.
Goal: Create an intelligent design to sort and display notifcations so that users can seamlessly read and act on their data.
Target Audience: Smartphone users with notification overload
Research
User Interviews (college students and adults)
- time away from phone is proportional to stress
- most important notifications: calls, texts, important emails, direct messages from social media
- users want to act on a notification immediately
Market Research
Key Takeaways
- sorting notifications by app
- prioritizing important notifications, like calls and reminders
- information density: providing details, but not overwhelmingly so, unless the user wants to pursue
Low Fidelity Explorations
Figuring out everything: what to do, what not to do, and how to do it.
Journey Map
Notifications are handled in three ways:
- Acting on a notification is resolving or completing the task right on the lock screen. This is done by replying to a text, archiving an email, calling back a person, etc. They all involve actions, and can be completed or started directly from the lock screen.
- Dismissing a notifcation is completing the task without completing an action. The notifcation will be “marked as read”, and will be considered complete and disappear. There should be an option to dismiss multiple text messages, likely by application.
- Ignoring a notifcation is simply inaction. It is still considered “unread”, and still needs to be either dismissed or acted upon. The notification will stay in the Notification Center. I anticipate some users will choose to ignore more important notifcations as a way to not forget about them; they will remain until either acted upon or dismissed.
Storyboarding
Personas
Damien signed up for everything at ClubFest. I mean everything. Never wanting to miss an opportunity, Damien loves putting down his fresh school email address on any flat surface. However, his inbox is bursting at the pixel with meeting times and Google Forms and so many reply all emails, my goodness. Mixed in with texts from his anxious parents, new Facebook requests, and Clash of Clans updates, Damien can’t be away from his phone for 5 minutes before it lights up like the Fourth of July.
Kendall just got her first job as an airplane stewardess. While working, she usually just turns off her phone, between airplane rules and the temptation to take Buzzfeed quizzes. When she turns her phone back on, she is inundated with a flurry of pings and buzzes. Sometimes, she misses important phone calls or texts among work emails, social media emails, and low memory warnings.
Tim is a professor at a university, teaching eager freshman the wonders of Linear Algebra and its Applications. He frequently tells students to contact him directly via email. Because he has so many anxious students, he sets aside one set time every day to go through the large amount of emails. However, sometimes he misses urgent emails from his supervisor that need to be seen within the hour. He waited at Pinhead Larry Lanes for four hours before realizing the Math Department’s Bowling Night might have been hastily rescheduled.
Sketching
Obviously, some notifications are more important than others, but how should they be prioritized? Grouping notifications by app seems to be a solid idea, but what is the best way to implement that? How should I summarize several similar notifcations in a simple, concise way? I can’t show every notification, so I have to let users pursue notifcations that matter.
Important notifications should definetly be pinned to the top of the screen. Should this be done by assigning a “VIP status” by contact, app, or some combination (a text from my girlfriend, but not an email from her)? Also, How will expanded data look when the user wants to know more, and where will quick actions fit in?
Inspired by my market research, using large application icons seems to be the best way to group notifications (match OS standards, easy to understand icons). However, I believe there should be a pinned section above this icon row for the most important notifications.
The icon row can be sorted right on the lockscreen via hold and drag, like the wiggle dance on the iOS home screen. Notifications can even be dragged to the pinned section and stay there.
This layout will only present itself it the standard list of notifcations can not fit on the user’s device. Icons will disappear from the row if there are no notifications; otherwise, the iOS standard red badges will appear indicating how many notifications from the respective app.
Medium Fidelity Explorations
Putting everything together and seeing what happens.
Key Features
- Pinned Notifications: A dedicated section on the lock screen devoted to user-chosen important notifications. By default, this will include calls from “VIP / Favorited” contacts. Users can select which notifications can be pinned by contact across call, email, and text, or third-party apps that support the protocol. Additionally, all notifications from a app can be relegated as pinned if the desires, but this could potentially defeat the purpose of the section, so it is off for all apps by default.
- Contextual Display: The lock screen will initally serve as an intelligent bird’s eye view to all of the user’s notifications. Apps will a significant number of notifcations will be condensed to a quick summary of relevant information. On pursuing these notifications, the display and data will adapt to become more comprehensive, enlargening and increasing in detail to match the user’s interest.
- Quick Actions: All notifications can be resolved directly from the lock screen. For communication notifications, the notification can be marked as read, replied to (directly from the lock screen or the respective app opened right there), or dismissed. Additionally, each specific contact will provide quick options to reach the person. For example, you can quickly call someone who texted you, or vice versa.
Mockups
Pinned notifications are above all other notifications, which are grouped by app (left). Quick Actions are shown (right), the right slide out row for responding to the notification and the left slide out row for contracting the user.
When pinned notifications take up more than half the screen (right), an app carousel is used to group general notifications by application, with badges for the number of notifications. When tapped or shipped, the carousel expands over the pinned notifications (left).
Condensed notifications appear when 3 or more notifications are from the same contact or email thread (left). All of these can be acted on in bulk by swiping on the header banner. Tapping on this collapsed banner expands the notifications (center, right), indented for clarity.
Key Takeaways and Thoughts
- Gestures: A Tap will cause the notification to slide gently left or right, depending on the location, prompting users to slide the cell. A Short Left Slide will display Quick Actions for the notification (e.g. Reply, Archive, etc.), including an “x” to dismiss the notification. Continuing this motion will invoke a Long Left Slide, which will open the application to the cause of the notification. A Short Right Slide will display Quick Actions for the contact (e.g. call, email, FaceTime). Continuing this motion will invoke a Long Right Slide, which will display the contact card of the sender. A Tap and Hold on a notifcation or app icon will trigger an editing mode. Users can add notifications to the Pinned section (or vice versa), and also reorder app icons. Lastly, a Swipe Down on any list will clear all notifications in that list.
- Privacy: Brought up during office hours, Nicole pointed out that the a lock screen is a secure gateway to the phone. By definition, this means it is unsecured, meaning anyone can access the view and all of its functionality. Not everyone might want to extending the functionality of this space, or at least, not without secure measures. Currently, iOS requires Touch ID verification for some lock screen actions, but not all. For example, archiving an email in CloudMagic requires verification, but sending an iMessage does not. While iOS allows some lock screen functionality to be toggled (iMessage previews), more control needs to be established for the lock screen’s extended functionality. I propose having three settings, Enabled, Touch ID Required, and Disabled for every possible action availble in first and third party apps.
- Unlocking: Currently on iOS, notifications can only swiped to the left in one direction, because the whole screen can be swiped to the right to unlock the iPhone with a passcode. To implement both swiping directions for notifications, the swipe to unlock gesture must be remapped to avoid conflicting swipe gestures. As implemented in the above mockups, I placed a 3 x 3 dot graphic in the bottom left corner of the lock screen. This can be tapped (or possibly swiped up) to unlock the phone with the traditional number input. However given that Apple’s current iPhone lineup uses Touch ID across the board, this feature is a backup option for most. Plus, if the user doesn’t want to use Touch ID, holding down on the home button sensor for a second could automatically bring up the password input screen. This replaces the occasional Handoff app icon from the lock screen, but this can be remapped to a widget in the time and date section (notice the arrows).
High Fidelity Explorations
Working out the bugs with spit, polish, and love.
Main Overview
Main Overview: With an overflow of pinned notifications, the app carousel has been minimized, sorted by number of notifications (left). The user taps on the messages icon, and the carousel rises and switches to the Messages notfications (center). Edward’s messages are condensed because there are more than 2. The user then taps on the condesned notification to reveal all of his messages (right).
Note: if pinned notifications were able to be contained on the top half of the screen, the app carousel would be expanded to directly below the last pinned notification, like the first left mockup in Medium Fidelities.
Main Workflow Continued: The user is about to reply to Edward’s first message, which will complete the notifcation and remove it from the screen (left). Two now remain, so the messages aren’t condensed. The user then pulls down from the list to mark all remaining messages as read, dismissing them (center). The app carousel adapts accordingly (right).
Quick Actions In-Depth
Each Short Left Slide above has specifc Quick Actions for the application of each notification. Phone has a call back action. Mail has multiple options to triage email: flag, mark as read, or archive. Messages has a reply quick action (left).
If the slide is continued, a Long Left Slide, will open the notification’s application to the appropriate page. Security (if enabled) is required to unlock the phone (right).
Each Short Right Slide displays Quick Actions for the contact (if any) that sent the notification. Up to three options can be included, like messaging or FaceTime (left).
If the slide is continued, a Long Right Slide will open the Contact app to the notification’s sender. Once again, security is required to unlock the phone (right).
Miscellaneous
Sort Order: Icons in the app carousel can be sorted by number of notifications (quantity), most recent notification, or manually in a custom order. This is similar to the current implementation.
Widgets: Enable, disable, and order widgets. These include Time and Date, Media Playback, and Suggestions, all of which are always enabled (see below for mockups).
Collapsed Notifications: Self-explanatory toggle.
Quick Actions: Every Quick Action, first and third party, is displayed here. Each can be quickly and easily configured to the exact level of security the user desires. A global switch is also included to quickly turn the feature on or off. Excuse the Quick Action Settings icon placeholder.
Note: Not shown is a first-party entry for Contact Quick Actions. Users can set the security preferences of contact actions (e.g. messaging, phone calls, FaceTime, etc.) on a global basis, but also tweak individual contacts if desired on a per contact basis. However, this is configured in the Contact app.
Widgets: Two default widgets, Media Playback and Suggestions, which displays iOS 9’s Proactive App Suggestions found in Spotlight and the current Handoff app, if any.
Editing: By tapping and holding on notifications or app icons, the editing mode is triggered. Users can move notifications between the pinned and general section, on a per notification basis. App carousel icons can be reordered by holding down and dragging like the iOS Home Screen.
Conclusion
As I’m sure everyone realizes after a case study, this problem was a lot more complex than it seemed on the surface! Even though this is my first case study, I did not expect to come across so many subtleties and obstacles along the way. Questions like privacy, the fundamental purpose of the lock screen, and iOS Design Standards threatened to completly derail my project back to the drawing board.
I still think my final high fidelities are flawed. For example, a scroll down gesture to mark all notifications as read is almost always used to refreshed TableViews; this gesture goes against a standard iOS design paradigm. Many other thoughts like this came about deep in the case study, realizations discovered by considering the implications of my design while I was creating and fine-tuning them in Sketch. Ultimately, thinking outside the box in a confined enviroment will lead to some discrepancies, but they should be minimized. Design is leaving no stone unturned, imagining every possible situation or outcome and preparing an implementation to handle it. With these learned lessons along with all of the beneficial practices I excercised in this case study, I feel empowered to continue solving the design problems of the world.
Bonus: Weekly UI’s from Intro to Digital Product Design
Here is my work, from last to first week. The progress is very real (and mainly because of Sketch 💎💙). I can not thank Nicole Calace and Andrew Aquino enough for being the best teachers, critics, fans, and friends.
Progress!
I would absolutely cherish any questions, comments, concerns, criticism, feedback, gifs, memes, burritos, aw now I’m hungry. My email is matbar16@gmail.com
