OCFP website homepage redesign

OCFP website homepage redesign

Project overview

A homepage redesign for the Ontario College of Family Physicians (OCFP) home page to make it look modern and less busy so that it will be more efficient for users to find information and for the OCFP to communicate its advocacy for family physicians in Ontario.

My role

Information architect.

Responsibilities

Wireframing, information architect, digital accessibility specialist.

Project duration

1 week

Before

After

Project overview

A homepage redesign for the Ontario College of Family Physicians (OCFP) home page to make it look modern and less busy so that it will be more efficient for users to find information and for the OCFP to communicate its advocacy for family physicians in Ontario.

My role

Information architect.

Responsibilities

Wireframing, information architect, digital accessibility specialist.

Project duration

1 week

Before

After

Problem

The OCFP needed a redesign for it was not versatile for adding sections to accommodate new, timely content such as when hot topics emerged; inefficient for users to find the diverse information they needed; and the majority of screen real estate above the fold was not optimally used to communicate OCFP advocacy and campaigns.

Goal

Design a new, flexible home page enabling OCFP to communicate its advocacy and continuing education materials so that its diverse audiences can quickly find the information they need.

Understanding the user

User research

I balanced corporate strategy with audience needs and pain points gleaned from discussions with OCFP staff to create a list of primary user groups and “must have/need to know” content blocks to display on the homepage.

User research data was also gleaned from Google and social media analytics.

Primary user groups

  • Early-career family physicians
  • Mid-to-late career family physicians
  • Medical students in residence
  • Retired family physicians.

Understanding the user

User research

I balanced corporate strategy with audience needs and pain points gleaned from discussions with OCFP staff to create a list of primary user groups and “must have/need to know” content blocks to display on the homepage.

User research data was also gleaned from Google and social media analytics.

Primary user groups

  • Early-career family physicians
  • Mid-to-late career family physicians
  • Medical students in residence
  • Retired family physicians.

Pain points

Time

Family physicians are busy and must stay updated on public health guidances and continuing education. Surfing a website trying to find information can be time-consuming and frustrating.

Information architecture

The inefficient use of screen real estate and use of carousels made it difficult for users to find what they are looking for.

Limited use of images

The template created a waterfall of text effect making it difficult to guide users’ eyes and segment types of content.

Pain points

Time

Family physicians are busy and must stay updated on public health guidances and continuing education. Surfing a website trying to find information can be time-consuming and frustrating.

Information architecture

The inefficient use of screen real estate and use of carousels made it difficult for users to find what they are looking for.

Limited use of images

The template created a waterfall of text effect making it difficult to guide users’ eyes and segment types of content.

Starting the design

Paper wireframes

I sketched wireframes to explore initial ideas on how to best present the variety of content that needed to be on the homepage. My primary focus was centred on unburying content to reduce mouse clicks as much as possible.

Pencil sketch of a web page
Pencil sketch of a web page
Pencil sketch of a web page

Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

I presented two initial mockups for discussion between the director and visual designer as a starting point for the final template.

Digital wireframe of a web page
Digital wireframe of a web page

Refining the design

Refining the design

High-fidelity mockup

The resulting template designed by the vendor produced a website that looks modern and less busy.

It also:

  • Enabled various areas of the homepage to be versatile to new, timely content when needed.
  • “New and Trending” section for timely topics (later reworded to “Hot topics”).
  • Prime real estate at the top of the page dedicated to one hot topic for a short time.
  • Unburied upcoming events in order to further promote OCFP’s commitment to advocacy for family physicians.
  • Made access for family physicians to report their continuing education credits more prominent.

High-fidelity mockup

The resulting template designed by the vendor produced a website that looks modern and less busy.

It also:

  • Enabled various areas of the homepage to be versatile to new, timely content when needed.
  • “New and Trending” section for timely topics (later reworded to “Hot topics”).
  • Prime real estate at the top of the page dedicated to one hot topic for a short time.
  • Unburied upcoming events in order to further promote OCFP’s commitment to advocacy for family physicians.
  • Made access for family physicians to report their continuing education credits more prominent.

Accessibility considerations

1

All images coded with alternative text.

2

All links to be written with descriptive text to make it easier for users scanning around.

3

All types of content to have high colour contrast.

Accessibility considerations

1

All images coded with alternative text.

2

All links to be written with descriptive text to make it easier for users scanning around.

3

All types of content to have high colour contrast.

Takeaways

Takeaways

Impact

  • No negative feedback from audience segments
  • OCFP staff excited about the new modern, less busy design.
  • OCFP staff excited about having ownership of their own sections.

What I learned

  • New information about the needs of every audience segment which I used in proceeding projects.
  • Groups of content do not necessarily need to be placed side-by-side as users, in general, are used to “long scrolling” and large spaces make it even easier for users to scan.

Next steps

1

Roll out new design style to rest of website.

2

Conduct further user research to uncover potential new areas of user needs.

Next steps

1

Roll out new design style to rest of website.

2

Conduct further user research to uncover potential new areas of user needs.