Mobile app product development for a pet wearable device. Product tracks fitness and health stats. Also, includes tracking service and remote access to dog door. Presentation for SMU UX certification class.

1. [un] leash
Presented by Nicole Copeland & Tiffany Tran
January 10, 2017
UX activities

2. typical UX process
explore generate evaluate
user research design/build usability
Master
UX Plan
• Rapid Prototyping
• Sketched Workflows
• Design Pattern Analysis
• Mini-Flows (low-res)
• Workflow Analysis
• Click Prototype Build
• Blink Test
• Initial Impressions Survey
• Deep Dive Probe
• User Driven Scenarios
• SUS Survey
• Brian’s Survey
• Heuristic Evaluation
• Comparative Analysis
• Competitive Research
• User Stories
• Journey Maps

3. user research

4. You perform user research to understand a problem, your users,
their context, and hidden opportunities.
For this product, we performed a competitive analysis for wearable
technology and fitness mobile apps.
• Let’s have a quick overview
• Top 3 Positive Findings
• Top 3 Critical Issues (and Recommendations)
explore
user researchuser research defined

5. Feedback: Visibility of System Status
Metaphor: Match Between System and Real World
Navigation: User Control and Freedom
Consistency: Consistency and Standards
Prevention: Error Prevention
Memory: Recognition Rather than Recall
Effort: Flexibility and Efficiency of Use
Design: Aesthetic and Minimalistic Design
Recovery: Recognize, Diagnose & Recover from Errors
Help: Help and Documentation
10 heuristic principles
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

6. 1. Effort: Simple activity monitoring/GPS tracking experience.
2. Design & Consistency: Consistent minimalistic design aesthetic.
3. Metaphor: Personalized content and social sharing.
competitive analysis overview
explore
user research
Whistle
Top 3 Positive Findings Top 3 Critical Findings
1. Missing Feature: Unable to call dog from app.
2. Poor Visibility: Contrast ratio and legibility of data.
3. Missing important alerts & notifications - low battery.

7. 1. Feedback: Useful data promoting healthy pets +
notifications for out of norm stats.
2. Effort: Wireless sync to collar, long battery life
and easy to charge. Easy to use.
3. Help: Blog, health tips and support community
complimenting app.
competitive analysis overview
explore
user research
FitBark
Top 3 Positive Findings
Top 3 Critical Findings
1. Design: Too many colors and stats to decipher
on one screen. Visual clutter.
2. Memory: Potential cognitive overload and
memory recall between screens.
3. Effort: Smartphone app sometimes slow to
update.

8. 1. Social Sharing + Breed Comparisons
2. Durability: Water resistant and able to withstand
extreme conditions.
3. Easy to recharge. Sensor easily detached from
collar so it can be charged.
competitive analysis overview
explore
user research
Link AKC Smart Collar
Top 3 Positive Findings
Top 3 Critical Findings
1. Map Features: Unable to create walking routes
or save existing routes.
2. Lost Dog Mode: Only enter or exit mode.
Missing ability to report pet is missing.
3. Lack of personalization: One collar fits all.

9. 1. Design & Consistency: UI elements + design patterns.
2. Effort: No learning curve to understand how app works.
3. Feedback: Gamification + motivation alerts to user.
competitive analysis overview
explore
user research
Human
Top 3 Positive Findings Top 3 Critical Findings
1. Navigation: Small hard to hit targets.
2. Metaphor: Maps on app are not a real location service
of nearby friends or Human app users.
3. Feedback: Activity readings dependent on having phone
on hand versus wearable device. How accurate is reading?

10. Left Hand Combined Right Hand
wearable heuristic usability considerations
THUMB ZONE MAPPING
• Flexibility & Ease to quickly access core functions by simple, big UI features.
• Recognition rather than recall since user persona knows a wide variety of UI’s and gestures.
• Keep aesthetic a simple, minimalistic design for a quick scan of tracking functions while on the go.

11. – Dog Owner and Savvy User of Wearable Technology
“I need a diary of my pet’s sleep/rest and
active/walking activity, while considering
breed and age, to compare his own stats
with other dogs. It would be cool to know
when something is out of norm
and visit to vet is needed.”

12. wearable heuristic usability considerationsThink & Feel?
Say & Do?
See?
Hear?
Happy Path Sad Path
• User Sees Daily Goals Met
• Reward System Motivates
• Pet Healthy = Owner Happy
• App Fails to Detect Health Problem
• Data Fails to Cumulate if Battery Dies
• Durability of Collar Fails with Activity
Yah! Tucker is healthy
Wish, I didn’t need
to rush home to let out Tucker!
I want all my friends to
see Tucker is the real Alpha Dog!
I’m competitive by nature!
Hanging out at the dog park
a lot these days.
Why is my dog panting
so much?
Wearables are the
new THING!
Phone is buzzing.
What’s going on?
Help, Tucker is missing?
I can’t see or find him!!!
I’m traveling and miss Tucker.
What’s he up to?
Why is Tucker barking?
What’s the weather?
Ok, for a walk?
I don’t have time to digest
loads of charts & data.
Wow, we really walked 30 miles
together last month!

13. UX design

14. We developed a product that does these things:
Activity Tracking and Rest Monitoring
Wireless Sync (Mobile App, Collar & Doggie Door) + GPS
Sharing and Personalization based on breed, age and weight
unleash mobile app overview
1.
2.
3.

15. Workflow slide of on boarding & dashboard
onboarding and dashboard workflow
FLOW #1 - ONBOARDING
FLOW #2 - DASHBOARD

16. on your mark, get set, sketch!
rapidprototyping
generate
design/build

17. user flow diagrams generate
design/build

18. usability testing

19. Identify errors and difficulties faced by users in completing tasks
using the mobile app.
Determine if users would be able to successfully understand icons on
dashboard.
Assess the initial impression of the dashboard and ease of icons for
filtering stats.
Determine users’ subjective satisfaction after completing basic tasks,
such as looking at location tracking of pet.
Obtain feedback after the users had completed the tasks.
usability objectives
evaluate
usability

20. • Six people participated in this test. All users were not familiar with
the product.
• Participants were asked to think out loud while they were performing
the tasks.
• All participants performed four sets of tasks (Initial Impressions, Blink
Test, Basic Tasks and SUS survey).
• After working with the product, participants were asked to rate tasks
during the test and to rate their satisfaction at the end of test.
high level test overview
evaluate
usability

21. Initial Impressions

22. INITIAL IMPRESSIONS OF DASHBOARD
LAYOUT
VISUAL
NAVIGATION
OVERALL
6.33
6.83
4.83
6
RATING SCALE
1 = VERY DISSATISFIED
7 = VERY SATISIFIED

23. 3 WORDS FOR DASHBOARD
• easy to use, fun, dog-friendly
• fun, easy to read, friendly
• easy to use, straightforward, clean
• simple, health oriented, immediate
• pretty, usable, a icons a little confusing
• informational, reaching goals,
organization/planning/scheduling
REPEATED WORDS
fun, easy, friendly

24. System Usability Scale (SUS) Results

25. I think that I would like to use this
system frequently.
I found the system unnecessarily
complex.
I thought the system was easy to use.
I think that I would need the support
of a technical person to use this
system.
I found the various functions in this
system were well integrated.
I thought there was too much
inconsistency in this system.
I imagine that most people would
learn to use this system very quickly.
I found the system very cumbersome
to use.
I felt very confident using the system.
I needed to learn a lot of things before
I could get going with this system.
10 questions of SUS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

26. 0
22.5
45
67.5
90
User 1 User 2 User 3 User 4 User 5 User 6
SUS Scores < 60 indicate poor usability
AVERAGE SCORE = 60
SUS scores recap

27. 0 10 20 30 40 50 60 70 80 90 100
WORST
IMAGINABLE POOR OK GOOD EXCELLENT
BEST
IMAGINABLE
NOT ACCEPTABLE MARGINAL ACCEPTABLE
SUS ACCEPTABILITY RANGES/ADJECTIVE RATINGS
LOW HIGH
60
SUS SCORE

28. Usability Tasks

29. TASK # 1 SCENARIO:
Filter Walking Activity by Date
4
RATING SCALE
1 = VERY DIFFICULT
7 = VERY EASY
RATING AVERAGE

30. dashboard activity filtering by date function
FINDING:
Half of participants failed to swipe right
horizontally to access animated side drawer
menu to filter by date. Action was not
intuitive.
RECOMMENDATION #1:
From iOS7, Apple has started pushing the
horizontal swipe as back. The wrong UI
for swiping right was used adding to
user confusion.
Most users would never discover this feature.
Hamburger menu is the right UI element
to signify side drawer menu for date filtering.
RECOMMENDATION #2:
Eliminate swipe right for side drawer menu and
design UI element to filter date that is visible
on dashboard.

31. dashboard activity filtering by date function
FINDING:
Participants struggled with icon
naming conventions and/or chronology
next to symbols. Multiple comments about
simplifying the call to actions
on the dashboard.
RECOMMENDATION #1:
Remove the time chronology next
to each icon. Rename call to actions as
follows: activity, rest, tasks, leader board
and tracking.
RECOMMENDATION #2:
Remove the heart rate icon and replace
with social sharing icon plus leader board
call to action adjacent to icon.
2 taps and color
change for hover state
on mobile app should
be eliminated.
Remove this
data and move
to activity recap.
Remove arrow here
next to pet name.

32. dashboard activity filtering by date function
FINDING:
The heart rate data on main
dashboard did not make sense to
participant. Questioned if 60/140
heart rate is a good/bad statistic.
RECOMMENDATION #1:
Remove heart rate data from main
dashboard and add to the activity
statistics page.
RECOMMENDATION #2:
Remove walking as individual
statistic and replace with heart
rate data.
Secondary stats
did not add up
to main stat.
User found this
confusing.
No back button?
How does user
return to main
dashboard?

33. TASK # 2 SCENARIO:
Pick Route for Activity
2.67
RATING SCALE
1 = VERY DIFFICULT
7 = VERY EASY
RATING AVERAGE

34. pick route task scenario
FINDINGS:
Confusing and icons were hard to understand
by participants. Steps were unclear. User was
not sure if there was a way to navigate back
to the dashboard or main screen.
RECOMMENDATION #1:
Create a new back button.
RECOMMENDATION #2:
Make icons clear by labeling them.
RECOMMENDATION #3:
Make the map resemble Google maps.
RECOMMENDATION #4:
Add animations to make the app more
engaging and simplifying user interface.

35. Usability Next Steps

36. usability next steps
To ensure the usability and quality of the tool, it is
recommended to:
• Address the issues identified in this report before the next
release.
• Schedule future usability tests to validate these issues, to use as
a baseline moving forward, and to evaluate additional features
and functions not previously tested within the product.

37. now fetching
before & after

38. https://invis.io/269P0ZAEC
before…

39. https://invis.io/AV9YQJ6DU#/213705159_Dashboard_Main
after…

40. https://invis.io/NV9OO4L2X#/211121013_01_Dashboard_Default_View
before…

41. after…

42. thank you