I'm a digital product designer based in London. I get excited about working with great companies, and building great products. I have some upcoming availability, so if you're interested in working with me, get in touch.
Real designers never use:
- Modal windows
- Content toggles
- White typography on black backgrounds
- Scroll manipulation
- Base font sizing under 16 pixels
- Base font sizing over 16 pixels
- Non-responsive design
- Interactions available on hover
- …and seemingly an open minded research process where nothing is ruled out at the beginning?
Absolute truths are nearly always damaging, yet the modern designer's opinions seem to be full of them. Of course, knowing which ideas and design patterns are more often suitable and successful is a large part of being a better, and more efficient designer. But totally ruling ideas out because of popular opinion is just too close minded. Use research, use data, and decide on a per-project basis.
“Helvetica is overused.”
“Content toggles often mean a lack of content strategy.”
“Hover interaction fallbacks for touch screens always seem to get forgotten about.”
As true as these statements are, that doesn't mean any of the design choices or solutions are never suitable. Any idea can have its place, even if the circumstance is a rare or obscure one.
Increasing checkout conversions on Mastered
I've been working on Mastered since last autumn. Following the launch at New Year, it's mainly been good news with some fantastic feedback and a growing number of paying customers.
However, one statistic that had been consistently bothering us was the unusually high drop off rate within the checkout page. With a successful conversion rate of 12%, it felt like that was a priority to try and improve on. While I felt we'd have to accept a slightly lower than average percentage due to our fairly insistent checkout prompting within the free trials provided (i.e. a lot of people will end up on the checkout), 12% still felt too low.
With the existing checkout design already relatively simple, it was tricky to envisage changes that would really produce improvements to the conversions. As we're not selling physical products, no addresses are required. There's no basket/cart functionality to design around, with only single purchases supported. And Stripe's standard payment form had always done a good job with handling errors, formatting and such.
So, the changes and additions decided on would all be fairly minimal tweaks, but the hope was that together they'd have a stronger effect.
The average conversion rate is now approaching 20% in the period since the tweaks (up 8%), so I thought I'd quickly run through the changes that I made.
An extra click for the discount form
Research showed that people were more likely to put the checkout on hold, and go hunting for potential discount codes around the web, when the discount form was sat, ready and waiting in the checkout. Of course they'll often return, but the more persuasive we can be about keeping them on the checkout page, the better. Hiding the form behind a more subtle link (which toggles form visibility) seemed to make people less insistent that they could find a valid discount code elsewhere.
Confirming the purchase delivery method
As previously mentioned, Mastered don't sell physical items. Customers pay for fashion education courses, where they'll get access to an online classroom with video streaming and written exercises/articles. Not everyone in the customer base is totally tech savvy, and there had sometimes been confusion from customers with how they'd actually get their hands on the course material.
- "Will it be instantly available?"
- "Do I need to log in elsewhere to access it?"
- "Do I need to download anything?"
Answers to these questions are elsewhere on the site, but naturally sometimes get missed. I thought succinctly reinforcing the answers directly before payment would put a few minds at ease.
Refining the payment form flow
We use Stripe to power the payments system, which is absolutely the best provider you can use right now. The form we'd implemented had always been the default version, with only a few tweaks to the error formatting implemented. My main dislike was with the expiry date information being split into two select boxes — controls that don't feel great to navigate, and the needless creation of two form elements when one would suffice. I also wanted to add proper live validation while customers fill in the form.
Everything I planned had conveniently been created already by Stripe via their open source JS library, jQuery.payment. Implementing this meant we could have the following…
- Validation of card numbers (length), with live feedback informing the customer what card type they were using (via a slick little icon). Also, space formatting between each four numbers.
- Forced date formatting — only two numbers for each value, a slash automatically added to split the month and year.
- Max length of four numbers on the security code.
Here's how it works now…
Note: the error message for that invalid card number does appear a few milliseconds afterwards. I'm not one to rely on a red border alone!
Typically, just a few weeks after implenting all of this, Stripe took all that logic from jQuery.payment, mixed it with some beautiful UI design, and released a new embeddable payment form, Checkout. Nonetheless, I'm not sure we'll switch from a fully customisable code-base to Checkout, especially after creating such a similar user experience, but it's certainly worth checking out (awful accidental puns ftw).
Confirming SSL protection
Simple confirmation of SSL protection, with some people seemingly still unaware of what the lock next to the browser's URL means.
Reinforcing money back guarantee, and contact details
To finish off the page revamp, I added a final mention of the 14 day money back guarantee that Mastered offer, directly below the payment form.
This instantly makes clicking the submit button above feel like less of a commitment. Though there's barely been any money back requests as of yet, so clearly the product is doing all the right things!
These design tweaks seem to be performing well for Mastered, but that may not be the case for all websites. Still, hopefully it's all food for thought, especially for those of you who are also looking to improve already very simple checkout designs.
(Make sure you have a good analytics service running on your payment user journey. We've been using Kissmetrics lately, which feels like a dream to navigate when compared to Google Analytics.)
Good for Nothing
This weekend, I had the pleasure of being at Birmingham's first Good for Nothing gig. I was introduced to Good for Nothing sometime last year via my good friend Ryan, who actually ended up organising Birmingham's debut alongside Lisa Barrett and Immy Kaur.
To briefly describe it, Good for Nothing is all about bringing makers and tinkerers together, utilising their varying skills to work on and help with cause-led innovation. Basically, it's getting good people together to help create positive impact in our society. Note, these people aren't just internet makers. Events tend to attract a much more varied collection of people — writers, architects, engineers, students, business owners, and numerous other brilliantly skilled minds.
To kick off Birmingham's Good for Nothing, we headed over to Urban Coffee Company on Friday evening to get to know the other attendees, and hear about the briefs. These two briefs included the details of what we would be working on and aiming to achieve the next day. They were read through and explained by the founder of the cause we'd be helping, Birgit Kehrer, creator of ChangeKitchen.
ChangeKitchen is a social enterprise in Birmingham, that provides award winning catering for corporate events, conferences, weddings, and community meetups. They also run a café in the city centre. Alongside the amazing food, Birgit has built the business around some unique values. All the food is vegetarian (or if requested, totally vegan). This prevents any exclusion because of potential specific dietry requirements, instead celebrating the sharing of meals with everyone at the same place, eating from the same table. Their other aim is to provide training and work opportunities for the disadvantaged, or those who have faced social exclusion. Indeed, some of my favourites memories of the weekend were the happy personalities of our cooks; people that have likely suffered darker days in the past than I could barely envisage. Birgit has given them a tool to turn their life around, and with plenty of hard work, they've done just that.
I loved everything about ChangeKitchen, so come Saturday morning, I was really looking forward to getting stuck into some problem solving. Brief 1 focused on improving the marketing and overall image of ChangeKitchen, while brief 2 was all about improving the brand and promotion of their café, the "Pop-Up Kitchen".
As I'm all too used to by now, it's amazing how much you can get done in a single day when you put a group of smart, motivated people together. Come presentation time at 6pm, we had a new quote tool aimed specifically at a key target market of conference/meetup catering, a dashboard to manage quotes, a revamped business strategy full of useful tips, business development documents, and a refined future plan for the social media side of things. While over with brief 2, the Pop-Up Kitchen had a totally new brand. With a new name of "Change Café", a beautiful new logo, and a slick microsite ready for launch, the quality of the café venture had certainly jumped up a few levels. Perhaps most importantly, Birgit seemed to be a fan of everything that was delivered.
I really enjoyed my first taste of Good for Nothing. I'd like to emphasise just how good the vibe over the weekend was. Egos were totally left at the door, which isn't always the case with "do good" projects. No one was deluded in the scale of impact we were aiming for. Sometimes it's not about changing the world, just improving a tiny part of it. Big aspirations are always good, but bringing that motivation back to a grassroots level to help out a local cause is something I totally loved, and I think it needs to be encouraged more and more.
Good for Nothing seems to be growing and expanding nicely. If you'd like to get involved, see if there's any gigs or meetups coming up in your city. Otherwise, why not start your own?
Thanks again to Ryan, Lisa, and Immy for organising a fantastic event!