Summary
Designing an accuracy and achievement tracking mobile app for
shooting sports.
In order to address the needs of a specific local client, this mobile application facilitates digital score keeping, while encouraging both the competitive and recreational nature of shooting for sport.
​
Through an achievements system and in app score data analysis, users can view their progress, compare achievement medals with friends, and plan step for growth.
Role
UX Researcher
Product Designer
UI Designer
Project Coordinator
Prototyping
User Testing
Deliverables
User Survey Data
Competitive Analyses
Personas
User Stories & Flows
Wireframes
Visual Design
High Fidelity Prototype
User Testing Results
Tools
Google Forms
Notion
Figma
Canva
Maze
Asana
Adobe Illustrator
Duration
4 Weeks
The Audience
According to survey data and information gained from the knowledgeable client, the target audience is mixed: a large age and social group range but mostly men ranging from age 21-60.
Annual Income - $50k -150k
Location - Urban and Rural US
Interests - competitions, sporting clay shooting, socializing, family events
Attitudes - both lax and competitive, curious, driven, established, sporty
Challenges - majority of users aren't tech savvy (the most they usually engage with apps is Facebook). improving at certain shot types, want to view previous game performance data easily
.png)
The Problem(s)
- Digitization of score keeping
- Providing a way to view accurate data and patterns of shots missed in order for users to improve
- Incentivizing personal performance growth
- Introducing a way to interact with fellow sportsmen, need to promote social elements
The Solution
Through testing and refining different information architecture strategies, I was able to create an interactive homepage that clearly directs users to the app’s 4 main features: New Game (Digital Scorecard), Achievements, Performance & Friends.
The Process
User Research
From a brief user survey and follow up interviews with the client's peers, I found that most people, 75%, are already familiar with some type of “shooting for sport” score keeping interface (skeet shooting, FPS video games, etc.)
I also found that the interest level of people willing to engage with competitive or recreational shooting sports leaned towards more middle-aged folks.
Pain Points
-
Hard to keep track of paper scorecards & entering data from those cards into a spreadsheet to view trends is far too tedious
-
Remembering what specific shot types were at certain points in a shooting round and which they miss most often
-
No way to easily compare scores with friends
-
Other apps are often too complex and frustrating to learn for the relevant age group
Competitive Analysis
In order to gain insight into how my app would be perceived by users I needed to glean information from adjacent sports scoring apps. Here I analyzed SwingU, a popular golfing app, and also HotClays, an app specifically for tracking scores in sporting clay shooting events.
Both apps included a bottom page navigation panel and a way to add friends that I thought would be essential in my app design as well. Below are the SWOT analyses of both.
Personas
From the data I collected and post survey interviews I was able to develop primary and secondary persona types that embody and describe target users.
​
From learning about their pain points and personality characteristics I was able to paint a better picture of my users.
Primary
Secondary
User Stories
This step in the process allows us to better understand the psychology of the user's perspective and their needs in order to narrow down the most important design features to include.
​
Now that we know more about our users and apps they may have already tried, let's see some of examples of how our user stories might play out with our app:
Information Architecture
User Flows
Now that we have fleshed out our typical users and their behaviors, let's see some of examples of how our user stories might play out within our app, by diagraming user flows.
Flow 1 - user exploration
Flow 2 - user score entries and achievements view
Journey & Empathy Maps
By diving deeper into the perspective of the prospective user, I was able to better understand how certain interaction within the app might have positive and negative effects for the user's experience.
​
Let’s take an emotional journey with the iconic shooter Elmer Fudd himself:
Empathy
Journey
Wireframe Sketches
Brainstorming and exploring potential solutions to screen layouts by hand. I was able to factor out some designs that might be too confusing for some users. Accessibility comes first!
Digitized Wireframes
Based on refining screens from previous sketch ideation and developed using Figma.
splash
home
home (alt)
performance
scorecard
friends
Mood Board
I constructed a collection of hot clay shooting imagery using Canva which inspired me to pursue a rustic, orange centered color palette for the app. I wanted to evoke a sense of prestige and class, while also keeping the UI light hearted and friendly.
​
Key Concepts:
​
Rustic - cream, orange, golden, rust colors
Regal - diamond patterns for home page, solid borders
Classic - easy navigation, familiar icons, sensible layout
Prestigious - extensive reward designs
Friendly - slightly rounded edge to mostly everything, prompts for exploration within the app are encouraging (sliders)
Visual Design & Branding
Style Guide
By categorizing all of the visual elements, typography choices, and final color palette decisions into a collective UI inventory I was able to ensure consistency while designing mockup iterations.
User Testing & Design Iterations
Determining what worked and what didn't based on a series of navigation missions created for the prototype using Maze. After testing roughly 20 users, I was able to find and address common usability errors.
I also wanted to gain insight into screen layout preference with A/B testing for two screens.
Most Successful
The most successful task was creating an account which users seemed to understand right away just based on the wireframe (88% success). I wanted to have account setup be as simple as possible for ease of access.
Here we can see that most users initially gravitate toward clicking the button in the bottom navigation panel to navigate to the Achievements page as opposed to interacting with the central
homepage sliders.
​
I later added arrow indicators and restyled the central homepage sliders to better alert users to their function.
Least Successful
A/B Preference Testing
Overall Experience / Takeaways
When also debriefed with post-mission qualitative questions:
-
Most users understood the purpose of the app & the intended purpose of the app.
-
Most people (89%) said yes to including a home button icon to facilitate navigation between screens.
-
From 1-10, the average user score for “ease of navigation” was a 7.
-
Users liked variety of visual displays (icons, sliders, etc.)
-
Users enjoyed the promotion of a competitive aspect among peers, (viewing their Friend’s achievements/medals).
​
In Conclusion
Lessons:
During this research and design process I discovered that users prefer familiar icons and simple navigation; and that they enjoy the social aspects that can be built into sports score tracking apps. Users also enjoyed the simple, streamlined onboarding process (no log in credentials after account initial account creation).
From pre testing context questions and follow up interviews, I learned that most people are familiar with and connect with apps that include a way to measure personal growth. Therefore they look for these features in new apps that they try out as well.
​
Lastly, designing an interface for a digital scorecard (& multi faceted app in general) is time intensive and no easy feat! Show some love for all designers!
Further Development for SkillShot 2.0:
With more time to further research, test, and develop this product I would most likely aim to:
​
-
Expand on the limits of data analysis and suggestive content linking
-
Add more in depth friend feature, ex. being able to view a friend's progression for certain achievements
-
Include more options for preferences during profile setup
-
Ideate feasible micro-interactions and add animations to create a more polished aesthetic for the app