Year: 2018
Role: Principal Product Designer
Role: Principal Product Designer
tl;dr
I designed the UX/UI a purpose-built smartphone app for scheduling recurring tasks based on a predefined, fixed time span. Using Material Design guidelines, I designed a simple UX/UI appealing to both Android and iOS users.
Brief
In August 2018, Emkore Limited was contracted by S4BB to design and develop a smartphone application enabling Android and iOS users to create and schedule recurring tasks based on a predefined, fixed time span. The client specified that development was to be done using a cross-platform framework, and that the UI should be as native-looking as possible on each platform.
Deliverables
Design a single, clean UX/UI appealing to both iOS and Android users.
Background
Based on S4BB Limited’s development & design requirements, we decided that Flutter in combination with Material Design was the best approach. Along with a detailed project initiation document, the client provided Emkore with a specific use case:
“A birder (someone who pursuits bird watching for a hobby) has a camera set up in a nearby forest capturing photos of passing birds every couple of minutes. The user knows that on average the camera’s memory card will be full after seven days of shooting photos. Using the Auto-Re-Schedule app the user creates a task with a seven-day recurrence. The app notifies the user when it’s time to replace the memory card, and when the user decides to go a day earlier, s/he can mark the task “Done” after which the task is automatically rescheduled.”
The difference between a normal calendar app and Auto-Re-Schedule is that the former is date based, and the latter time based.
“A birder (someone who pursuits bird watching for a hobby) has a camera set up in a nearby forest capturing photos of passing birds every couple of minutes. The user knows that on average the camera’s memory card will be full after seven days of shooting photos. Using the Auto-Re-Schedule app the user creates a task with a seven-day recurrence. The app notifies the user when it’s time to replace the memory card, and when the user decides to go a day earlier, s/he can mark the task “Done” after which the task is automatically rescheduled.”
The difference between a normal calendar app and Auto-Re-Schedule is that the former is date based, and the latter time based.
User Experience
Since Auto-Re-Schedule is purpose built to accomplish one specific task, I wanted to keep the UX simple and straightforward. The home screen displays cards with all scheduled tasks. Each “task card” contains:
1. Title
2. Upcoming action date & time
3. Rescheduling time interval
4. Deference time
Borrowing from Google Calendar’s UX, I used a floating action button in the right bottom corner to enable users to create new tasks. This approach feels natural for Google Calendar users and ensures that creating tasks is always easily accessible.
In keeping it simple, I decided to forgo a navigation drawer and make the “About Us” and “Upgrade” pages accessible via the top app bar.
Borrowing from Google Calendar’s UX, I used a floating action button in the right bottom corner to enable users to create new tasks. This approach feels natural for Google Calendar users and ensures that creating tasks is always easily accessible.
In keeping it simple, I decided to forgo a navigation drawer and make the “About Us” and “Upgrade” pages accessible via the top app bar.
User Interface
Since Auto-Re-Schedule is a single-purpose app, I wanted to apply the same simplicity and purposefulness to the user interface design. Using pastel shades of turquoise and yellow, I reinforce the app’s simplicity by creating a flat and clean looking UI. To complete the design, I choose Work Sans as typeface for both header and body texts, and FontAwesome Pro for the necessary in-app icons and as a jumping-off point for the app icon design.
Credit
Jonas Hartmann, Lead Developer