RueUXDesign

My Role

I joined Ribbon Blockchain as a full time UI/UX Designer, and my role in this project was to lead the end to end visual design and prototyping for its Web app. I helped Ribbon define their user experience since they were a small startup.


Responsibilities

UX Research

UI Design

Prototyping


Collaborators

Co-founder

UI/UX Designer

QA/QC Manager

Front end devs

Back end devs


The Problem

Data availability, the quality of data and how patient data is being stored is a crucial point to note when considering the quality of care patients receive in healthcare facilities. Poor system use, including inappropriate design of health information systems, causes difficulties in communication with patients and increased time spent by healthcare professionals in recording the necessary health information for medical records. Creating a standardized platform for collection of point of care and personal health related data was of utmost importance.

Research Process

First, we carried out interviews with prospective users to find out how they are affected by the inefficiencies in the healthcare sector and what they can be willing to do about it.


Key findings

  1. Users who visited healthcare facilities more often were more interested in providing information to update the system than those who weren’t frequent visitors.

  2. Users who had been affected by the lack of information in hospitals they visited were more eager to provide information to assist in updating the records.

  3. Users who didn’t frequent healthcare facilities were strongly for the option of being paid to assist in updating health records.

Having these in mind, we proceeded to carry out market research to understand the challenges users face when using survey apps and how we could improve in those aspects.


Key findings

  1. Users tend to answer questionnaires that have higher rewards

  2. Users answer questionnaires that relate more to them or their surroundings

User Persona

From these findings, we created a user persona to represent our target audience and guide us through making our design decisions.



Brainstorming

We came up with different solutions for the problem which we presented to the stakeholders and after series of meetings and discussions, we presented ideas that would benefit both the users and the business.


  • Since the stakeholders had already made it known that they wanted to introduce their own token as a means of payment, we had to make it as easy as possible for users to be able to carry out transactions with this token in the app


User Journey Map



User Flow

I created user flows for different tasks our user could perform using our app. I focused on simplifying the steps it would take our user to accomplish his task.


  • One important part of Ribbon was creating a system of patient data that can be easily and efficiently accessed by the required people and to achieve that, it would be best to pay users immediately after completing a task or questionnaire as this would encourage them to participate more often.


After understanding the user's needs and motivations, I set out to design the interface for the Ribbon web app.


The Solution

Ribbon web app is a platform for standardized collection of point of care and personal health related data from consented users: Community Health Workers, Healthcare Practitioners, and Patients who in turn earn token incentives which can be sent and swapped between users.

  • A healthcare incentives platform that aims to modify health and wellness behavior through rewardable tasks.



Low Fidelity Mock-ups



Mood Board

Before I started my high fidelity designs, I put together a mood board comprising of designs that communicate and convey the company’s message.



High Fidelity Mock-ups

Onboarding Screens

The onboarding process involved creation of an account with the user’s phone number, email address which was verified with an OTP and their name. The user then created a 4-digit pin which would be used for transaction confirmations.



Home Screen

On the Home Screen, the user can see his total balance, most recent activities and his most pending tasks.


Filling out Questionnaires to Earn Tokens

On the ‘Earn’ page, users can see their pending tasks and completed tasks and the amount of tokens applicable to each. On the to-do list, they can complete any task to earn tokens.


Sending Tokens or Other Crypto Currency

On the ‘Wallet’ screen, users can send, swap and receive AFYA or other cryptocurrencies.


Other Screens

Dark Mode Screens

Reflection

Working with Ribbon, I had to work very closely with the developers and this made me improve my collaboration skills. The most challenging part of this project was getting to work in a Web3 environment with little knowledge but members of the team provided important resources to help me get better.

Made in Vzy