I remember catching up with @wil.metcalfe back in 2019 when he told me about Actifit for the first time. I’d never been an individual who’s had any resemblance of a fitness routine, and to me, something clicked. I immediately downloaded it, and even though it was in the early stages at the time, I thought it was so cool that I could get rewarded with magic Internet money for exercising. :D The idea of a decentralized distribution system was (and still is) so profound, and even though Actifit was not the first to do it, I feel like they are one of the best examples of applying this idea. It was honestly a turning point for me, and it reshaped how I viewed the entire crypto community.
Fast forward a few years, and I’d admittedly gotten out of my fitness routines once again. I have had two children since, and a lot of the time, it feels like life has been on autopilot! This last holiday season, I wanted to carve out some time to take on a pet project, and Actifit immediately came to mind. It’s been a long time since I’ve approached a project this way, and honestly, even though it was just for fun, I’d probably avoid diving this deep into something without any discovery process. Regardless, it was an excellent way to brush up on my logo design skills, 3D illustration, and UX/UI design.
Divergent Exploration
I began by thinking through what Actifit is at its core (at least from my perspective). I identified three core components that work in tandem:
Fitness
Of course fitness is a core component here. I think this goes without saying.
Community
I can’t think of any other fitness app with such a dedicated and close-knit community as Actifit. Not only that, but the reports drive social activity.
Rewards
Whether it’s the AFIT tokens, new marketplace products, or even delegation, the third main component is certainly this general idea of being rewarded for contributing to the other two components.
Convergence and Refinement
The most exciting thing here is that these aren’t really “pillars”, and they act more like a cycle or system where each one feeds into the other and makes each component better. It’s like value-added to the power of 3. This realization lead me to the eventual concept of something like a “tri-force”. I wanted to capture the movement and energy of the existing logo, and simplify and abstract it to allow it to work in both tiny and massive implementations without scaling issues. The triangle not only communicates community and strength, but of course, it works to communicate the first litter of Actifit and AFIT.actifit-redesign.
When I drew the bottom left version, I was happy with the concept and dove into the 3D illustration to see how it would look on a coin. I liked it, but I felt it didn’t have enough sleekness or energy, so I refined it further and ended up with the vectorized versions here.
The red is an integral part of the current Actifit brand, and I wanted to keep that, but I did tweak it a little bit to increase the contrast ratio and help make it slightly more legible for smaller applications. I added some slight tweaks to the wordmark to make it more unified with the logomark.
Of course, I needed to make sure it worked in one color on black and white.
Web Design and Illustration
The concept for the landing page came to me as I was reading through the current home page. The main slogan on the site is “Rewarding your everyday activity”.
I would have spent a lot more time on this stage if it weren’t just a concept, but I decided that the best target audience (at least for now) was probably folks who are not necessarily drawn to Actifit through fitness, but more so through the blockchain community. I immediately shifted gears away from thinking about it as a fitness focus. I tried to think of ways to capture the idea of doing something relatively simple and getting rewarded for it. Walking the dog seemed like the perfect fit. A casual activity that gets you outside and gains you AFIT tokens as you enjoy your walk.
I had only started learning 3D illustration a few months before this, so this was an excellent project to apply some of my learning. I modeled and rigged the man and the dog going for a walk, as well as the coin stacks.
UX/UI Product Design
I intended to stop after the landing page, but I couldn’t resist jumping over and at least doing one or two quick UI redesigns on a couple of existing app screens. I chose to do the step tracking screen first as this is the screen users see most frequently. The main goal here was to introduce some delightful visuals while balancing simplicity to fit all relevant information on one screen. The blue that I introduced in the landing page design works nicely to help break the content up.
To keep the user engaged and motivated, I wanted to provide a fair amount of space dedicated to custom supportive messaging. I restyled the step tracker so that more information could fit inside of it, and I also made the 5k and 10k targets slightly more emphasized. I added a new chart to visualize your approximate steps broken down through the day. This way, you could take a look at it and see that you walked, say 30% of your total steps at the grocery store, and you’d have a good sense of how many steps that activity accumulated. And as shown, I drastically simplified the weekly chart to emphasize the general progress for the week.
The user profile page was an experiment to see how the current visual identity I developed applied in a completely different context. Instead of having a visual-heavy page, you have a text-heavy page. I didn’t spend much time on badges here because that’s a whole other rabbit hole to fall down, and I realized I had already gone way too far without getting any feedback from the people who use this every day. 🤣
What do you think?
So, that’s where this post comes in. I would love to hear what you, the Actifit community, think about the direction here.
Did I miss the mark completely?
Do you think Actifit even needs a design refresh?