Creating Whiz Tutor’s New App With React-Native


Whiz Tutor is a company that makes it easy for parents and students to connect with local tutors using our mobile app. On the flip side, tutors are able to manage their requested bookings.
About a year ago, we launched our first ever mobile app. Given our limitations as a small dev team at the time, we shipped an MVP to get a product into the hands of our customers. Back then, I wasn’t even a developer yet and only working on the UI/UX side of things.
Much like any other company’s MVP, our app had many shortcomings in both user experience and in features. A couple notable things:
- Only students were able to use the mobile app. Tutors had to log in and manage sessions on our web site.
- We didn’t have an app for Android users.
A few months after launching our first app, we patched some of these issues. We made a second app specifically for tutors that was available for both iOS and Android phones. We now had a place other than our website that let tutors manage their bookings. We still had many shortcomings, though.
Let’s fast forward to now (summer 2017). Both of our freelance developers who created our current mobile apps have since become extremely busy with other projects. Where does that leave us? The remaining developers contributing to Whiz Tutor are myself and John Salzarulo; both of us have no experience developing with Swift (the current language our Student-side app is written in) nor do we have experience with Ionic (the current framework that our Tutor-side app is written in).
To make a long story short, I decided to choose a new framework — React-Native. This framework caught my attention a couple months ago and has become really fun to work with.
The goal for this new app that I have built is to provide a single tool that both students and tutors can use on iOS and Android devices. At the same time, I want to address some of the UX shortcomings of our previous apps. John would work on refactoring our endpoints and supporting new features. I would tackle the front-end. 3 weeks later, another MVP is born.
With that said, let’s dive into some of the new changes.
Onboarding Users and Signing In


What’s New?
- Preview tutors and subjects without having to authenticate
- Phone number registration + sign in
One of the biggest changes to our app is that we give users the ability to preview tutors without having to ever sign in or register. A user is able to view subjects and tutor profiles. As soon as they try to message or book a tutor, they are prompted to sign in.
Empty States
One thing our old apps lacked were engaging empty states. At the time of development, this wasn’t something that even crossed our minds. Most of the time, students and tutors aren’t going to have a booking scheduled and so nothing is displayed when they open the app — just an empty screen with our logo and a generic message. Empty screens gives you the opportunity to engage with users where you otherwise wouldn’t be able to.




What’s New?
- Better marketing messages on empty screens to engage with students
- Statistics page for tutors
Previously, if our tutor had no current bookings, their home page would default to an empty screen with our logo and a message that read, “No Tutoring Sessions Yet.” To engage with our tutors better, we came up with a screen that gives them various stats about their earnings, reviews, and response time.
Student Booking Flow
What’s New?
- More organized and comprehensive tutor profile
- Message tutors from their profile
- Update / Add credit card payment on checkout
Manage Bookings as a Student
What’s New?
- More intuitive UI, easier to message a tutor
Manage Bookings as a Tutor
What’s New?
- Tutors can choose start and end times before charging a student. Previously, they would have to start a timer from inside of the app. This caused a lot of issues when a tutor did not have service — or would forget to start the timer
- Street view of meeting location
- Separate screens to view booking details and manage actions. Rather than jam-packing a tutor’s booking index full of information, we decided to include a “show” view for individual bookings. It is from within this “show” view that a tutor manages the state of the booking.
- Better cancelation prompts, no automatic canceling
Booking Previous Tutors
In our old student app, it was a real hassle to find a tutor that you had a previous booking with. Students would have to go through the discovery process all over again, search their desired subject, and sift through all of the tutors who can teach that subject.
With the new app, both tutors and students have a dedicated tab with an index of people who they have had a previous booking with. This makes it a lot easier for either party to rebook a session.
