Volu: Mobile App & OS Design

Role

User Flow, Wireframes, Design, 3D Visuals, Animations

Created as part of my work at Studio Praktik

Overview

Volu is a startup that offers a smart joint-rolling device.

The Volu device blends tobacco and cannabis, or two strains of cannabis and produces up to six joints at a time.

The product design team commissioned our studio to take part in the overall design team. I was part of all stages of the product — such as industrial design, development, and interface design.

Challenges
  • Coordinating between various contractors (development team, the industrial design team, and Volu's CEO)
  • Creating visual and technical continuity between the operating system and the companion app
Volu device and app screenshot

Mobile App

Goals
  • Enable users to make smarter decisions
  • Minimal, and contextual UI
  • Make the app's features as fast as using the device, if not faster
App overview

User Flow

The app's flow corresponds with the hardware flow and the client's vision. It breaks down possible use cases and decision trees for every outcome.

I was able to make more complicated hardware decisions using the hardware flow. That is, picking a specific strain of weed from a database, make maintenance notification appear with instructions in the app.

Onboarding

We wanted the user to find value in the app from the initial setup of the device. This way, the user will consider the app as an integral part of the Volu ecosystem.

The solution I came up with was to include the device's setup manual in the app.

Using the device's CAD model — I made an animated step-by-step guide showing the initial setup. The animations are clear and straightforward to create a fun experience.

Example of onboarding animation

Homepage

Challenge: When using the device; the user will either roll his last blend or customise a new one manually.

We wanted the app to enable a quicker and smarter way to customise each roll.

Solution: I created a home screen with two sections:

A quick favourite section — smart cards that show the user what blend he usually makes.

Custom roll section — joint blend dial and amount, and save the last roll as a favourite.

The quick favourites are by default the main section when you log in. You can always swipe up to make a custom roll.

homepage — quick favourite section
homepage — quick favourite section
homepage — scroll example
Homepage — roll screen
homepage — roll screen

Contextual Popups

Challenge: There are many configurations you can make in-app — e.g. roll paper size, weed strain, choosing between weed and tobacco.

We had to make a minimal UI and still let the user quickly configure the device to his needs.

Solution: To make the app clean and minimal — I designed a contextual popup system. The system interacts with the hardware and notifies the user about changes — including restocking it with new weed and filling it with paper.

popup system — select last strain used
popup system — select last strain used
popup system — select strain database
popup system — select strain database
popup system — choise weed/Tobacco
popup system — choise weed/Tobacco

Operating System

Goals
  • Standalone, fully-featured, easy-to-use OS
  • A clear indication of actions required by the user
  • Making joints as quickly as possible
Volu device blueprint

Overview

The Volu device lets the user control the OS with a single dial button with a round OLED screen embedded into it.

I made the OS' UI/UX as simple as possible. The user interacts with the device by turning the dial to set a value and presses to confirm.

Volu device

Design Language

The main screen design is composed of a large number and a ring that shows the ratio between tobacco and weed. The percentage displayed indicates the main weed compartment.

design language — fill right compartment
design language — fill right compartment
design language — main screen
design language — main screen
design language — child lock disabled
design language — child lock disabled

Motion Language

To make the OS more fun and engaging; I made short animations for different situations.

I designed the animations to flow clockwise to complement the dial movement. Alerts are pulsing to get the user's attention but not concern him.

Motion language — rolling progress bar
Motion language — close left panel

Next Project →