Repair Economy Washington Website

Non-Profit | Improve, Support | 2022, 4 months | Website Link

Project Overview: 

Repair Economy Washington is a non-profit organization that simplifies repairs in Washington by providing an online map to help users find their nearest repair services and nurturing the repair community. I volunteered to improve the map’s functionality, make the website more user-friendly and 9% more lightweight, and create web tutorials. 

*Note: The map on the dev website doesn’t reflect the improvements made on the local site due to a limitation of plugin migration.

Table of Content:

Challenges:

  • Map functions aren’t so user-centered – I reached out to Xenia Dolovova, Waste Reduction Programs Director, and Web Manager of the organization, and found that the main thing they want to improve is making the map more helpful for the users. Because:
    • The users don’t have the option to fill in their location – They can only use the item category filter and zoom in/out to find their location on the map. This issue is also shown in the web usability report done by the previous volunteer.
    • The users have no options to filter the map aside from the item category – The organization wants to present more diverse and meaningful map filters. An ideal example: a user can use an ownership-type filter to choose if he wants to find a repair shop that is BIPOC-owned, women-owned, or LGBTQ-owned. 
  • The entire website is unorganized and unoptimized
    • The website layouts and branding are unorganized, inconsistent, and lacking focus – The users can’t tell within a few seconds what this website is all about or how it would be valuable for them. They will have to browse around or read long-winded texts. Some web copies differ in text sizes.
    • The images and performance are unoptimized – The website is image-heavy as there are multiple galleries and blog posts with large, unoptimized images, which weigh down the site and load time.
Image: Repair Economy original homepage
Above: Repair Economy’s original homepage

Goals:

Based on the challenges, here are the goals I set for this project:

  • Primary:
    • Improve the map functions: Add a location filter on the map to enable the users to enter their zip code or city. Add more filters to allow users to customize their searches.
    • Improve the brand identity: Establish fonts, font sizes, and line height, and apply them across the website to maintain brand consistency.
    • Web sustainability: Optimize media to reduce page weight and load time. Add eco badges (from Website Carbon Calculator and Green Web Foundation) to build awareness of web sustainability among the users.
  • Secondary:
    • Simplify event calendar content: Reduce the event pop-up details when hovered over. Keep them concise and focus on the what, where, when, and how. The rest of the details will be behind the read-more button.
    • Improve web copy format: Simplify and make them more readable. Use more bullet points.
    • Web sustainability: Plan on establishing the practical steps the organization can take to keep the site sustainable after handing off the project.

Main tools & plugins:

WordPress,Open-source Content Management System (CMS)

Elementor,Page builder tool

Figma,A free wireframes maker

Astra,“Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed.”

Smush,A plugin that compresses, resizes, and lazy loads images

W3 Total Cache,A plugin that caches files to speed up load time

Local,A tool that enables local web development on your computer

All-in-One WP Migration,A plugin that backs up, imports, exports websites

WP Google Map ProA plugin that enables Google Map integration and location marking

Learn more about each tool.

Execution, issues encountered, & solutions

  • Set up the local workspace 
    • Issue: Due to the large database and file size, it’s hard to export the site to Local, the local work environment, without using a premium tool. 
    • Solution: I persisted in using a free migration tool, All-in-One WP Migration, and exporting smaller files at a time. Although this process took time and focus, I finally had a complete copy of the website in the local workspace.  
  • Improved the map functions
    • Added the location filter and custom filters on top of the map and a short instruction to help guide users. Reduced the number of shops listed below the map to avoid overwhelming the users.
    • Issue: WP Google Map Pro’s configuration is complex and I had no experience in using it or working on a directory-type website. It’s time-consuming to understand how the item categories, location markers, and filter functions work together in the tool.
    • Solution: I watched tutorials, read the documentation, and tested the functions multiple times until I understood them. And I could finally create custom fields and enable more map filters. 
  • Limitation on the map plugin migration 
    • After completing the web development in the local environment, I brought the site online through a dev site built with a subdomain. This would allow the team to view the development site remotely before deployment. 
    • Issue: The map plugin, WP Google Map Pro, couldn’t be migrated to the dev site due to the limitation on setting up another WP Google Map Pro on the dev site. Therefore, the team couldn’t view the improvement I made on the map via the dev site.
    • Solution: I presented the map function improvements on the local site using screen recording and screenshots. This was the best option to demonstrate to the team the improvements I made.
  • Improved the brand identity and user engagement by redesigning the site
    • I redesigned the entire site using Figma. Starting from making wireframes, changing the theme from Strike to Astra for more flexibility, and setting global fonts, and line height to ensure brand consistency across the site. 
    • I redesigned the homepage by turning the organization’s goals into three call-to-action buttons. I put them at the top of the homepage with the web headline and subtitle. Each button links to its own section on the page. 
Image: Repair redesign wireframe on Figma. View on Figma
Above: Repair redesign wireframe on Figma. View on Figma
Above: Repair Economy WA full homepage
  • Improved the web copy format
    • I highlighted the call-to-action sections by segmenting them in a text box with a different background color.  
    • I broke down bulky web copies into smaller, readable paragraphs. This helps the user consume the content easier.
  • Optimization for sustainability and performance
    • I used Smush to resize, compress, and lazy-load images. I used W3 Total Cache to speed up the load time by caching files.
  • Made web tutorials to support the web admins after handing off the project
    • I made the web tutorials that address topics such as “How to add more custom filters to the map?”, “How to manage the blog posts?”, etc.
Image: Repair Economy pages before & after
Image: Repair Economy pages before & after

Results:

I achieved all the primary goals and 2 out of 3 secondary goals:

  • The map is more helpful: It allows more specified searches through filters.
  • The brand identity is more consistent: The website layouts are more organized and easy to browse. The homepage has clearer communication about what the organization does and how the website can help the users. 
  • The content is better formatted and more organized: This makes the content more readable and skimmable. 
  • The site is more lightweight: The site weight is reduced by 9% of the original site, from 620MB to 590MB. The Website Carbon and Green Web Foundation badges were added in the footer to increase awareness of web sustainability.

Leave a Comment