Coshx Design Case Study

PSIKICK

The team at PsiKick has developed a collection of methods and system level techniques for deploying wireless sensors without a battery. To be able to pitch it to potential customers and partners at the 2016 CES and MWC, PsiKick needed a mobile phone app and web based dashboard to demonstrate and highlight the operation of the technology utilizing bluetooth. That’s where we come in.


Preparation

Understanding the concepts and users

As consultants, it’s typical for us to have limited expertise in our clients’ specific product domain. We need to understand the domain at hand in order to design effective solutions in products. In this project, learning about the BLE (bluetooth low energy) protocol from the clients and making sure we communicate in a shared vocabulary that streamlines the rest of the design process.

fig1a. The small form factor device with various environmental sensors using PsiKicks batteryless technology to send data to a mobile app utilizing BLE technology
fig1b & 1c. Notes from interviews with the client regarding the BLE domain, user’s intent, and the app’s functionality
Strategy

Turning domain concepts into app workflows

With the gained knowledge of the BLE domain, we now have the ability to break down the app’s goals & functionality into visual diagrams. This helps identify categories, patterns, and discrepancies in how the app will work versus how it should work. Aside from the insight, these diagrams help facilitate many conversations and diagram iterations with the client to figure out the user’s intent & workflows, as well as eliminating invalid assumptions.


Through this process, we have identified three different modes in the Psikick mobile app in which the user will interact with the content.

fig2. The application flow was identified to have three stages of user interaction
Exploration

Organize the content hierachy first

Before jumping into how the design will look, it’s best to solidify what content appears in which screen, as well as in which order the user will receive the information. Sketching out the design helped speed up the process of elimination in collaboration with everyone on the project. We then moved into higher-fidelity interface layouts (wireframes) once we were more confident in the content layout.


With this Psikick workflow diagrams as a guide, the decision was to made to prioritize the data being received from the sensors. To give the more context on the data, graphs and other visualizations were given a priority.

fig3a. Initial sketches of different screens—good way to explore/eliminate ideas quickly
fig3b.(top) Iterations of one concept of the home screen. This layout end up not working out due to it’s inflexibility to add in more content in the future fig3c.(left) App-wide layout of different content views (also known as wireframes). Wireframes are later made into simple clickable prototypes to mimic how the app would actually be used. No software development is needed to get a prototype done
fig3b.(above horizontal) Iterations of one concept of the home screen. This layout end up not working out due to it’s inflexibility to add in more content in the future fig3c.(above vertical) App-wde layout of different content views (also known as wireframes). Wireframes are later made into simple clickable prototypes to mimic how the app would actually be used. No software development is needed to get a prototype done
Execution

Visual Aesthetics

With the app’s features, workflows, and wireframes in agreement with the client, it’s finally time to apply the colors, typography, icons, other visual aesthetics to the application. The approach with a dark-themed interface and big bold numbers is to convey a sleek app with no frills. A conscious effort was made to be sure the visual components could be expanded upon for other types of devices (e.g. Desktop application).

fig4a. Screen views grouped by user workflow
figures above. Individual screen views, including home view, each sensor detail, and sensor configuration
Outcome

Moving Forward

Designs were approved and app development finished on schedule. The PsiKick Battery-less BLE sensor node and it's accompanying mobile app were sucessfully demo’d at the 2016 CES & Mobile World Congress. Currently we are working with Psikick to develop a desktop application to further translate their novel battery-less enabling technology into usable web products.