"The Hustler"
Obi
UX designer
Swipabot AIO
Automating the E-Commerce experiences for sneakerheads
The Challenge
But first... let me give you some context to my "why"
It was around April of 2020 and like the majority of the people in the world at that time, I was at home more than I normally was and had a lot more time on my hands than I usually did due to working from home.
Being someone who has loved sneakers since the time I've been old enough to wear shoes, I had a hard time with purchasing them online due to the majority of the inventory being sold out in a matter of minutes after each release, thanks to what?
You guessed it, sneakerbots.
A sneakerbot is an automated software designed to autocomplete the checkout process and make multiple purchases in online sneaker shops.
In conclusion, we found that the problem at hand was that every day consumers were unable to checkout their favorite items via the retailer's website due to inventory being sold out in a matter of minutes and sometimes even seconds.
Putting it into action
My Role
Persona ✓
User Personas ✓
Wireframes ✓
Prototype ✓
Usability Testing ✓
Demo for beta users ✓
Okay so now that we figured out what we wanted to build, it was time to start putting idea to paper and start building. Now for us to just take a wild swing and make an assumption as to what our users wanted to see just didn't feel right
So before we did anything I took it upon myself to create a brief survey to one of the sneaker community chats I was a part of via Discord and to our surprise, we got some great feedback.
A few of the questions included:
Are you a manual user or do you use any type of automation software or alerts?
How often do you purchase sneakers on a monthly basis
What would be your preferred choice between a GUI or a CLI?
What are some features you wish you had access to as it pertains to automation checkout software?
User Personas
Based on the 100 interviews we conducted, we set up two personas. I referred to them throughout the entire product development process.
User Persona (1)
Overview:
Once we narrowed it down to two potential types of users, I started brainstorming and began to develop our user research by surveying 100 sneaker lovers that we knew in our network and asked them to take us through their sneaker buying experience.
These type of users are typically people who sell a couple of sneakers every now and then to make a couple hundred dollar profit.
Some of their biggest pain points include:
Lack of big budget to allocate towards reselling (and most sneakerbot solutions start at $500)
Having to manually attempt to purchase sneakers with no automation tools
Inability to use a CLI or issues with learning how to use GUI for other sneakerbots.
Taking all of these factors into consideration, I wanted to build an intuitive UI that the most novice sneakerhead could pick up and use seamlessly.
"The Reseller"
User Persona (2)
Overview:
On the flip side we understood that there was another type of user, the reseller.
Someone who does this either full-time or unlike your average sneaker-lover, this person will be looking to checkout multiple pairs of shoes per release.
Some of their biggest pain points include:
Inability to find an "All In One" (AIO) bot that supports multiple retail websites
Current bots on the market that can handle a substantial amount of tasks are sold out or marked up on secondary markets upwards of $10,000
Not having features that allow you use external technologies such as Proxies to maximize performance
In contrast to someone who does this for leisure, in order for this user to scale their operation without breaking the bank, they would need a solution that was not only intuitive but something that had the ability to support multiple tasks, even up to 200 at a time.
Customer Journey
To understand how customers find and interact with the service we created a Customer Journey Map.
Customer Journey Map
"This is where the magic happens" - Me
Design + Ideation
After missing out one too many times, I went to one of my colleagues and (fellow sneakerhead and Full Stack Engineer) and asked him how much he paid for his sneakerbot. When I realized I wasn't in a position to shell out that type of cash for a tool and on top of that still have to buy the shoes, a light went off in my head. What if we built one for ourselves?
While the idea was fresh in my head I started doing some research on some of the most widely used sneakerbots just for some inspiration and from there I started to make some sketches on a piece of notebook paper and pretty soon I had my foundation.
Sketches
I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
My main purpose in sketching these low fidelity wireframes was just to present it to my partner so he could understand what was going to need to be built first from a UI perspective.
I didn't look to reinvent the wheel when it came to features and functionality. Based on our research we polled with sneakerheads that already owned sneakerbots, I wanted to take the into consideration which features that they liked and ones they wish that were available
I ended up misplacing my notebook with the original sketch I drew and was overthinking as to what I did to decide which screens were going to be built, so I just bought a bigger whiteboard and did what I enjoy most, draw
I knew that I wanted to build a desktop application that was not only intuitive to use, but had inviting buttons, typography and aesthetic. So I used that as a base to start my initial wireframe
User Testing
Normally we would've created an engaging environment where we conducted our User testing, however due to Covid we were forced to do everything remotely. We understood from the beginning that it was likely that we would only have 1 testing scenario so with that being known, we took it upon ourselves to ensure that the demo process was well documented.
In order for us to get the best insights about the user flow, we figured it was best to test by allowing a select group of user to simulate going through and:
Create a Task
Create a Profile
Add billing & shipping information
From 20 insights that came from user testing here are the top 3;
All users loved the initial home screen which is in a form of a dashboard that allows them to view a quick glance at their analytics (Example in next section)
"Love the fact that there is an option to copy Billing info and auto-fill it with the Shipping info" Users enjoy the ability to auto-fill information so they don't have to waste time filling out repetitive info.
Overall users said that they loved the fact that the Call to Action buttons were visible.
Dashboard screen
UI Design
Once I tested out all usability mistakes, I started designing the final screens in Figma.
Conclusion
"Dress it up and make it real for me"
The last phase was to put this into development and bring this bad boy to life and build out a functional Beta using HTML, CSS and React.
After confirming the features and screens we wanted to go with for the first iteration with my partner, from there he took the next 8 weeks to develop the desktop application so that we could begin testing with our community for feedback.
Beta testing (closed)
At first we only intended to give this to our closest friends and associates so that they can give us some solid feedback, well that's until word got out as to what we were building via social media.
Once the cat was out of the bag, we knew we couldn't keep a low profile forever and that sneakerheads were almost salivating for another technology that will help them secure their favorite exclusive items.
In order to start building our community, we wanted to have our core user base and offer "Lifetime Keys". In doing so, they would pay a one-time fee for their keys and get exclusive access to the Bot and our community prior to the general release. In addition we allowed them to be considered our first adopters and gain the knowledge base directly from the operators.
We decided to create 100 license keys and just randomly put it on our website for sale for $100, to our pleasant surprise they completely sold out in less than 8 hours!
20
Iterations
15
Screens
100
Beta users
Takeaways
Looking back on it, there were many things I would've done differently in hindsight. One being that I would most certainly included a more interactive and smooth onboarding process. As we were looking to get feedback as to what could be improved upon, many users echoed the fact that they would've benefitted from a splash page or some similar that allowed them to toggle through and get a preview of some of the core features.
I took responsibility for making the assumption that most of the users would at least have some prior knowledge in using similar platforms. However I understand now that no matter the experience level, each user would benefit from some additional context as to what to expect from the platform prior to them even signing in. Nonetheless I was thankful for the great insight and look forward to giving our users a new look and an improved user experience.