Originally posted Jan 30, 2023 on Dribbble · 5 min read
Sweatcoin is an app with over 120 million users that rewards them with digital coins for steps. While the rest of the team was occupied with the new product launch, we decided to take on a fun side project.
We had a product designer (me), an excellent front-end developer (Aleksandr), and a skilled writer (Tanya) available to take on the challenge.
Sweatcoin uses in-app mechanics, influencers, and ads to bring in new users. These methods are efficient, but they have a low potential of going viral without constant investment.
It was time to get creative and come up with a solution that would go viral, attract new users, and increase the reach of the Sweatcoin brand.
If we distribute mini web products (lead generators) to our existing users and influencers, they will find it valuable and share it with their networks, which will increase daily registrations. As an example, we were looking at The Pudding’s “How bad is your streaming music” web project.
We gathered our top dogs (aka the Growth team) together to brainstorm ideas for various web products we could create to go viral and attract new users in a more organic and natural way.
At the end of the session, my idea for a dog step calculator gathered the most points using the ICE framework - a tool used to help make decisions. It stands for Impact, Confidence, and Ease.
This project would not only be valuable to dog owners, but it would also align with the company's mission of making the world more active.
Our design process for this side project was simplified:
We started by defining some success metrics, user stories, and goals for this idea. Then we planned possible user journeys for both Sweatcoin users and those who had never heard of Sweatcoin. We discussed ways of sharing the website and informing visitors about our app.
We wanted to focus on the most active social media users—Gen Z. So, I collected various Gen Z brands that stand out with their bright neon colours, bold fonts, and crazy designs. I also looked for dog illustration packages to find our style.
I came across Midjourney AI quite accidentally and decided to try it. Since I was working on a bold Gen Z project, I tried to create a few dogs we could use. Everyone absolutely loved it, so that became our starting point in overall style and vibe.
In the early stages, we created the quiz prototype to test on other Sweatcoiners, our families, and friends. We received some helpful feedback from dog owners and added some random questions to make it more fun.
We wanted to make the project as shareable (and pawsome 🐾) as possible. So, I spent more time on the results page, drawing inspiration from the game design and stats pages. I was also responsible for creating the quiz logic, outcome scores, and step calculation formula.
To keep things consistent and make it easier for developers to build repetitive elements, I created a simple design system with the most necessary colours, typography, and components. As I was the only designer on this project, a very minimal design system was sufficient.
As this project was highly experimental, we wanted to keep it fast and simple. So, we had to simplify some features & screens. We also had to limit our sharing screen to just a few options: Facebook, Twitter, and Copy Link.
You can check the MVP live here: sweatco.in/sweatpaws
The first tests showed promise, with a 27% email open rate and a 5% conversion rate of page views to shares. Unfortunately, the team had to pause the test as we had more urgent app-related priorities. But, one thing's for sure, this dog step calculator is sure to be a tail-wagging success.
This playful dog step calculator is designed for GenZ and their love for dogs. I was experimenting with neon and Midjourney AI to bring you a truly pawsome user experience.
Being an international app with 100M+ users around the world has its challenges. One of the biggest challenges is language — and how language affects interface design.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.