Step Counter App

A watchOS and iOS step counter app which gives users a glanceable view of their steps as a watch face complication with an accompanying iOS app.

App screen designs on iPhone and Apple Watch for the step counter app.
Apple watch showing a screen which shows steps walked so far, also showing the equivalents in miles and flights of stairs.
Apple watch showing a screen for reviewing the steps walked on each of the preview seven days.
iPhone showing a screen which shows steps walked so far, also showing the equivalents in miles and flights of stairs. It also shows the previous seven days.
iPhone showing a screen for learning about the trophies for meeting and exceeding multiples of goal steps.

Project Stats

  • Type Personal
  • Platform iOS
  • Status Published

Project Roles

  • User Researcher
  • UI Designer
Try Step Counter App
Design File for Step Counter App

Project Goal

Create a way for people to quickly see their step count on their Apple Watch face as a complication.

Target Audience

The user for Duffy is health-conscious. They’re probably best described as lay persons of the fitness world because calories and kCals aren’t how they measure their daily fitness goals. They use Fitness and Health apps in iOS.

Persona card for Bruce who just wants simplicity in task completion. Persona card for Tonya who wants to keep track of her walking during the day.

Research & Key Challenges

I casually talked with a few iOS Fitness and Health apps users. This is a personal project so I didn’t use the full research process I use in other projects. The iOS Fitness and Health apps require many taps to see the step count. The metric and graphs are useful but they just want a way to see their steps on the Apple Watch faces.

The key challenges are keeping the feature set simple enough to fit into native platform constraints. We also wanted to keep tight conceptual integrity because the smallest Apple Watch screen is only 340 by 272 pixels.

Initial Design Concepts & Wireframes

Sketches start in collaborative meetings between the developer and me. As I draw potential interfaces the developer immediately offers feedback on the level of effort and feasibility.

Handsketches for ideations on how much to show in the watch app. Handsketches for ideations on the iOS piece of the app.

Usability

I asked the iOS Fitness and Health apps users to review the initial sketches to get their initial impressions. Even though I skipped much of the usual research steps and artefacts I used affinity groups to communicate usability themes with the developer.

Usability cues taken from talking to people about their experience using the iOS Health app. Usability insights taken from questions from representative users.

Conclusion

It’s a free app and you can get Duffy at the App Store for your Apple Watch and iPhone. We are currently working on a WatchOS 10 version and an iOS 17 version.