UX DESIGNER

Denton Family Dentistry (DFD) offers Pediatric, Adult, and Cosmetic Dental Services, serving a diverse population in a college town setting. Our team was tasked with creating a mobile-first & web redesign focused on improving site functionality, accessibility, and user experience without rebranding the existing style. The redesign aims to streamline the website’s user journey, improve navigation, and create a cohesive, accessible experience across devices that ensures ADA compliance for a wider range of users. 

Heuristic Analysis Results

Aesthetic & Design

  • Type used does not have enough visual weight to be read easily at that size.
  • Leading issues

  • Random changes between serif/sans serifs.

  • Very black.

Efficiency

  • Allows you to fill out information without even putting a request.
  • Missing insurance information
  • Mobile site is missing links and keeps you trapped on pages 
  • It is hard to find certain aspects of the dentistry: like payment options or information on their EXACT services.

Functionality

  • Accessible version of the site feels watered down and only features the option to zoom in which can be achieved by zooming in with the browser.
  • Needs to have a clear indication that your request for an appointment or contact request has actually been completed.

Help users recognize, diagnose, and recover from errors.

  • Can currently submit an appointment without selecting a date/time.
  • Does not allow you to fill out a reason for request.
  • Contact form: just requires you to fill out your contact info, does not require you to fill in a reason for contacting them.

 

User Control & Freedom.

  • Doesn't allow you to go back to pages, for example, you can only navigate back within your own search bar.

  • Cannot delete requests.

  • Spread out and confusing IA.

Match Between System & Real World.

  • The site's look does not run parallel with the reviews given by users.

Visibility of System Status

  • Needs to have a clear indication that your request for an appointment or contact request has actually been completed.

  • No loading status

  • Minimal page navigation, most pages do not showyou how you got the current page you are on

Consistency & Standards

  • Show/hide menu bar does not re-appear once click on

  • Patient education is a section on the main menu but is also used as content on the side bar on every page.

  • Different phone numbers.

Investigation

User Feedback

Users found the existing DFD website confusing and overly complex. Issues included dark aesthetics, excess links and tabs, and difficulty locating essential information. The primary goal of the redesign was to make the platform user-friendly, especially on mobile devices, where patients are more likely to engage.

Heuristic Evaluation

A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the "heuristics"). Scored 1-10, our testing found that the current UI of the practice lacked clarity, consistency, efficiency and functionality.

Personas

Information Architecture

- Unnecessary use of links and hyperlinks

- No ADA information/ No Language Preference

- Information about insurance is not easily accessible

Cons:

We recorded the structure of the current site to understand the site's intended user flows, and where pain points occurred with users. The feedback we found during this process was:

Pros:

- Sufficient Data to work off of and simplify

- Educational search bar is always accessible

- Contact information easily accessible

- Social media presence

Current Navigation

Card Sort Results

Card Sort Analysis

In our preliminary research, users found the initial navigation to be frustrating and confusing when attempting to find specific information. We conducted Card Sort testing of the navigation structure to find user's preferred organization. In our testing of this new navigation, users were 87% successful in completing 8 tasks with the new structure.

New Information Architecture

Initial Sketches

Wireframes

Low-Fidelity Sketches

Our team began iterating on preliminary sketches on both mobile and web prototypes. We focused on identifying the elements that would be most commonly used, like booking links and displaying services offered, to be prioritized in the hierarchy of the screens.

Mobile Prototype Iterations

Mobile V1 used various elements that our team thought presented an approachable and clean design to contrast their previous dark and confusing site. We chose to focus on using rounded forms and rounded icons/ illustrations to play into the family-friendly aspect of the company, and used interaction animations like loading gifs and overlay features. Here we outlined the task flow for a user to book an appointment using our mobile prototype.

V1 Designs

We started incorporating color and style into the V1 wireframes, emphasizing large buttons and accessible text for ADA compliance. We chose typefaces like Raleway for headers and Helvetica Neue for body text to enhance legibility. From our initial V1, we found that our design needed more contrast for ADA readability standards, and focused on trying to maintain a fair amount of white space in all of our designs.

Wireframes

Our story

This is text element. Double click this element to edit text. You can change size, position and all other parameters including background, border and many more.

What makes us stand out?

Example

At the beginning of my design process I created wireframes for testing purposes.

Guiding Questions

  • Why was it useful to do this?

  • What kind of wireframes did you make?

  • Low fidelity or high fidelity?

  • What tool did you use for this?

  • Did you use them for testing?

  • How many iterations did you have?

User Testing

Our story

Before launching the product, I did a testing round in order to reveal possible usability problems.

Guiding Questions

  • What were you aiming to find out with the user tests?

  • At which phase of the project did you test?

  • Who were the test subjects? Did they meet the target group?

  • What method did you use for testing? (Remote, moderated, etc?)

  • What user insights did you get from the tests?

  • How these user insights impacted the design or the next version?

UI Designs

This is text element. Double click this element to edit text. You can change size, position and all other parameters including background, border and many more.

READ MORE ⟶

What makes us stand out?

This is text element. Double click this element to edit text. You can change size, position and all other parameters including background, border and many more.

READ MORE ⟶

Conclusions

10+

This is text element. Double click this element to edit text.

Years of experience

500+

This is text element. Double click this element to edit text.

Served clients

30+

This is text element. Double click this element to edit text.

Partnership

This is text element. Double click this element to edit text. You can change size, position and all other parameters including background, border and many more. You can also enable animation for them so they will appear with selected effect on the page.

Conclusions