In order to create these mobile web patterns, we redesigned the current admin web portal. Before we embarked on the project, we identified the main tasks that administrators performed: evaluate product usage, reassign product privileges, and account removal. We ensured that these tasks were promoted in our designs and eventual patterns, a few of which are detailed below.
In order to create mobile web patterns, we took a small but contained desktop web experience for our admin users and redesigned it for the mobile web. We leveraged off-canvas principles to establish consistent zones of information for the user. View the full pattern.
Anatomy of a Web Page. When one or more items are selected in a data list, a task bar animates over the top navigation bar. This facilitates user focus until the task is complete.
The data list effectively conveys a variety of information, while providing proper affordance to the user to know how to select a list row and navigate to row details. View the full pattern.
Mobile Data List. The pattern can accommodate a search field at the top (first screen), is scrollable (second screen) and, when applicable, each item navigates to another screen with more information about that item.
The task bar appears when one or more items on the list have been selected. It's placement over the top navigation bar facilitates focus on task completion.You'll also notice that we are following our own anatomy of a web page pattern, where user notifications emerge from the bottom toolbar. View the full pattern.
Task Bar. When one or more items are selected in a data list, a task bar animates over the top navigation bar. This facilitates user focus until the task is complete.
You can view all of the patterns below:
Anatomy of a Web Page | Auto Loading | Common Elements | Contextual Menu | Data Table | Empty Data Set | Filter | Footer | Forms | Local Navigation Bar | Login | Messages | MicroTask | Search | Tabs | Task Bar