For a recent job application, I was asked what my design process was. Right away, I thought of a a project that I'm particularly proud of — a redesign that I completed this year for a small property management company near where I live.
The company, Cranberry Community Management, wanted to implement an online payment system for homeowner dues as part of the redesign, so I was tasked with designing, coding and implementing this feature.
This is the payment system that I designed, built and shipped for Cranberry Community Management.
I'm going to walk you through the process of designing this feature, one step at a time.
Before starting to code, I solicited information about the current dues payment process from my co-workers and then mocked up a quick sketch of the process from start to finish.
I threw together a very quick-and-dirty version in the browser, barely adding any styling just so that I could ensure that the flow of the entire process was simple and self-explanatory.
After further development and input from co-workers, the above screenshot turned into:
After the homeowner clicked the pay button and went through Stripe's checkout process they were greeted with this screen:
Now that the flow of the system was set up and working, it was time to test with fake data and multiple use case scenarios. Validation was not an issue and was quickly added, but the Stripe checkout offered up a few problems.
Luckily, Stripe's API is quite powerful (and smart), so the main task for me was to design and develop an error screen for any hiccup that Stripe had throughout the checkout process:
After the initial round (or four) of testing, it was smooth sailing!
After making sure everything was working correctly and my boss gave the O.K., I switched over the Stripe API keys from test to live and published the page. We were in business!
There are always things that can be changed based on user feedback. For this project, no major usability issues arose; however, we received a few questions regarding some of the wording throughout the process, which was promptly corrected. In addition, the possibility of homeowners being wary of Stripe (as it is not yet a household name like PayPal) was brought up, so a footnote explaining that Stripe was secure and was similar to PayPal was added.