People Helping People

This project was the focus of my WD302 class in which we spent the semester working in a group of three to build a self service solution for connecting volunteers with those in need.

Project Image
Project Image

Business Need

PHP contacted us looking for a system that would reduce the number of calls and emails that their staff receive by removing the need for PHP's staff in connecting Volunteers with those in Need.

My Role

My contribution to the project was to design the my-posts page, the form for Requesting Aid, and the Chat System.

What I Learned

From this project I learned how to divide work amongst a group, use bootstrap for prototyping, and resolve design deputes amongst equals.

Early Designs

Early Design 1
Early Design 2
Early Design 3

During the early design stage, we prioritize function over form. We focus on creating a clear and intuitive user experience, rather than on visual design elements such as typography and color schemes. This allows us to quickly iterate on designs and refine the user experience before investing too much time and effort in high-fidelity designs.

View the WireFrames on Figma

Prototype

Prototype

We create interactive prototypes to test our designs and ensure that they meet user needs and expectations. We use high-fidelity prototypes to simulate the look and feel of the final product. This allows us to test our designs with users and gather feedback early in the design process.

Our prototypes are created using industry-standard tools such as Sketch, Figma, and InVision. We use these tools to create interactive prototypes that simulate the user experience. This allows us to test our designs in a realistic setting and gather valuable feedback from users.

Download the Prototype From Github

Design System

Design-System
Design-System
Design-System

Our design system includes a comprehensive set of guidelines, reusable UI components, and design patterns. These guidelines ensure consistency across all our products and help us deliver high-quality designs faster. Our design system is flexible and adaptable to different contexts and platforms, making it easy to scale and evolve as our products and business grow.

View the Design System on Figma

Challenges

Time, Design differences, and being a first time user of bootstrap were all challenges that I needed to overcome to develop the self-service model.

Limitations

Time, budget, and not having end user feedback make putting the final touches and development hault.

Moving Forward

We presented the current prototype and design system and received approval for moving forward. The next phase of design will be prototyping the chat system and User testing.