I finished re-designing the signup page of one of my websites last week. Here’s a reflection on what I accomplished last week, and whether it was a good use of my time (nope).
- Finished redesign of webpage
- Used InVision to mock up design before implementing to code
- 22 hours total of focused work to get this done. Great learning, but ultimately not worth the time spent.
Issues I faced
- I didn’t fully flush out the reasoning as to why I embarked on this redesign. Basically I just started working on it, and I didn’t want to stop until it was finished
- Translating design mock up to code is tedious work
- Maintaining this code for future improvements no the UI is a lot of work, and I don’t think it’s worth my time. I am considering outsourcing this type of work in the future.
What I learned
Plan plan plan! I need to write out my plan for the upcoming week next time.
Reflections on my last week
After spending a week to redesign the payments page, I realized I should have planned for this better. Basically, I should’ve written out or vocalized exactly why I needed to redesign the page. I had a few reasons floating in my head, but I didn’t have a clear, defined rationale.
Now that I’m writing out the points below, I don’t believe I should have wasted a week doing this. This was not an urgent issue to fix. It took away time that I need for Project #3.
Why did I redesign the payments page?
Poor User Interface
One person did not immediately see the promo code section and did not enter their promo code in. I think this is just a symptom of a larger issue, which is generally poor user interface design. It also exposes some risks and issues:
- I have to retro-actively apply their promo code. This is not a big issue – it’s only happened once so far, and I don’t expect it to happen often
- A new customer might decide to not sign up…this is a bigger issue.
I solved this issue by separating out the promo code input section so that it is more prominently featured.
Misleading messaging on the payments page
When a user entered their free month promo code, the page did not provide clear details about their subscription payment details. In the old version, after the user entered the correct promo code, the sign up button would say “$0 / month.” This was simply inaccurate. I wanted to redesign a clearer page that more accurately reflects how much the customer would pay, when they would pay, and how much discount they received from the promo code.
I redesigned the page to show a summary area, where it clearly says “$9 / month.” If they apply a one-free-month promo code, it’ll add text saying “One month free.” It’ll also add text showing when their first payment will begin, and that they’ll be billed monthly.
This is what the new design looks like:
(Yes, there’s a spacing issue beneath the “Cancel anytime.” Will need to work on that later).
Bad input verification
A potential customer tried to sign up multiple times, but they kept receiving error messages. Upon debugging, I found out it was because they added an extra space after their email address. This crashed the requests being sent to Stripe.
Additionally, this took me 2 days to realize this bug occurred. After learning of their attempts, I immediately sent them an email to help get them set up. But to this day (over a week), they still haven’t activated their account yet. This is possibly one lost customer.
I solved this by just adding a simple line to “trim” the input of their email address:
email_address.trim() I also added other checks that reflect back to the user if their email address doesn’t follow the regular email address pattern (firstname.lastname@example.org).
A customer paid multiple times due to a bug and improper error checking
Another customer submitted multiple payments through. They kept submitting their payment because the website was giving them error messages, even though they were successfully being charged.
I had a a try / catch statement that was experiencing an error, but it was returning the wrong message to the user. The error was due to my automatic emails not going through. This is another huge issue that I will write about separately.
I fully refunded my customer, which cost me some fees to Stripe. This was a costly mistake.
I’ve fixed the code so that if my user successfully subscribes to Stripe, they will receive a confirmation on the webpage. However, they won’t receive an automatic email confirmation. I am currently just waiting for Stripe notifications on my phone to see who signs up, and I will manually send customers a confirmation email.
The webpage was loading too slowly. I believe this was mainly due to the large background image that had to be downloaded first.
I’ve taken away the background, but there’s still an issue with waiting for all of the elements on the web page to load before showing up. It’s faster than before, but it still takes a second to load. My webpage is light, so it shouldn’t take that long.
Other issues I faced while fixing these issues
- Automating this email confirmation has been a lot of work! There are easier integrations out there, but I think it’s because of my more unique requirements that make my setup more bug-prone. My website application was loaded onto Google App Engine using a runtime of Python 3.7. It is this environment that is causing the current issue with my Gmail API integration.
- When designing my signup page, I had to manually copy and paste the CSS values into my code from InVision into my .css file. I wonder if there are any webpage designer programs out there that allow us to edit the code, but still manually drag and drop elements onto the page. Kind of like the Xcode Storyboard feature, which is great.
- Another great feature I would like is to set the anchors between elements, again, just like in Xcode. That way the shapes will automatically update in shape and position based on the screen orientation and size.
- In Invision, I have to design the sign up page, but have different elements for different scenarios. For example, I want to see what it’ll look like when the user types in the incorrect credit card number, or if they have the incorrect format for their email. I want to design for the error message.
- I have the main sign up page without the notifications. To create another screen with the error message, some elements will have to move. So I’d like to just make a copy of the main sign up page and insert in the error message.
- However, if I make some additional changes to the main Artboard, I’d like those changes to be reflected into the other Artboards