My partner Matt has been a workout enthusiast for as long as I can remember. He's always stressed the importance of tracking/writing down not only your workouts but also your rest times because they're a crucial variable. Inconsistency between rest times can lead to drastically different workout results and can thus make it difficult to properly progress in your workouts.
For example if you're doing 5 x 5 (5 sets of 5 reps) squats and lift more than you did last workout, you want to know if it's because you're stronger and not because you rested for one additional minute in between sets.
While working out, Matt found it difficult to write down his workouts while concurrently tracking his rest time. While resting, he'd often switch between his Notes and Stopwatch apps, writing down his reps and weight while checking the Stopwatch repeatedly to make sure he started his next set on time.
Matt embraced the concept of "scratching your own itch" and utilized his previous experience with React Native to build Precision Lifts, a mobile app for recording workouts & tracking rest intervals in between sets.
The app received 70 unique downloads between Google Play and the App Store and got positive feedback on the r/lifting subreddit!
It had been a while since I had designed a mobile app (the last being WeEat 3 years before) — I found it SO much easier than designing a web app! I found that the designs came much more smoothly to me, mainly because I didn't have to work with as much space (and thus as complex layouts). I also didn't have to think about mobile responsiveness because this app was already mobile!
Members: Matthew Chan
As with many of our other projects, the team just consisted of Matt and me. In comparison to our other projects, I took more of a back seat — I knew this was a passion project for Matt, and I wanted his vision to shine through completely.
I assumed the following roles for Precision Lifts:
User Interface designer
Logo designer
Full-stack developer for marketing site
I acted as the core UI designer for the Precision Lifts mobile app after Matt built out a few app screens for the prototype. I asked Matt to send me screenshots of the prototype so I could get a sense of the workflows and UX.
I brainstormed design ideas and components in Figma before creating a lightweight design system:
Primary Color: Blue
Secondary Colors: Orange + Light Blue
Tertiary Color: Gray
Font Family: Source Sans Pro
My objective was to declutter the design and give the workout app a clean, modern look while maintaining some design complexity (collapsable/expandable accordions, a pop-up modal for actions, small icon buttons, etc.).
I designed the following screens:
Workout — probably the most complex page
(Workout) Templates
Exercises
User Profile
Log in / Sign Up
It was a great experience because I felt like I was able to explain my design decisions to Matt, and he was super receptive! I enjoyed seeing the progression — in the beginning, right after I designed the Workout page, Matt would share screenshots of the next feature he was working on. Those designs needed some rework to match the design system. But throughout the process, after I had designed the 5 screens above, Matt was automatically able to apply the design concepts to new pages like History and Charts!
To this day, despite having worked on a few logos, I still struggle with ideating and designing logos! After showing Matt my initial work, he did some design research on his own and gave me a few vector assets he liked. I worked off of one of those assets (a silhouette of a weightlifter) and combined it with a crosshairs vector I created. I thought the crosshairs would drive home "Precision" and the weightlifter would clearly do the same for "Lifts."
I chose the logo font after I designed the logo image. Because the logo image exhibited strength and precision, I settled on a font that also highlighted those qualities — Alegreya Sans SC.
Matt wanted to build a small marketing site to host a Privacy Policy (which I believe was required for both Google Play and the App Store), tell the story of how Precision Lifts came to fruition, capture emails of people interested in the app, and provide a way for users to contact him. Because Matt was busy working on the app itself, I volunteered to build out the site for him.
Vue has been my go-to JavaScript frontend framework for years, so I used it to build a super lightweight static site. It was quite simple and consisted of the following:
Layout Component — featuring a header, body, and footer
Home Page — The introduction featured the backstory, some copy, and an embedded Youtube video of Matt using the app while working out. The rest of the page included Google Play and the App Store buttons which would take visitors to each store respectively. The bottom of the page included an email capture form for users that wanted to receive app updates.
Contact Page
Privacy Policy Page
Figma — for designing the various mobile app screens, logo, and marketing website.
Vue.js, HTML, and SCSS — for coding up the static marketing site.
Amazon Route53, S3, and Cloudfront — Route53 for DNS, and I used Amazon S3 + Cloudfront to host the static marketing website.
Serverless, Amazon SES, and Amazon Lambda — Because the marketing website was static, I instantly thought about using a Serverless function to set up an API route for the site's Contact form (setting up an Express API would be overkill). So I ended up using the Serverless framework to write and deploy an Amazon Lambda function that would email (using Amazon Simple Email Service — SES) the contents of a contact message to Matt's primary email. The resourceful part of me also used this route to email Matt whenever someone entered their email address to receive app updates (though I never got around to hooking up an actual email capture provider like MailChimp, AWeber, etc. for this site).
Matt's posts on the subreddit r/lifting, where Matt showcased the WIPs and received feedback:
https://www.reddit.com/r/lifting/comments/bqw3ax/i_built_a_prototype_lifting_timer_app_to_help_me/?utm_content=body&utm_medium=post_embed&utm_name=1aeaa9a83d5545848d8734079a07999c&utm_source=embedly&utm_term=bqw3ax
https://www.reddit.com/r/lifting/comments/c7t0uo/a_month_ago_i_posted_a_demo_of_a_lifting_app_i/?utm_content=body&utm_medium=post_embed&utm_name=7b2b87f0f1c0471eab742c19fc4e0090&utm_source=embedly&utm_term=c7t0uo