The Ontario Plumbing Inspectors Association
- Time Period: Oct 2022-Jan 2023
- My Role: Web Designer
About the Project
The Ontario Plumbing Inspectors Association Inc. (OPIA) is a non profit organization dedicated to protecting the health and well being of the Province of Ontario through safe plumbing since 1920.
The old site was built about ten years ago using Joomla. There was not so much design on it. The logo doesn’t have a transparent background. A lot of text content needs to be updated. The size of the image banner in the footer section is not consistent.
Project Goals
Redesign the entire website using a new platform to have a clean looking and mobile friendly designs
Improve usability by organizing the architecture and implementing functions for the site
Create a style tile includes wireframes and mockups that would guide the visual design of the site
Research and Investigation
Have meetings with clients to gain insight from the company and understand users’ painpoints.
"There are so many links on the homepage. It is hard for me to find what I need."
Need better organization
A sitemap is needed in order to re-organize the structure of the site. Important buttons and links need to stand out.
"Texts are so small and crowded, I can't read."
Adjust font size
Use margin and padding to give enough space between sections. For articles, choose an easy-to-read font with a readable size. Line height is important as well.
"Our main users are plumbers. We are trying to make things easier for them."
Focus on usability and functionality
A plumber normally wouldn't care too much about how fancy the website is. So it is important to make user flow short and easy.
"Users have to download a pdf form , fill it out, and email it back when they register for an events. It is too much work and not easy for our office to keep all the files."
Implement a form plugin
A form plugin will definitely make their life easier. Users can fill out the form online and their information will be stored at the backend of the site. The office staff can easily export it to an Excel sheet if needed.
- User Persona -
Name: Mike Lee
Age: 42
Occupation: Plumber
Location: Ontario, CA
Bio:
Mike is an experienced plumber. He has been a member of the OPIA since 2003.
He is trying to expand his business and start his own company in the next year.
Goal:
Get news about building code updates etc
Access to other resources
Network with suppliers and potential customers
Pain Points:
Text sections are hard to read.
Event registration forms need to be hand-written and emailed out
Name: John Simons
Age: 20
Occupation: Plumber
Location: Ontario, CA
Bio:
John just starts his career as a plumber.
He wants to learn more about plumbing and get his first job.
Goal:
Get job posting information
Access to educational resources
Network with suppliers and potential customers
Pain Points:
Too many links on the homepage, don’t know where to start.
Cannot find job postings.
- Study the Website Client Liked -
| Website | Pros | Cons |
|---|---|---|
| https://www.oboa.on.ca/ | 1. Fixed header and footer menu allow users to navigate the site easily. 2. The website's color scheme is from the colors used for the logo. It looks consistent. 3. Fonts are big and bold. Easy to read. | 1. Not enough space between content and sections, feels crowded. 2. Some links in the drop-down menu direct to the same page. It might cause confusion. 3. The height of the hero images is not the same on each page. |
- User Task Flow for Registration -
- Sitemap -
Low Fidelity Design
- Wireframes -
The wireframes give the client a better idea of the layout of the site and where the content goes.
- Color Scheme -
Mainly come from the old site. I added an accent color for buttons and links that need to stand out.
- Mockups -
High Fidelity Design
What Is New
01
The home page is clean and well-organized. Font size is increased. I use images and background colors to separate content in each section.
02
The slide show on the home page provides some animation. It makes the site a little bit more fun, and is also good to attract users’ attention for membership registration.
03
All the extra links on the homepage are put in drop down menu. The navigation menu is sticky on the top of the screen so that users can navigate the site easily and won’t get lost.
Reflection
In conclusion, this was a challenging project for me. I didn’t know how to create forms using a plugin; I didn’t know how to embed payment functions into a form; I didn’t know how to do sandbox testings… So I did A LOT of research. I was glad that there were many useful resources online that I could refer to. If I got any problems that I couldn’t solve by myself, I would file a ticket to the plugin support team. In a word, it was a valuable experience in problem-solving and I learned a lot from it.
Since the client really liked OBOA’s website, I tried to create a similar layout. However, the overall appearance looks not as well designed as OBOA’s website. One of the reasons is I used the theme color from the old site and didn’t add too many other colors for the design. The other is we didn’t have as much content as OBOA’s website. If there were more content, I could enrich the pages and make them look better.
The client is a non-profit organization, so they have a budget limit. If they have more budget, I might suggest them to conduct real user research instead of just talking to clients within the OPIA. I might also offer to design a new logo for them using a different color. Then the website would also have a new look.