Qlark

The qlark platform is a community-driven infrastructure for orthodontists that helps them share their expertise and collaborate with each other. It allows them to instantly learn and share skills and techniques from anywhere at any time, bringing collaborative care delivery to their practices and patient care.

Main problem

Knowledge Sharing Gap: Doctors rely on personal experience rather than shared knowledge and best practices.

Outdated Systems: Existing systems prioritize business management over patient care, limiting advanced and efficient treatment options.

Main goal

qlark was an early-stage start-up, and the goal was to find their product market fit and develop a 0→1 product for all touch-points by creating a valuable and intuitive end-to-end customer experience.

01.

My role

Being the only designer on a project means UX/UI, interaction, user reserch, web, animation, brand, emails, design system, hand-off, leadership, pm, strategy, being in the mix of everything and try to make it delightful.

01.

My role

Being the only designer on a project means UX/UI, interaction, user reserch, web, animation, brand, emails, design system, hand-off, leadership, pm, strategy, being in the mix of everything and try to make it delightful.

01.

My role

Being the only designer on a project means strategy, UX, UI, visual, interaction, web, brand, emails, design system, process, hand-off, leadership, pm, team building, being in the mix of everything and try to make it delightful.

02.

Hypothesis

By transforming real-life patient records data into a learning module, we can help doctors overcome their skills deficit and improve patient care by tapping into the power of global collaboration and other doctors' expertise.

02.

Hypothesis

By transforming real-life patient records data into a learning module, we can help doctors overcome their skills deficit and improve patient care by tapping into the power of global collaboration and other doctors' expertise.

02.

Hypothesis

By transforming real-life patient records data into a learning module, we can help doctors overcome their skills deficit and improve patient care by tapping into the power of global collaboration and other doctors' expertise.

03.

Challenge

The platform was in active use while we iterated quickly and made changes. We needed the design team and process to support this. Changes should be moderate to avoid making our users relearn the product.

03.

Challenge

The platform was in active use while we iterated quickly and made changes. We needed the design team and process to support this. Changes should be moderate to avoid making our users relearn the product.

03.

Challenge

The platform was in active use while we iterated quickly and made changes. We needed the design team and process to support this. Changes should be moderate to avoid making our users relearn the product. No changes for the sake of changes.

Our team

1 product manager, 1 product designer (me), 6 engineers, and 2 stakeholders.

Our team

1 product manager, 1 product designer (me), 6 engineers, and 2 stakeholders.

Our team

1 product manager, 1 product designer (me), 6 engineers, and 2 stakeholders.

Timeline

May 2019 – Feb 2022, leading all design efforts from ideation to delivery.

Timeline

May 2019 – Feb 2022, leading all design efforts from ideation to delivery.

Timeline

May 2019 – Feb 2022, leading all design efforts from ideation to delivery.

Tools used

Sketch and InVision in the beginning, then Figma/Figjam starting Jan'20.

Tools used

Sketch and InVision in the beginning, then Figma/Figjam starting Jan'20.

Tools used

Sketch and InVision in the beginning, then Figma/Figjam starting Jan'20.

Focus on one feature only: The platform offered various features supporting education, collaboration, and communication. This case study focuses on the qlark Case™, the core feature of the platform.

What is qlark case™?

Core feature of the platform, transforming patient treatment records into a treatment planning tool or learning experience.

Originally a simple patient record, it has evolved to support collaboration, analytics, and multiple time points.

Improves simplicity while highlighting the most relevant information.

Patented Technology: Accredited by the American Dental Association (ADA).

A lot of data to display

Orthodontic cases contain extensive data, including visual records, appointment details, tools, medical history, all of which are essential learning content.

A lot of data to display

Orthodontic cases contain extensive data, including visual records, appointment details, tools, medical history, all of which are essential learning content.

A lot of data to display

Orthodontic cases contain extensive data, including visual records, appointment details, tools, medical history, all of which are essential learning content.

Rigid, non-modular system

Qlark Case™ had to be modular and cost-efficient, with each module being easily modified, replaced, or swapped to support incremental implementation.

Non-modular system

Qlark Case™ had to be modular and cost-efficient, with each module being easily modified, replaced, or swapped to support incremental implementation.

Non-modular system

Qlark Case™ had to be modular and cost-efficient, with each module being easily modified, replaced, or swapped to support incremental implementation.

Looking for product market fit

Qlark was a startup in its early stages, focusing on understanding user needs and improving the product through data and feedback.

Looking for product market fit

Qlark was a startup in its early stages, focusing on understanding user needs and improving the product through data and feedback.

Looking for product market fit

Qlark was a startup in its early stages, focusing on understanding user needs and improving the product through data and feedback.

Process and project stages

Process and project stages

Process and project stages

Design Sprints:

2-week design sprints with weekly client meetings to showcase mockups and gather feedback.

Design Sprints:

2-week design sprints with weekly client meetings to showcase mockups and gather feedback.

Design Sprints:

2-week design sprints with weekly client meetings to showcase mockups and gather feedback.

Iteration & Testing:

Reviewed, iterated, and tested prototypes, leading to early proof-of-concept implementations.

Iteration & Testing:

Reviewed, iterated, and tested prototypes, leading to early proof-of-concept implementations.

Iteration & Testing:

Reviewed, iterated, and tested prototypes, leading to early proof-of-concept implementations.

Non-linear Process:

The stages were interconnected and not linear throughout the project.

Non-linear Process:

The stages were interconnected and not linear throughout the project.

Non-linear Process:

The stages were interconnected and not linear throughout the project.

Discover

User and market research, setting product goals

1 month

Discover

User and market research, setting product goals

1 month

Define

Inspiration and creating unified design language

2 months

Define

Inspiration and creating unified design language

2 months

Design

→ Reusable widgets & modules
→ Rebranding
→ Grid and layout system
→ Timeline and navigation
→ Flexible modular system
→ Mobile version

~20 months, iterative process

Document

Guidelines and code

2 months

Document

Guidelines and code

2 months

Discover phase

Discover phase

Discover phase

Phase Goal:

Conduct a deep dive into the product to understand all platform use cases for immediate improvements to drive business growth.

Phase Goal:

Conduct a deep dive into the product to understand all platform use cases for immediate improvements to drive business growth.

Phase Goal:

Conduct a deep dive into the product to understand all platform use cases for immediate improvements to drive business growth.

Phase Results:

Gained in-depth knowledge of orthodontic treatment principles, doctors' practices, and legacy systems.

Phase Results:

Gained in-depth knowledge of orthodontic treatment principles, doctors' practices, and legacy systems.

Phase Results:

Gained in-depth knowledge of orthodontic treatment principles, doctors' practices, and legacy systems.

Te first version of Qlark Case™ before I joined the team in May 2019.

Define phase

Define phase

Define phase

Initial Focus:

Addressed platform inconsistency due to the absence of a designer in the previous team.

Initial Focus:

Addressed platform inconsistency due to the absence of a designer in the previous team.

Initial Focus:

Addressed platform inconsistency due to the absence of a designer in the previous team.

Inventory Check:

Conducted an inventory check to consolidate and reduce components.

Inventory Check:

Conducted an inventory check to consolidate and reduce components.

Inventory Check:

Conducted an inventory check to consolidate and reduce components.

Style Guide Creation:

Created a simplified style guide as a baseline for defining and evolving design goals.

Style Guide Creation:

Created a simplified style guide as a baseline for defining and evolving design goals.

Style Guide Creation:

Created a simplified style guide as a baseline for defining and evolving design goals.

Dark mode is our default mode

Rationale for Dark Mode

Dark mode was essential to maintain the association with doctors viewing x-rays in dark rooms.

Rationale for Dark Mode

Dark mode was essential to maintain the association with doctors viewing x-rays in dark rooms.

Rationale for Dark Mode

Dark mode was essential to maintain the association with doctors viewing x-rays in dark rooms.

Color & Hierarchy:

A subtle hint of blue, inspired by x-rays, was used alongside varying color intensities to create a clear information hierarchy.

Color & Hierarchy:

A subtle hint of blue, inspired by x-rays, was used alongside varying color intensities to create a clear information hierarchy.

Color & Hierarchy:

A subtle hint of blue, inspired by x-rays, was used alongside varying color intensities to create a clear information hierarchy.

Enhanced Navigation:

Lighter objects indicate proximity on the screen, enhancing ease of navigation.

Enhanced Navigation:

Lighter objects indicate proximity on the screen, enhancing ease of navigation.

Enhanced Navigation:

Lighter objects indicate proximity on the screen, enhancing ease of navigation.

Main changes

Design phase

Design phase

Design phase

Took a step-by-step approach, constantly reevaluating progress and adjusting as needed.

This iterative process helped explore all possibilities and achieve the best outcome for the project.

Reusable widgets and components

Introduced personalized widgets to focus on relevant information and improve user experience across different user types (doctors, staff, etc.).

widget types

Content Discoverability:

Highlight trending and popular cases, spaces, courses, or hashtags.

Content Discoverability:

Highlight trending and popular cases, spaces, courses, or hashtags.

Content Discoverability:

Highlight trending and popular cases, spaces, courses, or hashtags.

Context & Information:

Show related cases, courses, and spaces to provide more context on a topic.

Context & Information:

Show related cases, courses, and spaces to provide more context on a topic.

Context & Information:

Show related cases, courses, and spaces to provide more context on a topic.

User Interaction:

Provide helpful tips, platform guidelines, and advanced feature overviews.

User Interaction:

Provide helpful tips, platform guidelines, and advanced feature overviews.

User Interaction:

Provide helpful tips, platform guidelines, and advanced feature overviews.

Sponsored Content:

Promote sponsored tools, courses, or spaces.

Sponsored Content:

Promote sponsored tools, courses, or spaces.

Sponsored Content:

Promote sponsored tools, courses, or spaces.

Main changes

Treatment timeline and navigation

Enhanced Navigation & Patient Record Viewer:

Improved navigation and the patient record viewer by adding multiple time points and phases.

Enhanced Navigation & Patient Record Viewer:

Improved navigation and the patient record viewer by adding multiple time points and phases.

Enhanced Navigation & Patient Record Viewer:

Improved navigation and the patient record viewer by adding multiple time points and phases.

Flexible Treatment Data:

Made treatment data more flexible, allowing doctors to view it in various ways. The timeline displays detailed information about each appointment, including doctor’s notes, tool modifications, appliance replacements, emergency visits, referrals, and more.

Flexible Treatment Data:

Made treatment data more flexible, allowing doctors to view it in various ways. The timeline displays detailed information about each appointment, including doctor’s notes, tool modifications, appliance replacements, emergency visits, referrals, and more.

Flexible Treatment Data:

Made treatment data more flexible, allowing doctors to view it in various ways. The timeline displays detailed information about each appointment, including doctor’s notes, tool modifications, appliance replacements, emergency visits, referrals, and more.

Main changes

Flexible modular system

Extended Qlark Case™ for Collaboration & Education:

Enabled doctors to collaborate on cases and use them as modules for educational content. Doctors could create courses, lectures, and events, insert patient cases, embed CE credits, and monetize their expertise.

Extended Qlark Case™ for Collaboration & Education:

Enabled doctors to collaborate on cases and use them as modules for educational content. Doctors could create courses, lectures, and events, insert patient cases, embed CE credits, and monetize their expertise.

Extended Qlark Case™ for Collaboration & Education:

Enabled doctors to collaborate on cases and use them as modules for educational content. Doctors could create courses, lectures, and events, insert patient cases, embed CE credits, and monetize their expertise.

Modular Approach & Integration:

Every element on the platform became interchangeable, allowing any combination of modules to be used seamlessly.

Modular Approach & Integration:

Every element on the platform became interchangeable, allowing any combination of modules to be used seamlessly.

Modular Approach & Integration:

Every element on the platform became interchangeable, allowing any combination of modules to be used seamlessly.

Mobile version 2019–2020

Initially aimed to include all features, but due to limited mobile space, we shifted to a more concise and focused version of the app.

Mobile version 2021

Improved user experience by addressing workspace limitations and scrollable interaction glitches.

Key Changes:

Moved important patient info to the header for better visibility and hid the main menu by default. Replaced drop-down buttons with horizontally scrollable button sets. Fixed the horizontally scrollable timeline at the bottom of the screen.

Key Changes:

Moved important patient info to the header for better visibility and hid the main menu by default. Replaced drop-down buttons with horizontally scrollable button sets. Fixed the horizontally scrollable timeline at the bottom of the screen.

Key Changes:

Moved important patient info to the header for better visibility and hid the main menu by default. Replaced drop-down buttons with horizontally scrollable button sets. Fixed the horizontally scrollable timeline at the bottom of the screen.

Mobile version 2022

Key Changes:

Offered a simplified mobile version with essential features. Used tap and tap-and-hold interactions instead of scrolling where possible. Embraced multi-step, multi-page flows for complex tasks, as two-click solutions may not be feasible.

Key Changes:

Offered a simplified mobile version with essential features. Used tap and tap-and-hold interactions instead of scrolling where possible. Embraced multi-step, multi-page flows for complex tasks, as two-click solutions may not be feasible.

Key Changes:

Offered a simplified mobile version with essential features. Used tap and tap-and-hold interactions instead of scrolling where possible. Embraced multi-step, multi-page flows for complex tasks, as two-click solutions may not be feasible.

Documentation

Documentation

Documentation

Documentation Initiative:

Identified the lack of proper documentation and created a single source of truth for the project's processes and functions.

Documentation Initiative:

Identified the lack of proper documentation and created a single source of truth for the project's processes and functions.

Documentation Initiative:

Identified the lack of proper documentation and created a single source of truth for the project's processes and functions.

Tool Transition:

Initially used Confluence, then transitioned to Coda for better documentation management.

Tool Transition:

Initially used Confluence, then transitioned to Coda for better documentation management.

Tool Transition:

Initially used Confluence, then transitioned to Coda for better documentation management.

Confluence and Coda

Comprehensive Feature Documentation:

Documented the logic, constraints, and limitations of every feature on the qlark platform for a clear understanding of functionality.

Comprehensive Feature Documentation:

Documented the logic, constraints, and limitations of every feature on the qlark platform for a clear understanding of functionality.

Comprehensive Feature Documentation:

Documented the logic, constraints, and limitations of every feature on the qlark platform for a clear understanding of functionality.

Collaborative Process:

All team members contributed to the documentation, with a review process in place to ensure accuracy.

Collaborative Process:

All team members contributed to the documentation, with a review process in place to ensure accuracy.

Collaborative Process:

All team members contributed to the documentation, with a review process in place to ensure accuracy.

Zeplin

Design Handoff Process:

Established a system for handing off design files via Zeplin, organizing them in style guides, and using a commenting system for better collaboration with the engineering team.

Design Handoff Process:

Established a system for handing off design files via Zeplin, organizing them in style guides, and using a commenting system for better collaboration with the engineering team.

Design Handoff Process:

Established a system for handing off design files via Zeplin, organizing them in style guides, and using a commenting system for better collaboration with the engineering team.

Streamlined Workflow:

Prevented Figma file clutter and ensured only finalized designs were implemented.

Streamlined Workflow:

Prevented Figma file clutter and ensured only finalized designs were implemented.

Streamlined Workflow:

Prevented Figma file clutter and ensured only finalized designs were implemented.

Results

Results

Results

10.000+

verified orthodontists using the platform daily

10.000+

verified orthodontists using the platform daily

10.000+

verified orthodontists using the platform daily

100k+

submitted cases from doctors across the globe

100k+

submitted cases from doctors across the globe

100k+

submitted cases from doctors across the globe

4

direct integrations with leading EMR providers

4

direct integrations with leading EMR providers

4

direct integrations with leading EMR providers

1.000+

courses and lectures from leading dental educators

1.000+

courses and lectures from leading dental educators

1.000+

courses and lectures from leading dental educators

50k+

learning hours from top practicing doctors

50k+

learning hours from top practicing doctors

50k+

learning hours from top practicing doctors

2nd biggest

virtual orthodontic conference — SAO 2020.

2nd biggest

virtual orthodontic conference — SAO 2020.

2nd biggest

virtual orthodontic conference — SAO 2020.

Want to get in touch?
Feel free to drop me a line or download my resume.

© 2024 Xenia Marova

Want to get in touch?
Feel free to drop me a line or download my resume.

© 2024 Xenia Marova

Want to get in touch?
Feel free to drop me a line or download my resume.

© 2024 Xenia Marova