skip to Main Content

My UX / UI thoughts and design process in refurbishing
a medical marketing company’s desktop and mobile presence.


This project shows the development process of a detailed prototype of a new responsive website for a physician website development and marketing company.  The company needed to revamp their entire business model to account for new competition into their vertical (physician website design and marketing), as well as refresh their online presence, in both their own user experience and user interface design.

Go to the website

My Role

For this project, I was designated the Lead UI / UX designer.  My responsibilities included:

– implement and encourage a human-centered design approach to the entire UX/UI process

– inital research, affinity mapping and consolidating data into a coherent design direction

– persona research, in coordination with volunteering practice managers

– the user experience (UX) design (including personas, user-flow, and paper and low-fidelity prototyping)

– user interface (UI) design, including development of hi-fidelity prototypes

– deploy website using customized WordPress software


Affinity Diagram & Card Sorting

I started the user experience research process by brainstorming with key stakeholders and roughing out an affinity diagram.  I sketched out random notes and loosely organized thoughts, strategies, personas and user experience directions, based on the key stakeholders comments and feedback.

This was a mental exercise that was designed to flesh out key attributes of the UI / UX process.  On the notebook paper below I worked in sprint mode, writing down ideas and thoughts without worrying about details, spelling or other items that may hinder the thought process.

Affinity Diagram & Card Sorting


From the affinity diagramming and card sorting, I began to develop user personas.  I worked in conjunction with a number of physicians (MDs) and practice managers (PMs), of small and mid-sized physician groups, who were generous in helping me research and develop user personas.

It was extremely important to stay oriented with a human-centered design approach, not make assumptions and let the research subjects speak to their needs and perspectives.
The MDs and PMs provided great feedback and answers on (1) what their goals were in having a website, and (2) what pain points and frustrations they experienced in seeking out a new website design.  The persona research also began to reveal what solutions were most attractive to MDs and PMs, as a whole.

There were three (3) primary personas developed:

1. Practice (or Office) Managers – These are non-doctors in charge of office management and/or marketing.

User Persona 1

2.  Solo Physicians – Doctors who make most or all decisions affecting their marketing.  These doctors often have a staff of one or more administrative help.

user persona 2

3.  Physician Groups – This is the most difficult persona to develop, since most major marketing decisions – which includes website design and development for most offices – are made by committee.  There is usually one point person, but that voice can often be overtaken later in the decision making process.

user persona 3

Patient form module | website design for doctors

[/symple_box] [/symple_background]

Phone Ready

  1. Automatic mobile device detection.  The website is able to detect if a visitor is on the mobile site, and displays their mobile website instead of the regular website automatically. This way users don’t need to find a special mobile web domain name – the site figures it out for them.
  2. Easy navigation.   Big buttons that are easier to press to avoid the “fat finger” issue when tapping the screen.  Easy navigation to most important pages within one or two clicks.
  3. Click-to-call Phone Number.   Calling their office from a phone is easy. Visitors to their website are only a click away from connecting.
  4. Google Mobile-Friendly.   On April 21, 2015, Google started to use its new algorithm to identify and label websites that are mobile friendly. If your website is awarded the mobile friendly label, it will rank higher in the mobile search results.


Personalized and Search Engine Optimized Pages


More details …

The client’s site is built on industry-leading software: WordPress

Don’t get locked into proprietary software. I build on WordPress. I customize the platform like crazy and their site design is like no other.

Text and Image Editing

The client has the ability to add images, and they can edit it on-the-fly. Built-in image modification makes every picture a good fit.

Extremely Search Engine Friendly

The software is super search engine friendly. We took it a step further though, and installed various functions and plugins that proactively alerts Google and gang of any changes, cleans the site so that the engines have an easier time of crawling, etc.

Edit/Create New Menu Items

As their content changes, they are able to adjust your site navigation accordingly. The office can simply login and add/delete/edit main menu and drop-down menu items.

Blogging’s office can easily create search engine friendly blog posts.

Patient Portal Integration

I embedded the client’s shopping cart into the site, using Woocommerce.

  Back To Top