Designing a fun physics app
The following writeup is about our upcoming app — Play Physics. You can sign up for an early invite here — http://playphysics.io
Physics is fun. More so when it’s taught in a fun and interactive manner. Sadly, there are not many resources available that teach you physics in this way. So, when we decided to make an Android physics app, it was clear upfront that we want to make it fun, interactive and easy to use so that students can understand concepts in the most lucid manner. Our objective was clear —
Teach essential high school physics concepts through interactive Q&A
Based on this objective, we defined user personas accordingly:
A typical user will be a high school student (11th or 12th grade). The app content is universal but is more inclined towards physics curriculum in Indian CBSE schools for class 11th and 12th. Other users can be college students and physics enthusiasts. We have divided user personas into the following categories:
Passionate Learner — They learn for the love of the subject (High School student) [PL]
Missionary — Passing exams is the only aim (High School student) [M]
Knights — They want to excel in all competitions. Narcissistic. [K]
Learn concepts by going through Q&A in every chapter. [PL] [M]
Buy Flash Cards, study material. [M] [PL]
Compete with friends regularly. Buy points to compete aggressively. Show off badges on social media. [K] [PL]
Download the app, look around, delete it. [L]
Wireframing and initial prototype
Once we were clear with user personas and various use cases, we went ahead with defining the user flow for the app. This was the first time we used Sketch in our design process and it turned out to be really good and fast. The whole wireframing and user flow was defined pretty quickly.
Wireframes are good for designers. But not so much for potential users and stakeholders. To give them a good idea of what’s cooking, it’s important to have an early working prototype so that you can get feedback on some basic interactions and user flow. There are many tools available that you can help you create these prototypes. After testing out a few of them, we finally settled on Framer Studio. Based on Framer.js, it helps you create high-fidelity prototypes, ranging from micro-interactions to entire onboarding flows. It also lets you preview your prototypes on actual devices using their mirror feature. Overall, it turned out to be a good find and helped us get good early feedback on user flow.
From the very beginning, our idea was to make the app as playful as possible by making maximum use of the platform. Mobiles offer a range of gestures and hence it was decided to explain various mechanics concepts using these gestures. After a lot of brainstorming and multiple iterations, all the interactions in the app boiled down to four major types:
- Drag and Drop
- Tilt the phone
Based on these interactions, we sub-divided our questions in the following categories:
- Force body/Free body diagrams (Drag and Drop)
- Arranging objects according to mechanics laws (Drag and Drop)
- Changing the value of a variable (Sliders)
- Changing the position of an object (Tilt the phone)
- Multiple choice questions (Tap)
- Fill in the blanks (Tap and Type)
Every question had a well defined interaction. We made sure to properly document it so that developers don’t have a hard time figuring out interactions associated with each question.
Quite a few interactions, eh? Well, we designed all the interactions to be self-explanatory but still decided to include “Interaction Hints” so that users can easily understand what to do on a particular screen. We differentiated between hints by making dedicated icons for each interaction type. Tapping on these icons revealed a popup that explains the interaction with a neatly crafted gif image. In addition to interaction hints, we also included “Concept Hints”so that students can get some additional help while solving questions.
Learning is more fun with friends, right? Well, we got you covered. In addition to core Q&A’s, the app lets you challenge your friends for a physics quiz in real-time.
The visual design of the app was kept in-sync with latest “Flat Design” trend. But as the app had more game-like features, we made sure to give it enough colors to make it more visually appealing.
A good amount of time was spent in designing the app icon as it forms the visual identity of the app. Not only it should be attractive but should also convey the essence of the app. After going through several ideas, we finalised the concept of a simple machine inside a traditional play icon. With the right balance of colors and physical elements, the icon turned out to be really good.
In terms of gamification, users were given badges and coins after successfully completing a chapter. To make everything more fun, we came up with some really quirky badge names and coupled it with some beautiful, pixel-perfect design.
All the screens followed Android design specifications. We ensured that the visual language is consistent throughout the app.
We believe in design led engineering and we hope that you’ll like this app visually and in terms of content. To begin with, it will be released on Android first but will soon be available on iOS too.