Chorus

A powerful platform for flexible communication.

Client

University
of
California

Intro to Chorus

Chorus is a participatory mobile framework developed to enable patients, doctors, researchers, and community leaders to create personalized mobile health interventions and share them with each other. A user-friendly visual interface makes it possible to create a wide range of automated text messaging (SMS), interactive voice (IVR) and web applications in just a few minutes. Chorus decreases the financial, technical and time constraints of traditional mobile health application development. The accessible visual interface makes it easy to engage a wide range of people.

Apps

We broke down the process of app building into steps with primary tasks that need to be completed before moving forward. Apps created in Chorus are data driven and can operate in 3 different channels. We also designed native iOS app for handling notifications.

IVR

SMS

Mobile

iOS app

Each app’s logic can be split into two elements: storage and flows. Storage is handled by variables. Users can create variables that can be grouped by two criteria scope and count. There are two possible scope types: client and app. Client scope means that each client has its own instance of the variable, app scope means that there is only one instance per app. Each variable has fields. In order to make changing & checking values easy, we also introduced Excel-like variable values editor.

Learn more about this project

WYSIWYG editor

We decided to include a number of different creation models in the app composer, but the core feature of Chorus is the visual "what you see is what you get" (WYSIWYG) app creator. We wanted to make building apps as easy as possible. The core of each flow is an interaction where authors define the content of an HTML page (using the WYSIWYG creator) or a text/voice message. Each interaction has at least one response set – once the end user has responded the application executes appropriate actions based on their response. It works like a conditional expression (if x then y), but it’s much more than that. If necessary, complex conditions and actions can be created, e.g. ‘go to another interaction’, ‘save data’ and many others.

Learn more about this project

Challenges

Our main goal was to design an interface will enable non-tech people to create their own data-driven apps. We wanted to create a powerful platform based on automation and mutual communication between patients, researchers, and community leaders. We know that it is a great challenge for a non-programmer to build an app, so we wanted to make it as simple as building with wooden blocks. We realize that Chorus apps are multi-layered and leverage large amounts of data – that’s why we guide users step by step with the most intuitive object-oriented design possible. We could have turned the process of building an app in Chorus into filling one huge form, but we didn’t want to go that way. Our main focus was to make this process fun and easy. Eventually, we were able to come up with an app-building process, which was compared to growing a tree by one of our clients.

Users should feel creative, as they are building something.
Armen Arevian - client

Growing a path

We can’t assume that people using Chorus have sufficient “online experience” so we wanted to enable them to build their own apps from scratch with no previous programming experience necessary. We simplified the whole as much as possible, while adding support for advanced grid structures and simple wireframes to make grids more realistic. As a result, we give users a powerful creator that lets them create tailor-made variables that meet their needs. What is more, users can configure every element of the grid in the creator for each breakpoint.Object-oriented way.

We introduced an intuitive object-oriented navigation. Each place where a user can insert a new object is indicated with a dashed orange line. Often, instead of a button we put an object that looks exactly like the item in the actual app being created. Thanks to this we were able to provide our users with 16 reusable components. Users can also create a grid with one to three columns and include a header and/or footer.

Typography

Open Sans Bold

24px/40px

Lorem ipsum dolor sit amet.

Open Sans Bold

18px/26px

Neque porro quisquam est, qui dolorem ipsum quia dolor.

Open Sans Bold

11px/14px

Lorem ipsum dolor sit amet.

Open Sans Regular

14px/24px

Sed ut perspiciatis unde omnis iste natus error sit volupttatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Colors

Main colors
Suplement colors
State colors

Learn more about this project