2016-2017 Mobile Prototyping
Chakak is a smartphone application that remotely open paired doorlock or vehicles through Bluetooth connection. It requires a Chakak door module (motor-powered button clicker) to be installed onto a digital doorlock, or a Chakak vehicle module (hacking into car control system) to be installed inside the vehicle. It is currently under crowdfunding project in South Korea.
Photoshop, Illustrator, Sketch, Framer, ProtoPie
Jihoon Suh - Designer
Yongdae Kim - Founder, HW/SW Engineer
Role - Interaction Designer
As the designer, my task included wireframing, user interface design, and interactive prototyping.
Previously I explored different prototyping tools with Chakak...
Opening door locks or vehicle for IoT environment
Chakak allows the user can grant access of his/her house or car by sending temporary passcodes, and access pre-approved doors by entering passcodes. The proposed design of the application includes user interface screens of initial search, pairing screen, sending/receiving passcodes and advanced settings.
User Interface Design
I have modified UI for Chakak, with a circular button at its center. Since the user needs to quickly access the button for usability of this remote control app, the main view consists of top status bar and a on/off button in the center of the screen. I chose to focus on the design of this, because the circular button can be used to add new devices, detect familiar ones, and act as on/off button. I iterated on shape, size, and color of the button.
The main task of user is to open a door at instant he/she launches the app. Therefore, the scan-open button is the most important part of Chakak. It has to be eye-catching. The color and shape of the button allows it to be recognized from distance.
As the button is a core UI component of the app, it must be easily reachable from all hand-held posture. According to Scott Hurff's regular grip thumb zone, mid-low section of the mobile screen are ‘natural’, however the ‘natural’ zone changes when the grip position changes.
Of course this would change for righthand grip, and change drastically for bigger/smaller Android devices. Thus the main lesson learned here was to avoid the four corners of the screen for the main function button.
After different size and variations of button, I settled on big circular button at the screen center for general easy-touchability.
Exploring different prototyping tools.
I chose Framer.js, ProtoPie, and Origami Studio for each design exploration, and respectively created Android and iPhone app prototype of Chakak.
In respect to its core function of remote control, I tested different micro-interactions in between. The two micro-interactions I chose to explore are 1) translation to list view of available deveices and 2) Button transition from connecting status to activated status.
Sketch + ProtoPie (iOS)
Sketch + Framer (Android)
Framer is a coffee-script based prototyping tool that offers wide spectrum of freedom in exploring micro-interactions for mobile application. I tested out different modes and means of interaction, including chained interaction, masking effects and rotating loading screen. The rotating circular array was organised by for-loops. Masking effect were created with offsets, wrappers, and z-index.
SKETCH + ORIGAMI (ANDROID)
Recently I have been using Origami Studio for all my newest projects. And I thought I should return to Chakak to give it a shot with Origami Studio. Origami is a patch programming prototypting tool that allows visual programming with pre-packaged functions. Read my blog post on Origami basics.
I wanted to create random spinning motion of arcs in different time interval and different lengths during the search loading.
Update (2017. 1. 9)
We made following revisions in UI components and also requested additional tasks.
- Two-buttons for main page (some devices have open & close button seperately)
- Menu button replaced
- Back button added for iOS UI
- Automatic door access function
- Register device via QR Code