Sidekick App

Open Bionics

2020, 2024
Bristol, UK

My Role:

Supplied 2D & 3D Assets, assisted with UI mockups

Tools Used:

Figma, Blender 3D, Adobe Suite

The Sidekick App is a companion to the “Hero Arm” bionic arm product. It allows the user to set up & customise settings on the arm, learn to use their prosthesis with interactive tutorials & video lessons, test their muscle signals & track their device usage.



Open Bionics hired Calvium, an app development agency, to lead the design & development of the app. As the in-house designer, my role on the project was to supply assets like icons, 3D renderings & illustrations, and to collaborate with Calvium on the visual style of the app to ensure it was in keeping with Open Bionics’ brand identity.



I also supplied design mockups for certain app pages, and assisted with some UX flows, where Calvium’s original concepts needed adapting to fit the particular requirements of our users & product.



For the updated 2nd version of the app, we moved everything in-house, and I collaborated with the engineering team to expand the design system, creating new patterns & components.

The Sidekick App is a companion to the “Hero Arm” bionic arm product. It allows the user to set up & customise settings on the arm, learn to use their prosthesis with interactive tutorials & video lessons, test their muscle signals & track their device usage.



Open Bionics hired Calvium, an app development agency, to lead the design & development of the app. As the in-house designer, my role on the project was to supply assets like icons, 3D renderings & illustrations, and to collaborate with Calvium on the visual style of the app to ensure it was in keeping with Open Bionics’ brand identity.



I also supplied design mockups for certain app pages, and assisted with some UX flows, where Calvium’s original concepts needed adapting to fit the particular requirements of our users & product.



For the updated 2nd version of the app, we moved everything in-house, and I took responsibility for the visual design, and collaborated with the engineering team to expand the design system.

Home Screen

I collaborated with Calvium on concepts for the app's home screen, supplying 3D renderings and layout mockups which were then refined to arrive at the final design. We wanted a visually striking focal point for the page, and decided to use a 3D rendered image of the hand which would change to reflect the current status of the product. The 3 states represented were:
‍
- Hand connected (default)
- "Stealth Mode" active (this turns off all lights, sounds & vibrations, similar to a smartphone's "silent" mode)
- Hand disconnected

Homepage
"Stealth Mode"
Disconnected

Onboarding

One key requirement we decided on when designing the app was that the content should be tailored to the user - for example, a user with a left-handed Hero Arm should be shown training exercises with a left hand pictured. For Bluetooth-enabled Hero Arms, this was easy to achieve since the product information can be broadcast from the hand to the app.
However, we had many existing customers with non-Bluetooth arms, and wanted to ensure they still had a good experience using the app's training features. The solution was to design an onboarding process for these users which would ask them some simple questions with visual aids to determine exactly which version & model they were using, then show them tailored content.

Grips Editor

One Bluetooth-enabled feature of the app is to allow the user to arrange the available grips into custom groups, which can make it quicker to switch between your most-used grips on the arm itself. When designing the group editor page, we hit upon a problem - if you simply display an image of each grip, they can be hard to identify. If you show them closed, many of the grips look very similar. If you show them open, they don't really convey what the grip does (eg. an open fist does not really look like a fist!)
The solution we arrived at was to create some simple 2-frame animations which activate when in editing mode. With these active, the differences between the various grips become readily apparent.

Component Updates

As we worked on the updated version of the app (now fully in-house), it became clear that we would would need to create some new UI elements and add extra functionality to some of the existing components. I worked with Open Bionics' engineering team to update the design system with new components that would fit seamlessly with the existing visual identity of the app.

Project Content Coming Soon...

App Screens

Blah blah blah

© Ronan McAllister 2024