Jihoon Suh
Personal Website
render-low2.jpg

Chakak

App Design

 

Chakak

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 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 under crowd-funding in South Korea.  

Photoshop, Illustrator, Sketch, Framer, ProtoPie

Team

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

Circular Button

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.

Glanceability

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.

Touchability

 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’sregular 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)

ProtoPie is code-free timeline based prototyping tool, similar to Pixate, with sensor capabilities. I have improved the UI design of Chakak with unified theme color and referenced Google Material Design transitional elements for hierarchal micro-interactions and page-to-page transitions.

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

The client has asked for revisions in UI components and also requested additional tasks.

UI revision:

  • Two-buttons for main page (some devices have open & close button seperately)
  • Menu button replaced
  • Back button added for iOS UI

Tasks added:

  • Automatic door access function
  • Register device via QR Code