Power Pledge: Website design and development
Overview
Summary
Designing and building a non-profit organization’s homepage.
My Role
UX Consultant | Designer | Developer
Responsibilities
Goal setting | Stakeholder design reviews | Design | Frontend and Backend Development
Worked with
Non-profit founders
Company
Power Pledge
Artifacts created
Wireframes | High-fidelity designs | Interactive prototypes | Logo design & Branding | Website | Backend server
Tools
Figma | Caddy web server | Node.js | HTML/CSS | Haxe/JavaScript
Power Pledge is a non-profit organization that needed a web presence. Working closely with the client, I designed and built a new website for them.
Goals
Power Pledge's needs primarily focused on designing and building a responsive landing page that would allow users to easily view and consume their content on any device. The work also included logo design and front-end and back-end development.
A screenshot showing the www.powerpledgeproject.org landing page.
Process
For the initial start of this project, meetings were regularly held to gain better knowledge and understanding in the non-profit's overall goals, answer questions, hold brainstorming sessions, and conduct design reviews.
One of the very first collaborative actions we took was to look at a few competitor/comparative websites that are within the same domain as Power Pledge. This facilitated early conversations about what type of content should be prioritized, what kinds of layouts would make it easiest for users to navigate the site, how Power Pledge would position itself differently, and what interactions might be needed on the site.
After several rounds of working sessions, design reviews, and feedback, I built the site using HTML, CSS, and JavaScript (via Haxe). The back-end was built using Node.js to facilitate sending email notifications when a user submits the Contact Us form.
The Contact Us form design on powerpledgeproject.org
The above two mobile screenshots show the Contact Us form. The one on the right shows error messages that will appear if certain form fields are left empty or invalid (e.g. phone number). Even though the phone number label explicitly states a format to use, many other formats are accepted (e.g. 123.456.7890, 1234567890, etc) to minimze input mistakes made by users that should be valid.
The submit button's submission state.
In addition, when the user submits the form the Submit button becomes disabled, to prevent repeated submissions, and updates visually to provide feedback to the user that their click interaction actually did something. When the submission succeeds (or fails) the Submit button will reset allowing the user to submit again.