I have built a website that offers to people a stringing service for tennis rackets. I want to set up a checkout system for this service on our website and make sure it is designed amazing well with the best UI/UX on both mobile and desktop. I must see Design Examples! I'm open to any store plugin that works with WordPress.
There are 2 services. Drop off service or Mail In Service. The Drop Off Service can be in select cities. They can just choose the city (Franklin, TN, Birmingham, AL, etc.). Drop Off starts at $10. The mail in service cost is $19 + other factors. So when someone chooses to purchase, it must start with a base price of $19 (or whatever price it is at that time). I'd love it if they could see a quick preview of the first 4 steps and we could allow them to start with the step they believe is most important to them. Then, when they finish that step, they are left with 3 more and can choose what's next most important to them. To give you some context, here's how a competitor does it - [login to view URL]
By the way, their UI/UX is TERRIBLE! I hate the way their site looks and works so do not copy it. This is just so you understand what the outcome is that I'm going for. I want to make our checkout look and feel 10 times better and less confusing.
Step #1 for the person is to choose their string type. There will be a list of all of them (View All) and they can filter down this list to the following (I want to be able to change this list):
3. Synthetic Gut
4. Natural Gut
I want to have a place beside all of these types of string where they can hover over it or click to learn more about why they'd choose this type of string. This could be a link to a post done on the site.
Step 2 is to choose their color. This again acts like a filter to narrow down their options more. They can choose black, white, blue, pink, red, green, bronze, brown, gold, gray, natural, orange, or yellow.
Step 3 is to choose their gauge. Again, would love to be able to link to an article or post that can inform them on how to make this decision if they're unsure. Options would be 15, 16, 17, 18, 19, and 20.
Step 4 is to choose their Brand. I may not provide this step at all in the future so I'd love to make it a step that I can easily remove if I decide we do not want to offer it. Same with the step for colors. So make this so that you can teach me how to add or remove steps if necessary. Options for Brand at this time are just Babolat, Head, Wilson, Solinco, and Prince.
Step 5 is to choose their TENSION. This is dependent on the string they chose so this step is different based on every possible SKU. Be aware of that and the options are 40, 41, 42, 43... all the way up to 80.
Step 6 is to choose the turnaround time. Options are:
1. 3 Days After We Receive It - $10
2. 4-6 Days After We Receive It - $5
3. 7-10 Days After We Receive It - Free
Step #7 - Add an Item to your checkout. Give them two options. Tennis Balls or Over Grips. They choose one and a list of options appear that they can choose from.
Now... at some point either now or after they check out. I need to know their name, address, phone #, email, and the type of tennis racket they're sending me. That ensures we do this correct. I'd like for the person to be able to set up an account on our store so that this information is all stored for next time. A history of past orders would also be great to store for them.
Then, they should get a printable PDF that is their order confirmation. They must ship that to us and it will have their full order and info on it along with our contact info for any changes.
Print out the order confirmation and place it in your shipping box.
Ship to the following address: [login to view URL], 2010 Belmont Circle, Franklin, TN 37069.
I have a few questions regarding the specs that you have provided. Could we please have a word? My Skills: User Experience Design, WordPress, eCommerce and Graphic Design