Overview

Challenge

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. The stakeholders indicated that they believed a subscription-based model for website design, development and maintenance is now preferable to their then one-time design and development model.

Solution

In addition to stakeholder research, I conducted in-person and remote user interviews, as well as reviewed customer service tickets and requests to uncover what preferences users had in hiring and retaining a web design company. I developed multiple wireframe and prototypes through the UI concept stage and requested feedback on the designs from 5 user volunteers. I assisted in organizing and leading usability tests on hi-fidelity mockups to determine if the proposed user journeys met the needs and desires of the users, as well as to validate the stakeholders’ vision of the site.

Results

User research indicated that users desired a cleaner look-and-feel to the site, and did prefer (and expected) a subscription-based website design, development and maintenance plan. The site is fully responsive, highly secure, and has a user-focused platform, which allows the visitor to intuitively view the services and make a purchase, with minimal effort. The site boasts a simplistic UI—complete with sleek tile layouts and streamlined navigation—highlighting the most relevant and popular products.

visit the website

The Challenge

The challenge was to make this company’s website stand out in an increasingly saturated market – medical marketing. The initial goal was to revamp the site’s information architecture, so as to provide a more clear summary of what the client’s site offered (the pre-existing site was very cluttered), as well as provide a distinct and intuitive path to generating a purchase.

challenge

UX / UI designer Scott Sanok Delray Beach Boca Raton FL

My Role

For this project, I was designated the Lead User Experience (UX) and User Interface (UI) designer. My responsibilities included:

– implement and encourage a human-centered design approach to the entire UX/UI process
– initial research, affinity mapping and consolidating data into a coherent information architecture and design direction
– user research, in coordination with volunteering practice managers, and creation of user personas
– 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 mobile and desktop website using WordPress as the underlying software

User Research

Affinity Diagram & Card Sorting

I started the user experience research process with a team of UX researchers and by brainstorming with key stakeholders and roughing out an affinity diagram. Our small UX team 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, as well as practical, exercise that was designed to flesh out key attributes of the UX / UI process. Working in sprint mode, we wrote down ideas and thoughts without worrying about details, spelling or other items that may hinder the thought process.

develop user personas

Personas

I then particpated in conducting a number of field studies/user interviews with existing clients. The interviewees included physicians (MDs) and practice managers (PMs), of small and mid-sized physician groups.

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.

There were three (3) primary personas developed

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

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

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.

Card Sorting

With the personas worked out, I refined our thoughts by taking the affinity diagramming notes and personas, and created a card sort layout with selected volunteers. Here, I further defined what the needs are, what pain points exist and some initial thoughts on solutions. There are also thoughts on what call-to-actions should exist, as well what content should probably be on the website.

The client already had a great deal of great content, and it was determined that it will be important to showcase that content for inbound marketing purposes. In the card sorting phase, it looks like the content should have a prominent place in the site layout, as it will cultivate the persona journey.

unique

Unique Value Proposition

It was at this point that a unique value proposition (UVP) was developed. Together with the stakeholders, it was determined that a design and maintenance subscription model, with two pricing tiers, was most desired by our personas and represented the client’s UVP.

The UVP fit the personas’ needs by meeting these criteria: 1) pricing was modest and flexible, 2) the model alleviated maintenance and support headaches for persona and persona’s in-house staff, and 3) there are no long-term contracts.

Information Architecture (IA)

IA is the foundation of efficient user experience (UX) as well as user interface (UI). Here is where I started blending the concepts of UX and UI, since the information on the site needs to be organized visually.

The company possessed alot of content, including detailed parent services and child services, as well as blog articles, landing pages, ebooks, infographics and testimonials.

I reviewed the (above) affinity mapping information, the expected user journey and created an initial information architect layout. This IA layout was tweaked and finetuned after MD and PM testing. The resulting IA layout was then used as the framework to begin wireframing and prototyping. While working through the IA process, it was critical to always keep in mind the goals of each persona, and what users expect from the website or mobile application.

This was also a phase where we could see what content may be missing that would help the persona journey along. This was also helpful to see what content, if any, was now obsolete and no longer needed and may confuse the persona’s journey.

The mind mapping session’s goal was to further sort out the information gleaned from the affinity mapping and card sorting sessions, and establish a better content inventory, placing information in what will best represent personas’ expectations and persona journey.

It was also here where we began to see which IA structure would be most effective (Hierarchical, Sequential or Matrix) and it was determined that a hybrid model would work best with the targeted personas – Matrix, allowing users to make meaningful choices on content and quickly drill down to their goal).

(update: I am enjoying Adobe XD more and more. It remains minimalistic, but is packed with little time-saving features that can enhance and allow me to evolve the wireframe quickly to low and then high-fidelity mockups)

Information Architecture (IA)

Wireframing & Prototyping

The first round of wireframe/prototype iterations I started developing a user journey, site layout principles, and as I developed further versions, I started to flesh out some style guidelines. The wireframes were developed using Adobe XD, to allow for a somewhat interactive experience. Paper prototypes were passed on, as the use was limited in this instant. In addition, I felt that the Card Sorting exercises, along with the creation of the Information Architecture layout was sufficent to jump to a mid-fidelity prototype.

An Adobe XD wireframe prototype was also helpful in User Testing, as I was able to send a private link to MDs and PMs, who were kind enough to volunteer in user testing.

The link for the final mid-fidelity wireframe/prototype can be seen here.

Design System & Style Guide

At this point, the site’s style guide was established. The final round of lo/mid-fidelity prototypes incorporated some of the style guide previously, but here it was finalized.

At this stage, I was involved in establishing the style guide for colors, selected the typography and worked on creating the site, using WordPress and Woocommerce as the underlying software. Images were also researched and we used an internal mood board to store and catalog images for the site.

It was important to retain consistency for certain site elements (call-to-actions, navigation, phone, chatroom prompt, etc.) throughout the final site design. It was, however, important to revisit the site with our volunteers for additional feedback and insight as to their user-experience, and there were some tweaks and adjustents made, based on such feedback.

The refurbished site can be seen here.

Thanks for checking out my process :)