"Hey! We have a product we want to try out and need something sleek to send to market. Can you help?"
Yes! The lovely founders of Herotag reached out to me to help them get their idea off the ground and onto the market. They are offering a service that provides sleek tags to place on your loved objects. If they ever go lost, people who find them are directed to go to herotag.com and are given the ability to enter the unique code found on the tag to help get the item back to its owner.
What Herotag needed was 3 things:
1. A beautiful website to explain the product with e-commerce functionality
What Herotag needed was 3 things:
1. A beautiful website to explain the product with e-commerce functionality
2. A quick and easy way for people to report found items via chatbot integration
3. A quick and easy way for interested users to subscribe to Herotag and receive their box of tags.
The team already had a subscription with Landbot and requested chatbot integration in the site.
Process
Stakeholder interviews
To get started, I learned as much as I could from Sarah, one of the Herotag founders about their vision, expectations and what they eventually want their service to look like. Together we examined competitors in the space such as Tile and from that understood what we wanted to deliver. The main idea was to get something launched as quick as possible and iterate later once we learned more about our users.
I was initially given a placeholder site (see below) with a landing page and integration of the chatbot. The main thing I wanted to bring to life were the clear pathways we wanted users to go down. This includes free exploration, product purchasing, and reporting of found items (all of which were not clear in the placeholder site).
I opted to build the site with Webflow.
Design Process
Because this product is in its early stages, I wanted to give the team a simple and scalable site with room to grow once the target audience was found.
What was more important to me was making the product purpose clear and highlighting the main product options for the user. Because we knew we would be iterating more on the site, the simple design language makes it really easy to add new elements.
The header highlights 3 oppurtunities for exploration. One is to learn more about Herotag and their purpose. The other is to clearly report a missing item. Lastly the user can click "Join Herotag" to enter the product purchase flow.
I was also lucky enough to already have great imagery supplied for the project that featured the product in a variety of action shots. This paired nicely with the simple design and aided in explaining the product.
Chatbot Integration
A core requirement was to have a simple onboarding process via the "Herobot" which is a chatbot that allows the user to purchase Herotags, report items, or get help with their account.
This Herobot prompt would be sticky across the site. When clicked, it would open up the bot for the user to play with.
This alone was not enough, I also opted to create a unique page on the site with the bot embedded that made it clear to users who may miss the chatbot prompt where to go and also engrain into users the main oppurtunities possible from the herotag website.
Webflow to Wordpress
Late into the project, the owners decided they wanted to switch hosting over from Webflow to Wordpress. Thanks to the Udesly tool, we were able to make this happen and carry over like for like design. This included all e-commerce functionality as well
Before
After
Product Page
Fully responsive
