Allm Inc., a Medical ICT company, based in Tokyo, Japan. The company reached out to me to provide them with my service as a Mobile UI/UX Designer for their application Join.

Join is a communication app for medical professionals. Join enables professionals to share clinical medical information to achieve greater diagnostic precision and better patient care. It enables fast collaboration and information sharing between medical personnel by allowing connections with PACS (picture archiving and communication systems); this supports viewing images/scans such as MRI, CT, etc.

Some of the problems that are needed to be addressed are the following:

• Some design styles or elements are inconsistent within the application
• Medical practitioners needed an avenue or a capaility to meet and collaorate as a group

Solution:

To solve the inconsistency problem, a design system, including a Shared Style Library and Component Library following Atomic Design principles, needs to be defined and managed.

The Shared Style Library contains reusable collections of properties that can easily be applied to elements in the design. These UI attributes or styles are (but are not limited to) colours, typography, icons and shadows.

The shared library also includes illustrations which follows a very uniform style. These are being used across different pages of the application.


Atomic Design is a methodology created by Brad Frost seeking direction on building interface design systems more deliberately and with explicit order and hierarchy.

In Join's design system, I used the four (out of five) distinct stages, with the first three modelled after their equivalents in the Chemistry world. Each stage builds on the previous, acting as an aggregate of items from the preceding stages.

• Atoms: Just like in Chemistry, atoms are the smallest building blocks in our system. We have buttons, inputs, labels and other small elements that get used throughout our design. Iconography fits in this category, whether it is a menu icon or avatar as they are small elements that come together to form the next stage – molecules.
• Molecules: In the molecule stage, we take our independent atomic design elements, each with their characteristics, style, format, and begin to bring them together into new groupings. For example, creating a list item.
• Organisms: As we enter the Organisms stage, our collections of atoms and molecules now become more complex than at the molecular level. Take, for instance, the 'Participants List Drawer' molecule.
• Templates: A template is where we begin to curate our organisms and other elements into a cohesive design.

Solution:

To address this problem, the team decided to add a Group Call functionality to the application. It is a prevalent and crucial feature to have for a messaging application. Since Join is specifically meant to be used by medical practitioners, the functionality should also keep in mind some of their specific needs in line with the User Story.

• As a medical professional, I want to be able to see who are the participants of the call
• As a medical professional, I want to see the designation (doctor, nurse, physician, etc.) of each participant in the call
• As a medical professional, I want to be able to record a call for future review and analysis

Some of the early stages of the wireframes are as follows


I also did some competitive analysis of other chat applications with the group call feature such as Facebook Messenger, WhatsApp, Skyoe, and Telegram. Through this, I compared different approaches to come up with the best possible solution.


Here are samples prototypes for the Group Call functionality, made using Figma.

Thank you for viewing!

Visit App Page