CASE STUDY

Step Counter App

Type
Personal
Platform
iOS
Status
Published

1 — Project Goal

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

2 — 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.

3 — 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 key challenges are keeping the feature set simple enough to fit into native platform constraints while keeping tight conceptual integrity.

4 — 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.

5 — Usability Testing

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.

6 — 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.

Try the prototype →

Skills

Accessibility

Designing and coding within accepted standards to ensure equal access regardless of technology.

  • Accessible Markup
  • Proper ARIA
  • WCAG 2.2
  • Screen Readers

Design

Design means intentially creating for both the users’ task outcomes and the business goals.

  • Inclusive Design
  • Design Systems
  • Product Design
  • Visual Design

Technical

Technology is how we build products. We must consider feasibility, accessibility, and timelines.

  • Accessible Markup
  • Frontend
  • HTML, SCSS, CSS
  • Working within technical constraints

User Experience

This means learning about users and designing for their needs while respecting the business goals.

  • User Research
  • Information Architecture
  • Accessible Content
  • Public Speaking

Certifications

Practical Accessibility
Certified by Sara Soueidan
2025-01-07
DHS Trusted Tester
Certified by Department of Homeland Security
2024-10-28
Smart Interface Design Patterns
Certified by Smashing Magazine
2024-05-31
Designers Accessibility Curriculum
Certified by Deque University
2023-03-09
W3C Intro to Accessibility
Certified by W3C via edX
2021-12-22
Google UX Design
Certified by Google via Coursera
2021-11-24
Interaction Design
Certified by UC San Diego via Coursera
2018-05-27

Talks

Just in Time Usability

Isral Duke presents why accessibility is important for business. He also presents 10 things that site owners can do to quick check their site's accessibility and usability. Presented at a local ecommerce group lunch.

Accessible, Friendly Content

Isral Duke demonstrates how iOS and MacOS VoiceOver presents a simple web page. This talk promotes the use of semantic, meaningful markup to make a better user experience. Presented at Google Developer Groups.

Building Pelican Design System

Isral Duke presents version one of Pelican Design System. He talks about how it was created, and what's coming next in version two. Presented at SQL Saturday.

References

James Alt’s LinkedIn avatar. James Alt Chief Architect at Louisiana Office of Technology Services Kristina Truong’s LinkedIn avatar. Kristina Truong UX Designer at Louisiana Office of Technology Services Elle Waters’s LinkedIn avatar. Elle Waters Accessibility at Workday Guy J. Anglade’s LinkedIn avatar. Guy J. Anglade Director of Website Content at Morgan Stanley Patrick Rills’s LinkedIn avatar. Patrick Rills Engineering Manager at RevenueCat Glynnis Ritchie’s LinkedIn avatar. Glynnis Ritchie UX / UI and Product Designer at Flagrant Dr. James Davis’s LinkedIn avatar. Dr. James Davis Freelance client at Louisiana State University Matthew Magnuson’s LinkedIn avatar. Matthew Magnuson Managing Partner at DMM Motorsports Mike Cole’s LinkedIn avatar. Mike Cole Product Manager at Harman