Hey, dad.
In the next elections, I want to show you various examples from my own website of that ro, the reason
I'm focusing on it is because I have access to its analytics.
The takeaway is that after implementing a list of about 25 edits, I managed to double my monthly sales.
Yeah, you heard that right?
Doubled from 5000 to 10000 dollars per month.
Well, that some isn't that impressive for the fairly new startup.
That's just catching speed.
I'm very happy with our trajectory.
Plus, I wanted you to know that it's not from 100 to $200 or something ridiculous like that.
OK, here's the old version of the website in Chrome that's installed on my own computer, hence why
the URL says local host.
And here's the current one.
The live one in Firefox.
Let's start with the biggest change the best example of good UX that I can think of.
Say you want to purchase two pancakes, two flavors of oatmeal, one lemonade and one year pudding a
typical order?
It seems simple enough, right?
The pancakes are right here, and they Chris Barron was smart enough to add this icon to the which.
You can add the product directly to your cart so you don't have to enter each product and click on Add
to cart.
Then go back and repeat the process for another product.
Smart, right?
So I have to bang geeks in my cart.
By the way, the speed is blazingly fast because, like I said, this is a local copy of the website.
Now let's add.
A. M..
Hmm.
Notice what just happened.
We've just been brought back to the Pancakes tab.
We have to click on oatmeal yet again to continue shopping.
There it goes again.
Maybe it's a bug related to this category.
Let's bag a lemonade.
Boom.
Ben Geeks.
Hmm.
OK.
And finally, a pudding.
Oh, you want the pancakes?
This is a horrible shopping experience.
This is bad UX point blank.
Let me show you the updated version, which is the best example of good UX.
Well, at least the best improvement.
Boom, boom, boom, boom and boom.
In the updated version, the tab no longer jumps.
Actually, the page doesn't refresh at all.
If we go back to the old version.
Have a look at the stab.
What the refresh icon at the top of the browser.
Notice the refresh in the working version.
This was actually quite slow, which was even more upsetting.
But in the updated version, this is no longer the case.
Furthermore, we get a message that pops up at the bottom of the page that says the product has been
added to the cart.
The icon also features a plus inside that, so it better transmits what this button does.
But all these fine details can be talked about at a later point.
Clearly, this is a better user experience, hands down.
But what I actually wanted to talk about in this lecture was how I ended up with this awful version.
Me, a Photoshop instructor, specialized in web design.
Well, let's take a step by step.
First, I didn't code the website.
I use the big coding company from Romania very well respected with a large team of coders.
Of course, I created the lovely design in Photoshop Pixel Perfect, and I also made an interactive
prototype in Adobe XD.
I was a dream client for them.
The problem is, I didn't mention the page should not refresh after the item has been added to the card.
I couldn't say that to Photoshop, nor the my interactive prototypes to tell you the truth.
I didn't even think of it.
Why would I?
I was focused on the design side, the UI, but also on things like the checkout process, simplifying
the registration process, making it easier for the user to add his address the add to cart button on
the home page.
Those are all the UX related tasks, so it's not like I didn't care or that I was ignorant.
No.
Instead, what happened was the coders were not managed properly, nor did they care enough about the
outcome.
They didn't have the attention to detail for it.
Their task was to implement my design.
Make it work.
Can you add the product to your cart?
Yeah.
Case closed.
In a way, it's like giving a computer the task to end all diseases on Earth.
The air kills all the humanity.
Did it complete the task successfully?
Yeah, it just did it in an unexpected way with grave repercussions.
Listen, it's easy to blame the coders.
They're actually good guys, and I don't want to offend anyone.
But in this situation, it's on them.
The trouble is, it's debatable.
At the end of the lecture, I'd love to know your input, too.
But let's keep going.
The next thing is, I cleverly ask them to create an option in my admin panel through which I could
choose which tab would be active by default.
The reasoning is sound I may want to promote my pancakes this week, but in the next week, that may
be the key pudding.
The one after that, my lemonade and so on.
Basically, I wanted to control what the use of the CS to my admin panel.
Well, the default tab is set to pancakes after the user moves to a new tab and has the add to cart
button.
The default tab jumps into action, obviously when I ask them for that controller.
I didn't assume this would happen.
It's mind boggling.
Is it my fault?
Again, it's highly debatable.
Most of you would say no.
And you know, at the end of the day, I did my best.
They created the design and Photoshop Pixel Perfect.
I made an interactive prototype, which ninety nine point nine percent of clients don't do.
I help them with the handover process.
I help with the testing.
I just didn't expect this outcome because it's unreasonable to assume I, as the client or as a designer,
know what's the best practice in terms of tabs on the home page and how this process of adding an item
to the card should work.
That's a coding technique, and they should know about it.
Only when a freelancer came into the picture, they found out the big company should have used JavaScript
for their two card feature.
The Indian I'll do my best to pronounce his name.
Sanket did a great job.
He followed my instructions and with his help, I managed to double my sales.
Of course, this no refresh to card thing was just one part of the equation, but it was one of the
biggest improvements.
Now you may ask, why didn't the coding company fix it?
Will they charge something like $50 per hour where the freelancer charges less than half that amount?
I'm throwing out random numbers, by the way, these are not actual prices per hour, but the fact that
it wasn't a clear cut bug, a mistake on their part in terms of functionality, it's a bit tricky to
ask the coding company to do more work, assigned the code to my project for the more hours, yet not
bill me in the way.
In this case, it's like not being greeted at the restaurant.
Instead, you have asked point blank, it is the version.
It's common courtesy to greet someone when they come to the door.
But if they don't.
Is that a strong enough reason to complain again?
The coding company technically did their job.
They implemented the site.
It wasn't what I expected.
But is it their fault that I have certain standards?
Where does it end?
At what point am I asking for too much and at what point do they not care about the outcome?
At the end of the day, this is the best example of attention to detail and poor UX that I can think
of.
I look forward to your opinion, ideally on the Discord chat.
Thank you.