Getting People to Click
The importance of testing your designs with your users.
In April 2018, I co-founded a tech startup called Shoot, a marketplace for booking photographers for portraits, family photos, graduation, and even weddings. My other cofounders were in charge of business and community, and marketing. When I started working on this project in August 2018, I had no clue about user-centered design principles or even usability testing.
I was handling project management, development, and design for our product. It’s a lot of hats and that can get overwhelming. You can also make very obvious and stupid mistakes.
The Problem
Above is the screenshot of our website from September 2018. We thought it was simple. You have the photographer's name, their starting price per hour/session, their specialty, and a picture of their work. I sketched it out and showed my team. Everyone agreed and I then coded it in HTML and CSS, because we were in a rapid prototyping mindset.
What we learned
I ran into a friend and told him about a side project of mine and if he would give his thoughts. He opened the website on his phone and just kept scrolling and asked, “where is the rest?”. I realized that he thought this was like Instagram. I had to point out that you can click on them and that those are photographers.
It wasn’t an isolated incident as my partner ran into the same problem. There was no indication as to the purpose of the website, and no call to action button on the cards themselves. Moreover, the users assumed that the person in the photo is the photographer. We didn’t make any of that clear on the first design. We didn't even think of it.
What we did next
Our mistake was thinking like we are the users. Of course we didn't see anything wrong with it, we were looking at it all the time!
We went back to sketching out ways to fix this. We added the "View Profile" button so the users know where the button is taking them and the card only provided a bit of information to entice them. Orange was a brand color choice so we went with that, allowing the button to stand out. We added a small circle containing the photo of the photographer next to their name so that the user can differentiate between that and the bigger image which was intended to be a snapshot of the photographer's work.
Testing, testing, testing
So, what now? We knew we were going to approach users on the streets and get their feedback, but we needed to do something more. So, we used a tool called Hotjar to monitor user behavior on our website. It had the ability to record sessions and generate heatmaps based on how users interacted with the website on desktop and mobile.
We noticed that people actually paid attention to the "View Profile" button and it prompted them to visit that photographer's profile. Crossing that hurdle allowed us to move on to more important things, like expanding our options and photographers.
Conclusion
The final version was rolled out during the graduation season of the Spring semester of 2019. It also included a 5-star rating on the cards because customers asked for it. It also signified that we guaranteed that the photographers were exceptional. Marketing was done on campus through flyers and word of mouth and on social media, primarily Instagram. We made around 40 photoshoot bookings during that graduation season. Customers were satisfied with both their photoshoot and the overall booking experience.
Check out the full case study where I talk more about the product and a few other things I wish I had done better.