Good User Interface and User Experience (UI/UX) design is one of the driving forces behind the success of your ecommerce business.
So to find out the hows and whats, the dos and the don’ts of creating a good user experience for your customers, I recently sat down for a brain-picking session with two irreplaceable cogs in the ever-growing machine that is Printful – Agnese and Kaspars, our User Interface/User Experience (UI/UX) designers.
Working in such a fast-paced, startup-based company, these two have gained quite a bit of experience, and now they’re here to share with us some of their stories and tips. So settle in and read all about the UI/UX design philosophy you should be embracing when working on your website.
It’s been said that the components of a (digital) product can be defined as parts of the body where UX design are the organs, UI design is the skin, the code is the skeleton. Does that sound about right?
Agnese: Yes, you could say that. Another way of saying it is that UX is the way customers feel when using your product, and UI is the way it looks.
So how do you think the world sees you?
Kaspars: I’m the guy who puts all the buttons on everything. Many people, my mom included, think that the button you’re about to click on a website “was already there,” because “someone put them there!” These things are often seen as self-evident, a no-brainer, but it turns out, there’s an actual human being behind all that, thinking, “I wonder how person X or person Y would react if I moved the button here?”
What’s it like, designing UI/UX for Printful?
Agnese: Printful can be a challenge because our UX flow consists of the online as well as the offline. It’s not all UI, you also have to work very closely with the physical product. So in the case of Printful, the UX doesn’t start and finish on printful.com, the result of the UX is the product that the end-customer receives in the mail.
Agnese: So for us working at Printful, UX is an extremely vast area. And everyone working here contributes to building it, from the person designing the UI, to the person actually printing the t-shirt. UX is what the customer expects from us, in its entirety, from ordering a t-shirt online to having the orders fulfilled.
Can you think of a UI/UX project you’ve been particularly happy with?
Agnese: Printful’s push generator was actually a big step forward – it makes it easier for the user to create and maintain their online store. Before the generator, users had to make the mockups themselves: find out how to do it, do it, and then repeat it for every product variant. Now it can all be done automatically. It was important to make the whole process much more comfortable for the user. Our main goal was to improve and simplify their Printful experience.
How can you tell you have to make changes to something?
Kaspars: Customers. It’s when a customer – ideally several customers, not just one person being picky – tells you that something’s off. And another giveaway is time. You do something, then time goes by and you gain more experience, you go back, look at what you did, and go “Wow, way to go, genius! What were you thinking??”.
Can a design element ever be completely finished?
Agnese: It changes all the time. Everything changes all the time. The biggest mistake might be to ignore the feedback from your customers or someone else; being stubborn and clinging to just one solution.
What are your main challenges in terms of UI/UX design?
Kaspars: Sometimes it’s tricky to think of Printful’s design in proportion to its growth. Designing Printful’s UI/UX is like trying to buy clothes for a teenager. Teenagers grow super fast! No point in building an exclusive, permanent wardrobe for them. Everything’s either too small or too big. So that means you end up looking a bit dorky for a few years. Basically Printful’s growth spurt has been so fast, sometimes I feel like the design can’t keep up with it. In the end what matters is that Printful has some clothes on its back.
Agnese: And I think that waiting for the growth spurt to stop is wishful thinking. There’ll always be something new in the closet of this teenage Printful.
Ever have to sacrifice design for the sake of the user experience?
Kaspars: Not really. Also, when it comes to Printful, our number one concern is functionality. Yes, our website has to look good, but most importantly, the entire Printful system has to work. The site’s just one part of what we do, and it’s closely linked with our entire team and production as well as our users and integrations.
Agnese: We have to be sure that the user understands what they have to do. I find that sometimes a website can come off as too flashy and animated, when every little design element, every little detail does something, but doesn’t really help you navigate the site.
Kaspars: Basically it’s all about balance – you can’t have UI interfere with UX.
Agnese: And when it comes to design, you have to remember everyone’s favorite “pick two” triangle: high quality, on time, within budget.
Agnese: Few businesses can afford all three. In terms of UI, you as the business owner have to ask yourself: will every pixel polished to perfection help me bring in more revenue? Is the amount of effort and resources put into that perfection worth it? And as a company that’s constantly evolving we find that there’s no time to fixate on that perfect pixel – you have to keep moving.
Kaspars: When all else fails, focus on the product and the checkout process. Make it easy for the customer to see how cool your product is and how easy it is to actually buy it. And remember that all the elements work together. Even if you have a great product and you make it look good, if you don’t market and promote it and generate traffic, you won’t get sales. When properly promoted, any idea can become popular, whether it’s simple and straightforward or a bit wacky.
Agnese: And even when you have limitations, a website template or whatever it may be, try to work on your own voice and make yourself heard. Be yourself: that’s what everyone’s looking for – that special something that makes you different from everyone else.
A blast from the past
To engage our designers in a little experiment, I opened the WayBack Machine and went to the first available snapshot of the Printful homepage in 2013. Let’s see what our designers had to say about it.
Kaspars: The first thing that comes to mind is, I like that it looks so simple! Not too much going on yet. Ah, here we go: all-caps text in two lines. It’s something that’s always been bugging me. Here it’s more or less OK, but it’s often difficult to read. Sentence case is easier on the eye.
Agnese: The menu item “Sign-in” is the same as all the others and it doesn’t stand out visually. The meaning behind this item is entirely different, it should be brought out more.
Kaspars: Looking at this (above), another piece of advice to online store owners could be, when showcasing products, if you’d like the customer to see more, make the images clickable. It’s like walking into a store and having only the mannequin to look at. But you don’t want to just look at the mannequin, you want to take off that jacket you like and try it on.
Agnese: I see one thing I had to change quite early on: over here, you can’t tell that “Find out more about the product quality” is a call-to-action button. It looks nice, but there’s no way of telling that it’s a button you can actually click on.
Kaspars: In this case, the mistake is very easy to pin down: the text is in two rows. If it were located someplace else and with a shorter text, you’d immediately recognize it as a clickable button.
Agnese: Yes, a CTA button should never be a sentence in two lines. Keep the CTAs short and sweet. But the main question that comes to mind from looking at this is, can the person visiting this understand what Printful is and what Printful will do for them?
Now that the interview is over and Agnese and Kaspars have hopefully recovered from answering questions, we can reflect on the discussion and put together a list of the most important takeaways.
What our designers have done in the course of our wonderful conversation, is help unveil these 8 basic UI/UX ground rules:
- Make it clear what it is that you do – everything on your store must contribute to what your brand is about. Write your copy and create your visuals with a clear purpose in mind.
- Figure out the goals of your site: what do you want your visitors to do? Sign in to your account? Sign up for your newsletter? Buy your products? Your UI/UX flow needs to reflect these goals.
- Text must be readable: not too long, not too short, and formatted accordingly.
- Think about your CTA buttons – they should be inviting and easy to find.
- If something’s purely decorative and there for no apparent reason, that may be reason enough to ditch it. Stick to purpose and function.
- Pay attention to customer feedback. If something’s not clear to one person, it might be unclear to several – put in the extra work to make your message as understandable as possible.
- Sales and traffic matter too, they aren’t things that automatically come with good design.
- Everything doesn’t have to be polished-to-a-pixel perfection.
When working on your website, put yourself in the mind of your users and try to see what they see when browsing your content. Ask questions, ask for advice, make note of all the feedback you get and be prepared to make changes.
For a quick recap of what makes UI/UX design good, take a look at these two posters from Startup Vitamins:
Stick to these two maxims and you’ll be good to go.
Is there any UI/UX advice you’ve stumbled upon and found particularly useful? Leave it in the comments below!