PROJECT PITCH: PROJECTILE MOTION APP FOR IOS
There's a moment when people are studying physics where the knowledge just clicks, and you can see it light up their eyes - an understanding of how the world works. It's a moment that I want to bring to more people. So, imagine an app that introduces projectile motion in a simple and interactive way, offering plenty of opportunities to learn more and gain a deeper understanding of the physics at work. However, the challenge comes in not making the app too complicated. If the goal is to invite users of all ages, it needs to be user-friendly and inviting.
The greatest appeal to this app is the record and calculate feature, which would allow the user to take a brief video clip of projectile motion in action. With this, the app would display the physics calculations with the speed, angle, distance, and other relevant factors extrapolated from the brief video.
SCENARIOS
Scenario #1: You are out snowboarding with your friend and you want to see how far he can jump off of the slope. Use the app to video your friend and calculate the distance he traveled.
Scenario #2: You plan on going for a short run and want to know the distance, time, and speed you get while you're out. Use the app to track your journey.
Scenario #3: You want to show others the physics of your friend snowboarding. Use the app to upload the video you had previously recorded.
BRAINSTORMING AND SKETCHING
I As I first started brainstorming what kind of app to design, I started with a list of fifty app ideas, all centered around the basic function of some kind of calculation - whether it was basic math, tracking functions, or a conversion calculator (so long as it used numerical data in some way). From there, I narrowed the list down until I settled on the idea for a physics/trajectory calculator.
Brainstorming list (photo 1) Continuation of list (photo 2) Mind map of ideas (photo 3)
After narrowing down and selecting a project, design for each of the individual screens began. I have three main goals in mind with this app: projectile calculations, experiment with the equations, and link to educational videos. With these three functions in mind, that's how I went designing the screens.
Brainstorming list (photo 1) Continuation of list (photo 2) Mind map of ideas (photo 3)
As I started designing the initial screens, I'm already realizing a problem that needs to get ironed out as I move through usability testing: I want the app to have a lot of versatility, but it looks like I'm getting that at the cost of simplicity. I'm having a hard time explaining how everything works in a simple way, without throwing all the math at the user immediately. However, I know that need to pass this through usability testing to help solve these problems. I need to narrow down the scope of the app and focus on the parts of it that would really appeal to my audience.
AUDIENCE AND SCENARIOS
Meet the target audience (or the personas) that I have in mind for the creation of this app:
User 1: Jared (photo 1) User 2: Martha (photo 2) User 3: Jack (photo 3) User 4: Lauren (photo 4)
MEET JARED
Jared is a high school student, taking his first physics class. He's coming to love learning how the world works and has been enjoying launching projectiles at different speeds and calculating how far they'll go before they land. He also happens to be on the basketball team and is trying to use his new-found knowledge to maximize his game.
MEET MARTHA
Martha is a bright 12 year old. She loves science and coming up with experiments on her own. She's always looking for science apps that she can use that makes learning both practical and fun.
MEET JACK
Jack is an up-and-coming baseball star. He has a basic grasp of the physical sciences, and wants to find a way to improve the angle of his batting so he can hit more homeruns in the upcoming season.
MEET LAUREN
Lauren is a college freshman. She loves the physical sciences, but is really struggling in her introductory physics classics. She needs an app that helps consolidate learning resources and helps her visualize how the science of motion works.
USABILITY TEST 1
I went into the first usability testing knowing immediately that there might be some issues with how user-friendly it was. However, these were problems that - though I was aware of - I was unsure of how to fix without input from a potential user.
USER 1
User 1 going through scenario #1 (photo 1) User 1 going through scenario #2 (photo 2) User 1 going through scenario #3 (photo 3) Looking at the menu screen (photo 4) Starting from the first screen (photo 5) All screens (photo 6)
Name: Robert M.
Occupation: Cyber Security
User 1 gave a lot of really important feedback. First, I noticed that he struggled differentiating between what the four option in the "menu" screen meant, and kept trying to go to "discover" for scenario #1. The "discover" button was meant to take the user to curated physics videos (linking to YouTube) that will help the user discover and learn more about physics principles. So, I need to make my buttons more clear in what they are and differentiate them more with the others.
Secondly, he suggested including some sort of instructions page for the included fields, which might be especially useful for users who have never worked with projectile motion before and may not know what they are looking at.
Robert M. also told me it came across "very mathy," and suggested that throwing a bunch of math at the user to begin with comes across slightly intimidating and might scare of a lot of potential users. I think this is an incredibly fair point, and one of my main goals going forward will be simplifying the app.
We also discussed limiting the features and making the remaining ones more clear in intent. For example, I had buttons that led to both projectiles and freefall - both projectile motion, just in different directions. They essentially work the same, however, so logistically, there should be no need to separate the two.
With Robert M. assistance, I developed a flow chart to help streamline development for the next design pass:
New flow chart for next design pass
With this flow chart, the two new goals for user input is manual entry and video capture. Limiting input will hopefully make the app function a little more clear, while still highlighting the functions of the app I want to include in the design.
Round two of sketches using the flow chart (photos 1 and 2)
I used the flow chart to create new sketches with a better user flow in mind. However, there are still a lot of screens. Going back to the scenarios and brainstorming what feature users would be most likely to use, I felt that I should focus more on the speed calculator. Instead of making them all as separate screens, it was suggested that I provide an option to go right into the video clip recording and then use the app to choose which calculation you want, instead of the other way around. That led me to a more simplified approach.
Revised and simplified UI sketching
I was very happy with the simplified layout, and I used these sketches to create the digital wireframes.
WIREFRAMES
Wireframes, screens 1-8
USABILITY TESTING 2
I revised the scenarios slightly after my first round of usability testing. I added another function to the app - the ability to track motion while the screen is idle or closed, similar to how many fitness tracker apps do. The difference with my app would be that it would include several other statistics, including elevation range and velocity changes throughout the trek.
USER 1
User 1 navigating the three scenarios
Name: Kelli M.
Occupation: Accountant
Kelli M. easily navigated the three scenarios. She said that the buttons on the main screen were clear; the only thing she found confusing was the inclusion of the "timer" button. She understood it's purpose once I explained it, and recommended it be called "test timer" or something else to indicate that it is just a timer and not connected to any of the scenarios I had her do.
USER 2
User 2 navigating the three scenarios
Name: Robert M.
Occupation: Cyber Security
Robert M. tried to overthink the app once more. His experience with cyber security and web development made him very frustrated with the wireframe samples, because he really wanted information buttons that would describe each function in detail. I was informed in the brief that that sort of page would be included in the app if it were to be developed, but is not within the scope of the current project and is thus not needed at this time. He also wanted to press "discover" for nearly every scenarios I walked him through. All in all, his feedback is that the main options page still needs some work to make it a little more clear what leads to what.
USER 3
User 3 navigating the three scenarios
Name: Kim K.
Occupation: Office Manager
Kim K. also easily navigated the app and the scenarios. She explained that she has zero knowledge of physics, but she could see herself using this app and recommending it to her son, who often snowboards and is quite active. She also struggled slightly with the main options page, mainly because - having no physics knowledge - "discover" and "equations" seemed all too similar when I asked her to try the third scenario.
ADDING COLOR
First color variation of wireframes
After adding color and considering all of the feedback from user testing, it quickly became apparent that the app needed a slight visual overhaul. Each user could navigate the app easily enough, but it needed to be more streamlined. The inclusion of several colors was also distracting to some, and the decision was made to reduce the color palette and up the contrast.
SECOND DIGITAL ITERATION
Second digital iteration - added photos to the original wireframes and flushed out color palette
In this iteration, my primary focus was ease of use. By increasing the contrast, it helped create a cleaner look. I ended up replacing some of the images to help even more with that, and settled on an overall color palette of mint green, navy, and white. At this point, I had to alter the scenarios slightly to be more descriptive of the app's functions.
USABILITY TESTING OF SECOND ITERATION
Users 1 and 2 navigating through the three scenarios
USER 1 AND 2
Name: Don and Vicky H.
Occupation: Retired
Though not very familiar with projectile motion, Don and Vicky H. had a lot to add about the clarity of the main screen. Their feedback helped me to understand that, to potential new users, many of the buttons' functions could easily be confused with one another. Overall, they liked the design of the app and helped me to brainstorm ways to increase clarity with the scenarios.
Users 3 and 4 navigating through the 3 scenarios
USER 3 AND 4
Name: Jeremy and Kim K.
Occupation: Marketing and Office Management
Having previous experience in marketing, Jeremy K's feedback was invaluable. His overall response to the UI design was positive, and he was fond of the simplicity of the main screen and limited color palette. Jeremy K. also helped me come up with new button names to increase recognizability and understanding for potential new users. Both users came up with many ways that they would find this app useful and suggested a few minor layout changes. Their feedback contributed most to the final iteration of the design.
NAME AND LOGO
I settled on the name Kinectory - a combination of kinetics and trajectory, to cover the app's emphasis of projectile motion. The logo is representative of the parabolic path of a projectile flying through the air.
FINAL PRODUCT
Final screens for the three scenarios
In the final iteration, I implemented the changes discussed during user testing. I also added some more screens and animated transitions to create a prototype (linked below). I also added the projectile motion graphics, overlaying the video of the snowboarder. This is meant to be the primary component and appeal of the app, and I received overwhelmingly positive feedback when I presented previous users with the changes.
PROTOTYPE
Final prototype for Kinectory
CONCLUSION
Overall, I feel that the app works quite well as it stands. It has a lot of potential yet to be expanded upon, and in my original concept I wanted to include many more utility and learning functions. If this app were to be continued, those are the branches that I would spend more time developing as well as increasing the calculation capabilities of the app.
