Resonances app - UI/UX design

Overview

About the project

SourceMedicine - is an innovative technology that through Source Resonances (special audio tracks) helps people recover from diseases and support their wellbeing.

The client already had a web app where users could register to listen to resonances. But the website was confusing and complicated. New users often didn’t finish the registration process and old users couldn’t find what they needed.

The web app was inconvenient for practitioners as well. They couldn’t prescribe resonances for their clients and had to send them links which often didn’t work or were lost by clients.

Besides it, the admin side of the app was way too time consuming to manage and created lots of inconveniences for the client.

Also as SourceMedicine technology is new and has been little studied, the client wanted to collect data for the research through the app.

The challenge

The client decided to develop the whole suit of apps:

The app for clients to help them conveniently use Source Resonances, follow their progress and get personalised help from practitioners.
The app for practitioners to easily manage their clients, prescribe resonances and follow their progress.
The dashboard for programme advisors to follow participants’ progress and help them get the most out of the programme.
The dashboard for the admin to manage the whole app.

My role

As the only designer working on this project, I was responsible for the whole design side of the product.

My responsibilities included: communicating with the client, conducting UX research, developing UI style, providing UI/UX design for apps and dashboards, creating styles and components library.

Process

Design process

Stakeholder interview

Competitor analysis

User interviews

Information architecture

Requirements

Personas

User flow

Wireframes

UI design

Stakeholder interview

I learned about the business and its audience, defined current goals, problems and needs, clarified all the needed details about the project. I got a clear understanding of what we are doing, for whom and why.

Competitor analysis

I analysed the market to find out our direct and indirect competitors. I studied their advantages and disadvantages, successful and unsuccessful solutions, apps’ architecture, flow, functionality and design. I collected all this information in a document with screenshots and comments. I figured out how we could stand out from our competitors, which successful solutions we could apply and which mistakes we should avoid.

User interviews

I conducted 4 interviews: 2 with practitioners and 2 with clients. I got lots of insights about users and what they think about the existing product, how they use it and what they like and dislike. I created a board with their quotes grouped by research questions. Interviews gave me a better understanding of our users and ideas of what we should develop, improve or change.

Personas

Using information gained from interviews, I formed a collective portrait of our users. I defined their goals, fears, pains, needs, and other important aspects. And figured out characteristics that affect the interaction with the product.

Information architecture

I started the product development from the information architecture. I organised and structured the content of the app into a diagram. It helped me to see the full amount of information, find out the best way to structure it and identify pages that will be needed to design.

User flow

I created a user flow with all the steps that the user takes from entering the product to achieving his goal. It helped me to consider different cases and ensure that the flow is convenient and understandable and users have a way out of possible error and dead-end cases.

Wireframes

I created wireframes to provide a clear overview of the page structure, layout and functionality before visual design and content is added. It allowed the team to test and easily improve pages, agree on the structure before moving on to UI design.

Solution

The app for clients

SourceSound app collects everything users need in one place. It allows them to conveniently use Source Resonances, easily find and listen to their resonances, track their progress and get personalised help from practitioners or programme advisors.

The app is adapted for mobile, tablet and desktop for convenient usage in any conditions.

Onboarding

During the onboarding users fill only essential information to keep the process short and easy.

Home

On the Home page users can easily track their progress, find resonances they should listen to today and check new or featured programmes and resonances. Also I designed structured questionnaires that are shown to users at defined moments in order to help users to track their progress and to help the client to collect data for the research.

Explore

This is a library of all the resonances and programmes available in the app where users can easily find what they need.

My Journey

Here users can find all their resonances and programmes as well as receive new prescriptions from their practitioner right to the app. They can track their progress and check the statistics. Also users can easily reach their practitioner and get personalised recommendations. Programme participants can also receive personalised help from programme advisors via a built-in chat.

Ma journey page with inner pages showing the described functionality

If a user doesn’t have a practitioner, he can find one right in the app. Also to make resonances more affordable for people in different countries we developed a tokens system to adjust prices according to the user’s situation.

Tablet

Desktop

The app for practitioners

Practitioners’ app has everything they need to run their practice. Here practitioners can track their clinic’s statistics, find all their clients, follow their progress, create and send prescriptions, give them recommendations via a built-in chat and receive notifications about any updates.

The app is adapted for mobile, tablet and desktop for convenient usage in any conditions.

The dashboard for programme advisors

With this dashboard programme advisors can track their programmes’ statistics, they can follow participants’ progress, give them recommendations via a built-in chat, adjust their programme settings based on their conditions and receive notifications about any updates.

The dashboard for the admin

This dashboard made management of the app much more convenient. Here the admin can manage the whole app, add new or edit existing resonances and programmes, manage programme advisors and chat with them, manage programme participants and receive notifications about any updates.

Styles & components library

Grid

Typography & colours

Components

Outcomes

SourceSound app for clients made usage of Source Resonances much more convenient for users. They won’t lose a link to a resonance or struggle to find what they need anymore. The app’s clear flow and design made it easy to use resonances, track progress or get personalised help.

The app for practitioners simplified and speeded up their work. No need to constantly move back and force from website to email, to messenger etc. The app provides practitioners with everything they need in one place, easy and fast.

The dashboard for programme advisors opened the whole new side of the app. Unlike competitors, SourceSound app could offer users not just to join a programme, but also ability to receive personal recommendations and programme adjustments from programme advisors.

The dashboard for the admin simplified a lot the admin’s work and saved her much time.

Other projects

Medical establishment management software

Medical monitoring app

Calendars widget for Mac

Crypto betting platform