BooknTrain is an app for people to find their favorite activities nearby like fitness, arts & crafts, cooking, etc. The aim of this application is to support small businesses/instructors by connecting them with the similar interest of people to attend the activities they enjoy.

I started working at BooknTrain as a product designer in June 2019 along with two developers handling the design development of the product including App, Marketing page & Dashboard.

To comply with the non-disclosure agreement, I have obfuscated confidential information in this case study. All the information in this case study is my own and does not necessarily reflect the views of BooknTrain.

bookntrain header

BooknTrain’s main focus is to connect instructors and customers effectively to attend their events/training sessions and the small businesses that need to reach out to more and more audiences,which makes it B2B & B2C web product. Initially, when I joined, the app was partially developed already with all the basic requirements but User Experience and User Interface were yet to be done. Below the design process, I followed to understand the context and execute the solution for the product.

bookntrain process
Bookntrain timeline

Above is the timeline of my contributions in multiple products of bookntrain and how I worked simultaneously to develop design strategies and implementation over the time. From June 2019, I have been working on marketing materials such as logo design & marketing app web page, dashboard for customers and native mobile app led by design process.

Quantitative Surveys

Two major user groups of this product are customers & instructors/businesses. Previously, at the early stage user research has been done by developers & CEO but it still lacks a lot of important information about the system structures and user requirements so, I quickly initiated & setup the user surveys and send it to the group of users & instructors/businesses.

BooknTrain chart

The pie chart represents inputs from a total of 39 Instructors/businesses on the question about what kind of functions they wanted to see from an application for their daily use. As it clearly shows they equally voted each important feature like purchase system, grow audience, trusted rating, promotions & scheduling as well.

BooknTrain chart

For the larger audience of customers, we asked them about their favorite activity nearby they can attend if they have such a platform that covers all local instructors. The reason to do this question was there were activities which I thought are quite unnecessary, and performing this survey almost cleared the doubts. For example, there was tutoring on the list but by survey results, people are not quite interested in considering tutoring as their favorite interest.

Improvising in the race

Why BooknTrain is different from other similar apps and why people should use it? By doing market research I identified that Mindbody, Classpass, and Aptiv are somewhat similar to our App’s concept so the competitive analysis is a must to learn and overcome the important features that those products are missing.

Bookntrain comp. analysis
Creating business models

This was an entirely new concept for me so I did research on intuitive membership models that are top-notch in the industry & people actually spend money like Netflix, LinkedIn Premium, HBO, etc. Based on that I created two models: monthly membership and packages. Monthly membership provides a fixed amount rate and unlimited classes for a single instructor for a month, whereas packages provided a fixed amount rate & a fixed number of classes with no expiration date.

Analyzing App Interface
Bookntrain old ui
Sketching new layouts

With new user flows, I started sketching out how the system navigation can be done efficiently that helps to match the user’s mental model. As you can see when a user downloads the app first screen will be the onboarding screen, which guides the user to login/Signup. The login screen is generic for both types of users. But signup screen has a clear choice on which type of account the user wants to create. I distinguished the customer home screen and instructor home screen by limiting map function and the ability to check other activities.

Bookntrain Sketching

After approved sketches, I started creating medium-fidelity wireframes using the Balsamiq tool. Here are a few screens of the application.

Bookntrain wireframes

Interact clickable full version wireframe of app

Problem with flow

After carefully executing all different scenarios as a user, I was not able to identify the major differences between customer account and instructor account. However, there are few differences like as an instructor you can create an event, memberships but also you can search for other activities and able to purchase it just like a regular customer account, which I found bewilder as a user. Below Venn diagram shows the similarities and differences of action you can perform in both types of accounts.

Bookntrain comparison

After discussing with devs and CEO, I split the account restrictions clear and identical and made it easy for users to remember the system functionality. In the new system flow, there is only one thing that connects customers & instructors account type which is switching the accounts button. Apart from that instructors are now not able to browse the classes nearby but instead, they have to click on the switch account button which swaps their account to the customer and gives them all the access as a normal customer.

Bookntrain comparison
App design

For the user interface design, I’ve used Figma to design and prototype the entire application. Also, used Adobe Photoshop and Adobe Illustrator to customize icons and edit photos.

Bookntrain figma design
Bookntrain UI design
Handling Front-end

All designs were approved and now it was the time for front-end development. I took a week for analyzing and understanding how the current structure works and then discussed with developers how will be I can work together with them simultaneously. BooknTrain uses the OnsenUI framework which similar to flutter to build hybrid apps for android and apple both stores. OnsenUI uses HTML, CSS & AngularJS and converts them into android and appleOS components.

Below is the interactable final prototype of the App.

What's next?

  • Design System
  • Marketing Strategies