Getting Active: the Beginning
How to design and build a personalized social workout schedule and stick to it using invision, vue.js, and dexie
Why I do this?
I never exercise, ever. Now I find a way to exercise, and I want it to stick.
Back in college, I took ballroom dancing and “walking and jogging” to fulfill my physical education credits. Yes, walking, that’s a class where you walk around in circles in the field 6 times then sign-off. It’s the class for a person who never exercises like me, and I was not alone.
Going to exercise is not hard, really. You show up, you do it, then you feel good, and want to go again. But there are two huge challenges:
- The exercising environment is de-motivating
- There’s no real way to track your progress especially in the beginning when all you feel is pain and weakness
I tried the gym, I tried youtube follow-the-screen videos, I tried x-minute workout apps, none of them work for me. The biggest issue is that I don’t I feel that I fit any of these regimes: the gym is too intimidating while following on youtube is just lame.
Then I encountered the organized group exercises. It is social; it is fun. You receive instant feedback as you go through the various moves. And the best part? You see people like yourself: the skinny and unmotivated types that are on their path towards a better lifestyle!
There are many offerings within the community and it is quite disorienting. I want to know which one is right for me, when it best fits my schedule today, and whom I can go with. That’s when I decided to build my own little web tool to push and commit myself to fitness (no pun intended :P).
This is part I of the two halves on building this app. Here I’ll focus on the first non-social MVP, dissect the design and the minimal tech used. The follow-up story will showcase the social functionality and UI iterations.
The Design
Here are the values I want to create. The end-product should be:
- flexible, not schedule-rigid like a calendar but adaptive to your day
- social, both in terms of bragging and planning with friends
- calm, not notification-crazy that diminishes the power of each nudge
A First Try
To begin, I imagine a clean interface where I can easily search for various offerings, add them one-by-one to my own schedule, and have a super easy way to interact with each session.
Here’s how the paper mock looks like:
The search bar communicates with a calendar API to fetch target sessions available today and tomorrow, and display a multi-select for the user to add to her schedule, which is displayed in the lower half of the screen with chronological entries. The user can interact with each entry by swiping left to dismiss the series or swiping right to leave a note on that particular session.
The Stack
I believe in simple and reliable solutions. I decided to build it as a web app to leverage the ubiquitous browser platform which lowers on-boarding barriers. Here are my detailed choices:
Front End
I use the beloved and well supported vue.js, a progressive javascript framework that is approachable, versatile, and performant. For styling I use Buefy together with Bulma, a modular and modern CSS framework (first-timer!). The UI components look beautiful and clean out of the box, fitting for this simple little web app.
Back End
I always advocate for crazy simple database solutions. In our first iteration, there is no social component. A browser baked-in database such as indexedDb would be ideal. Dexie, a minimalistic wrapper, would come in handy.
First MVP
After some tinkering, here’s how it looks now:
Feel free to play around with it here.
Next up: hooking the web app to the social network and more, stay tuned!
PS: shhh… a little secret, type “cinema” to look for movies showing today and tomorrow ;)
Resources
Screencastify for making the demo video on browser
A detailed discussion on various design considerations for multi-select
