Feedback on my sandal customization tool?
Link to the tool: https://decoslides.com/products/custom-slide-sandals
A little bit of context, my company Deco Slides produces slide sandals and prints designs on the straps like you would on a t-shirt. We offer some stock designs, however most of our business comes through people looking to create their own slide designs. For first few months of operation, we've been conducting most of our business through email, asking people what they're looking for and personally creating many, many mockups in Photoshop for clients.
I'm not a designer, hate Photoshop, and got real sick of talking to people that don't convert, so I decided to hunker down for a couple weeks and make a self-service customization tool like you'd find on CustomInk (https://www.customink.com/ndx/?PK=04600&SK=04600#/) or UberPrints (https://www.uberprints.com/studio).
This is at MVP stage, it's been live 10 days and we've gotten ~$600 in touchless orders out of it. That's alright but I think we could be doing significantly better with a little UX tlc and additional features.
I'm gearing up to do round 2 of features/bug fixing/design and would love to know what sucks about it -- harsh but constructive feedback preferred!
Link again: https://decoslides.com/products/custom-slide-sandals
Thanks!
I would have it start in the "Preview" view when you first arrive on the page. So you can really see what you are buying. Then when you add text, or change settings, it can switch to the flat view for editing.
I completely agree. I entered and saw that black thing on top of a sandal and though it was a badly programmed website. Took me a while to see the 'preview' button
I hear you -- I toyed around with the idea of adding a guided walkthrough for new users, a step by step interactive showing them very simple editing and how to use preview. What would you think of that? I think on one hand it could kill two birds with one stone (ie how to use the tools, and what the slides actually look like), but it also has the potential to be annoying.
I found the interface pretty intuitive, I didn't feel that I needed to be guided through it. But when I arrive on the page it is in edit mode. So I can't see what the sandal looks like. I want to see it first to determine if it is a product that I would be interested in (before making the effort of customizing). But maybe in the actual user flow they will see that before getting to the page I saw.
Thanks for the feedback, a user would typically see final the product earlier in the flow (ie this page https://decoslides.com/pages/custom-designs-1), however we aren't making it all that clear to the user what they are buying. Definitely need to work on it.
Hey Sam. Love this idea and I wish you many successes. I have to agree with everything James had to say in terms of the UX and measurable analytics. My 2 cents would be to probably add a gallery of some of the designs from other customers. It brings some comfort for newbies to see that others have customized and made purchases. Also, see if you can get customer testimonials. Those are known to help quite a bit in ecommerce.
Thank you for the feedback! I think you are absolutely correct that there is a need for visually explanatory first impression for new visitors. Right now, most users come to this page: https://decoslides.com/pages/custom-designs-1 before they see the customization tool that you looked it. This intro page badly needs a revamp, and I think a gallery of previously produced designs would be super helpful.
I think the tool is very cool and I'm sure you're going to do well with this, well done :D
Speaking as a developer there are some impressive technical aspects to this - I'm curious how do you generate the 3D preview of the sandal strap?
As for UI/UX suggestions, here are my thoughts...
Perhaps you could add some text to explain what we're looking at.
If the real-world sandal strap has some material patination to it then you could use that as a base image to make it look more 'real'.
Using a different colour might make it feel less broken and more deliberate, a dark-grey might do such as #363636, or a deep red (e.g. #6E1B1B)
(It seems that the preview generator takes a few seconds and maybe that's why you chose to hide it behind a button - But I think it would be fine if the preview was always on-screen and only updated after a few moments from making a change).
The mouse cursor shows a 4-directional 'move' cursor when I hover over the trapezoid - but it doesn't move - so I think you should stick with a regular cursor unless/until you are dragging some text around.
Tabs (on the right hand side) are not very 'tab-like' and makes them feel somewhat unpredictable:
Clicking on the Text tab actually causes text to be added to the design which I found surprising - didn't expect just clicking a tab to take any action other than show the tab content.
Some of the other tabs use modal popups to show their content isntead of the tab content box.
Perhaps just make them look less like tabs (more like buttons) would address the above points, or keep them as tabs and don't use the popups.
The strap-style tab feels a bit under-weight (a whole tab just to pick a colour) and (currently) may be not worthy of being a dedicated tab - but maybe you plan to expand this to include textures, gradients, etc?
The preview shows there are 'rivets' holding the strap to the sandal itself - I would like to see these rivets in the design view so that I don't position text/images behind them.
I wanted to reorder the layers when layering up images & text. Perhaps complex layered designs are not that common (or advised) in your experience, so I don't know how valid that is.
The engineer in me wants to be able to type the angle (and perhaps size/scale) - I want 45 degrees exactly xD
Best of luck with this!
Hi David! Thanks for the super detailed and high quality feedback -- I really appreciate you taking the time to articulate all of these points so clearly. You nailed a lot of the issues that have been nagging at me, as well as bringing up some ones I hadn't thought about (ex. the broken feeling black of the trapezoid and the patination).
Of these, I think the number one priority for me is fixing the tabs, most likely by getting rid of them altogether. I lifted the design mostly off of uberprints.com without thinking too much about the UX of their editor, and I'm now thinking that perhaps they also should rethink their experience as well...
Re: the 3d preview, it is a dumb solution that only someone that knows nothing about graphics or texture rendering would attempt. I take the flat image from the editor canvas, split it up into 20 triangles, and manually use the html canvas transform api to position and skew each of those triangles on top of an image of the sole of the slide such that they appear to form a 3D strap. It took an afternoon of pixel pushing to get it right, and while it's an inelegant and slightly embarrassing solution, it's done the job pretty well so far.
Can you write a bit more about how you achieved your "touchless" orders? What is your marketing strategy?
I ask because I am working on custom books and finding customers is hard!
Finding customers IS hard. Almost all of our customers currently come through either paid search (AdWords, bidding on variations of "custom slides") or organic search (on similar terms). Perhaps you could do something similar, if you can find a couple of terms very specific to your service that aren't overly competitive.
Is there an option for patterns or gradients :D
Also, I may be wrong here but I think the reason those sites don't have a color picker is because not all RGB combinations can be accurately replicated on print. That might be why they force you to pick from their selection.
Great question -- I really, really want to add an option for patterned backgrounds, but haven't gotten around to it yet. I'll feel a bit better bumping it up in my TODO list now that I know someone else thinks it'd be cool : )
As for the color picker, we use dye sublimation to print on our slides and can fairly accurately print any RGB color (though admittedly some come out better than others).
I saw your site earlier today. This is great business idea, I hope you do well from this :) I see half your problem, your "quote/buy" button is disguised as a tab. I was there for like 2 minutes going "how do I actually bug this?".
You need to make that a really obvious CTA button and then A/B test the hell out of the copy for it. "Quote/Buy" is a little intrusive IMO, maybe something like "Get your customised sandles"?
Also, you should have analytics on this page:
How long are they spending on each tab (indication of enagement or just messing around to try it out)
And A/B test the button text like I said
Also, have you considered having users submit their designs to the shop and getting a small commission like Red Bubble? It might incentivise them to share on social media
Thanks for checking it out!
Great point on the buy button... I agree it needs to get out of the tabs. I'm considering removing the tabs altogether from the desktop view as I don't think they add much value (I lifted the design from the uber prints editor, didn't think too hard on it, now kind of questioning some of their choices).
I have analytics set up to quantify on which actions users are taking, but not on timing... Assuming I can use GA for that.
As for users submitting designs for resale, yes I'm all about that! I think I can set it up through Refersion fairly easily (though they charge wayyy too much for an affiliate program). I haven't looked closely at how redubble does it, but I'm sure I could learn a thing or two from them. Thanks for the tip!
No worries, I'd say Red Bubble rolled their own. They have a pretty big Rails stack
The tool works great but maybe it takes too much time to start playing with the customization. Why don't keep it simple? Just at first glance you could show 5 or 6 color buttons to let the users play with the sandal color in just one click.