Overview
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.
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.
Kickoff
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.
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.
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.
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.
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.
After approved sketches, I started creating medium-fidelity wireframes using the Balsamiq tool. Here are a few screens of the application.
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.
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.
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.
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