Repair Economy Washington Website (Current Project)

Non-Profit | Improve, Support | 2022, 4 months | Website Link* (original site) | Development site screenshots

(*Unable to provide the link to the development site because it’s created locally)

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. Here’s how I volunteer to help make the map easier to use, the website more user-friendly and 9% more lightweight, and support the team by making web tutorials. 

*This is still an ongoing project that needs final refinement before launching.


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 categoryThe 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. 
  • 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 establishing fonts, and line height in Elementor’s global setting. This ensures brand consistency across the site. 
    • I redesigned the homepage by turning the organization’s website goals into the three main call-to-action buttons. Then 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. To speed up the load time, I used W3 Total Cache to cache 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:

This project is now in the final refinement phase. While we’re yet to see all the results of the improvement, here are the obvious ones:

  • The map is more helpful and 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 website weight is reduced by 9% of the original site, from 620MB to 590MB.