— 100K Pledge
Platform: Responsive web - (focus on mobile)
My Role: Lead Product Designer
Project Length: 1 Month
Team: Product Designer, Product Manager, 2 Engineers, 1 QA Engineer
The100kPledge is a public social contract for professionals - committing to economic empowerment of African American communities through hiring, investment, and donations.
The public pledge record serves as a starting point. As the community grows, expanded features will encourage accountability, track progress, and help guide direct actions.
— My Role
My role as lead product designer on this project included the full product lifecycle from user flow mapping to delivery and handoff.
I was provided requirements by the client and product manager which I was able to turn into a sitemap/information architecture diagram to flush out all features and pages of the site. I then designed a style guide (using branding provided by the client) and mockups for 3 screen resolutions (mobile, tablet, desktop). The goal of the project was to be fully responsive. I made sure to follow AA level accessibility guidelines for all aspects of the designs.
— UI Kit & Design
I designed the UI kit first since I knew what elements were needed for this project (form fields with different states, buttons, pledge cards). Logo, main colours (pink & black) and fonts were provided by client.
I then designed mobile first to ensure responsiveness across platforms. I like to design micro-interactions where available and provide comments for engineers with links to an example animation. This was followed by tablet and desktop resolution designs.
— Challenges & Iterations
The greatest challenge with this project was that the client and their team were not aligned on the requirements for the pledge form, and they had no user data/feedback to help make this decision. There was a lot of back and forth between whether there should be an open text field to provide more personalization to the user to allow them to type in their own message or not. There was also a big concern with having an open text field which could potentially invite someone to write something inappropriate, which the client wanted to avoid altogether.
Due to this concern we implemented an Auth0 implementation to allow users to “Continue With Linkedin” in order to confirm their identity. This integration also pulls the user’s full name and email from their LinkedIn account and auto fills them. Users who comply with the LinkedIn authorization have their pledge posted to the home page immediately.
Users also have the option to skip this step and fill in the form manually - but if they choose this route, their pledge is set to a “pending” status where it needs to be manually approved before it is posted.
Multiple design options were presented to the client, along with feasibility and build time estimates. Not being able to run a round of user testing or gather user feedback was a disappointment. I made the suggestion that gathering user feedback would allow us to decide on a solution to the form issue, since we did not know exactly what users wanted out of this experience and we were only making assumptions.
Ultimately we decided to limit the editable options on the form, and remove the open text box entirely and replace it with checkboxes so that all pledges could be summed up in up to 3 categories.
— Impact & Next Steps
The site is going to be launched to the public soon. V2 will include a member dashboards where users can sign up for an account and keep track of their pledge progress, and sign up for email reminder notifications.
User flows, and sitemap I designed based on requirements set out by the client.
Accessible UI Kit and a snapshot of the screen designs for mobile that include how I wanted the animation to look when a user submits their pledge through the form.
Various iterations of the pledge form. The 3rd design was the final decision to limit any chance of someone typing something inappropriate.