Food4Kids Donation Page

Inspiration

UX/UI articles and the inclination to tackle the Food4Kids website challenge

What it does

Interacts with the user when upon selecting the donation page; they are able to see their value donation go through with a safe and secure transaction as well as a grocery transaction with visible impact shown through the cart and the donation donut graph.

How we built it

The front-end design was created through Adobe XD and the coding for the website itself was done through HTML, javascript, and bootstrap.

Challenges we ran into

The implementation of bootstrap on the front end was tough because we had to use the design elements already given to us (the branding was pre-determined so the project had to be paralleled to that)

Accomplishments that we're proud of

Understanding the UX/UI planning associated with Adobe XD

What we learned

Learned about design for donors while upholding the organization's branding; bootstrap; Adobe XD; and overall programming

What's next for Food4Kids

More pages for the website to make the donation experience more fun and interactive; the donors will enjoy the experience and share it with their peers

Built With

• adobe-xd
• bootstrap
• html
• javascript