My Role

Visual Design for ABA’s New Doctor Portal

As the sole ui/visual designer for the ABA’s doctor portal, my primary responsibility was to develop a cohesive and modern design system that could seamlessly support both the responsive desktop and mobile app versions. There were a couple of big requirements for this project. The first was that it had to adhere to a highly specific user flow which was based on medical and legal specifications. The second was that both platforms needed to function from the same React Native codebase, ensuring consistency and efficiency.

Process and Execution

Understanding the Existing System:

The first step was to analyze the previous portal to understand its functionality and identify pain points. This was followed by a comprehensive design audit to evaluate which elements were essential and where improvements could be made.

Research and Ideation:

After researching best practices for portal dashboards, I focused on solutions that effectively incorporate progress charts, as this was an essential feature to show a doctor's certification progress throughout the year. Once I had a clearer idea of the direction we needed to take, I started to wireframe the main pages like the dashboard, Moca Minute questions, Continuing Medical Education, and QI Activities. This phase also involved exploring typography and color schemes to establish a new visual language.

• Typography: Lato was selected for its clarity and versatility.

• Color Palette: The final palette was chosen by our focus group of doctors from three different palettes that I developed to ensure alignment with their preferences.

Dashboard and Navigation Concepts:

With foundational elements in place, I developed multiple design concepts for the dashboard and navigation. These concepts were shared with project stakeholders and the user group for feedback and approval. Once the direction was finalized, I proceeded with designing the remaining pages.

Prototyping and Handoff:

• Prototypes: Interactive prototypes for both desktop and mobile app versions were created to simulate user interactions and validate designs so that stakeholders and our focus group could provide their final input and approval.

• Developer Handoff: Once everything was approved, meetings were held with developers to discuss details and answer questions. The figma files were then prepared and delivered with detailed redline instructions to ensure a smooth and fast implementation.

Outcome

This process ensured the new portal’s design was modern, user-friendly, and aligned with the project’s technical requirements. The collaborative approach with stakeholders and user group helped create a visual system that not only met the functional needs but also resonated with doctors.