A laptop screen featuring an icon of a doctor and the laptop resting on an orange background.

Project Disciplines

01
Research
02
UX/UI Design
03
Web Design
04
Strategy
A sign that says "Pri-Med" at a convention.

Web Design for Leaders in Primary Care Education

Pri-Med is a leader in CME and primary education. The team helps medical students deliver better patient outcomes with their courses and in-person events.

Pri-Med came to ArtVersion to help refresh their website with a more modern design language, and robust backend on the development side. ArtVersion helped develop their website to be highly scalable and optimized for the extensive data and backend intricacies, including medical courses, training, registration for in-person and virtual conferences, and much more.

The website also needed to possess the capabilities to showcase dynamic information which was achieved with APIs to demonstrate events and calendars, and custom coding for mapping expos and conference events. The website was also optimized for pathways that properly led to course registration and conferences, contextual information incorporation, and more. Additionally, the team took extra care to develop a visual hierarchy and categorization for each course on the website sorted by topic, faculty, and course formatting (visual and audible).

A person holding a tablet showing images of people working on laptops.

Professional and Modern Design Language

The overall design aesthetic was focused on a professional look and feel to align with the medical and education industry.

The design team utilized a color palette rich with blue hues, chosen for their association with tranquility and trust, which are vital in healthcare and education contexts. Gradients were also used throughout to add depth and interest. Every design detail was purposeful, and ArtVersion paid particular attention to the interactivity and functionality of the website. Custom animations for displaying statistics and data infographics were integrated to provide visual cues that engage users while making complex information more digestible. Although the website was rich with data and content for each course and event, ArtVersion made sure to strike the perfect balance between information sharing to avoid causing cognitive overload to users, by balancing out the content with rich, dynamic visuals in a tightly cohesive, user-centric design ecosystem.

A home page web design featuring a circular image of people attending an exhibit.
A UI design for a team page featuring three different team members and a quote above their pictures.
A desktop web design featuring a background image of a person at an exhibit.
A large blue balloon with a logo on it.
Four people talking next to a large exhibition sign.

Color Palette

ArtVersion carefully chose the primary color palette for Pri-Med's website redesign, focusing on blue hues to evoke feelings of tranquility, serenity, and confidence—emotions that are highly desirable in the medical and educational contexts. Blue is often chosen for healthcare and educational platforms because it is associated with professionalism and reliability. To diversify the visual experience and prevent a monochromatic look, ArtVersion introduced accent colors for visual breaks and to highlighted important features and content, aiding in user navigation and engagement.

Burgundy
#9F1D51
Green
#88AD64
Deep Turquoise
#00969F
Soft Blue
#5091CD
Orange
#F36C45
Navy
#003878
A medical symbol.
The letter "A" in uppercase and lowercase in Arial Regular font.
Arial
Regular
The letter "A" in uppercase and lowercase in Arial Bold font.
Arial
Bold

Typography

Arial conveyed readability and a neutral aesthetic which was perfect for a website based on education and learning. The use of Arial supports the website’s goal to enable easy learning and comprehension. Its straightforward and familiar look also helped minimize distractions, allowing users to focus on the content itself rather than the font style. Additionally, this helped to emphasize user-friendly navigation and accessibility.

A group of people exploring an exhibition.

Iconography

ArtVersion also designed custom icons across the website to function as visual cues.

These icons were incorporated across the website to break up content-heavy areas into bite-size blurbs, for microinteractions, interactive elements, and much more. Additionally, the team designed each to be universally recognized so that the users would understand the visual representation behind each icon. This design direction was important to ensure that there was usability and accessibility across the user experience.

A phone icon.
A doctor icon.
A data graph icon.
A presentation icon.
A laptop icon.
A clock icon.
A clipboard icon.
A mail icon.
A exhibition banner hanging from the ceiling featuring an image of people exploring an exhibit.

Marketing and Tangible Design

With the website now in place and launched into the digital world, ArtVersion also helped the Pri-Med team with swag and collateral items.

As Pri-Med helps medical students become involved in expos and in-person events, they needed swag items to provide their guests during their events. ArtVersion focused on optimizing Pri-Med’s logo to ensure it was suitable for a variety of merchandise items. This optimization process was essential to maintain high-quality reproduction across different materials and scales, from small items like pens and badges to larger ones like banners and apparel. The goal was to ensure that each piece of merchandise reflected Pri-Med’s professional image and standards, enhancing brand recognition and cohesion at every touchpoint.

The Result

The collaboration between Pri-Med and ArtVersion resulted in a website that greatly enhanced the educational experience for medical students. The newly designed platform made it easier for students to access courses and events crucial for advancing their careers in primary care. With the improved navigation and user interface, students could quickly locate specific courses, register for events, and engage with resources tailored to their educational needs. The website refresh also placed a spotlight on Pri-Med’s position as a pivotal player in medical education, contributing to the overall improvement of primary care services.