VOLUNTEERING project

Re:bloom

Collaborators
Sunny Tang
Nicholas Ung
Timeline
June '23 - August '22
Skills
PM: Agile Methodologies, Time Management, Interpersonal Communication
Tools
: Figma, Notion, Wix
User R & D: Prototyping, Usability Testing, Personas, Competitive Analysis, Customer Discovery

Project Management

UI Design

User Research

Summary

Agile Development

Over course of 10 weeks, I communicated and trained the developers as well as our client. For developers, I guided them to make the best design decisions possible with the given constraints while I documented and helped our client to learn how to edit the website on their own. Contributing to weekly standups with other PMs and my supervisor helped mine as well as our cohort's growth.

UI Design

After understanding the client needs as well as their budget and technical constraints , I made the executive decision of moving forward with Wix as the website builder. My developers and I researched several templates, presented them to the client, and based on their feedback, modified the template to suit their branding and goals.

Quality Assurance

To ensure the quality of the website, my team and I performed user testing with seven users. I also introduced them to WCAG, ensured out client's website was AA compliant due to ADA, and soleley performed SEO and domain migration from the old website to the new, modern and sleek one. Though this process was strenuos due to lack of prior documentation, I was able to get this done within two weeks.

Problem Statement

Company website was outdated and owner lacked resources.

Our client had an old website that was created without keeping their voice, target audience, or goals in mind. It was laggy, outdated, and its developer was charging enormous amount to the client for its modification and upkeep.

Our client did not have any developers amongst her employees or volunteers which is why she reached out to re:bloom in order to gain a bigger digital presence and raise more funding to support her cause.
Dashboard mockup

Solution

Dashboard mockup

A website makeover with input from founder and training of employees for future upkeep.

Website Design

...that is accessible, affordable, and sustainable.

Over the course of 9 weeks and 3 stages, I collaborated with 2 developers to iteratively design a website that brought our client's vision to life:

1. Platform Recommendation: After understanding industry standards and the target users(donors as well as youth and families affected by violence), I drafted a project proposal detailing project timeline and deliverables. Acknowledging the limited technical knowledge and budget constraints, I chose the no-code platform Wix which was easy for editing and upkeep by any ILS employee.
2. Information Architecture: For website layout, I talked to the client about what they wanted to convey to the donors and trauma impacted families. One primary wish of our client was to showcase their upcoming events that could also be synced with Google Calendar. After systematically reviewing the Wix templates provided by the developers, weighing their pros and cons, and accounting for client's feedback, I chose a single template to move forward.

3. Branding: To create the emotions of calm and trust, my team and I chose the blue color as our theme color of the website. We then followed the 60-30-10 rule to create the other accents. One of the client's employees, Lisa, had background in graphics so we consulted her on the font choice for the website.

Website Design

...that is accessible, affordable, and sustainable.

Over the course of 9 weeks and 3 stages, I collaborated with 2 developers to iteratively design a website that brought our client's vision to life:

1. Platform Recommendation: After understanding industry standards and the target users(donors as well as youth and families affected by violence), I drafted a project proposal detailing project timeline and deliverables. Acknowledging the limited technical knowledge and budget constraints, I chose the no-code platform Wix which was easy for editing and upkeep by any ILS employee.

2. Information Architecture: For website layout, I talked to the client about what they wanted to convey to the donors and trauma impacted families. One primary wish of our client was to showcase their upcoming events that could also be synced with Google Calendar. After systematically reviewing the Wix templates provided by the developers, weighing their pros and cons, and accounting for client's feedback, I chose a single template to move forward.

3. Branding: To create the emotions of calm and trust, my team and I chose the blue color as our theme color of the website. We then followed the 60-30-10 rule to create the other accents. One of the client's employees, Lisa, had background in graphics so we consulted her on the font choice for the website.

Quality Assurance

To ensure longetivity of our client's website, my team and I double-checked our website on several frontiers.

Firstly, we added alt text to all images, utilized semantic tags to organize different website information for screen readers, checked color contrast issues, and ensured keyboard accessibility for WCAG AA compliance level.

Secondly, for improving visibility of the organization, each webpage had the appropriate SEO headings, subtext, and URLs. 301 redirects, instant Google indexing, patterned meta tags for use across multiple pages were also used to promote engine rankings and make the website easier to find by donors and families.

Lastly, we iteratively tested the website with 7 different users to figure out bugs and issues in accessing the relevant information.

Client Training

...and a bittersweet goodbye!

My team and I loved interacting with our client and working for them. However, it was our goal that we create a sustainable website for them that could be used long after we all had parted ways.

Over the course of 10 weeks, I conducted weekly check-ins with our client and gave them "homework" — tasks that taught the client how to engage and learn how to use the website. I also kept a thorough documentation of these tasks through a training guide as well as other vital documents such as a common FAQs document, a SEO guide, and a Design guide.

Prior to working with our team, our client had to rely on a third party who took advantage of them. This training and documentation was performed not only our client, but also her present and future employees as well as volunteers. This way, the website and the autonomy of the non-profit was preserved.