Create an App for a Service based business (Clinics, Gyms ...)

Create an App for a Service based business (Clinics, Gyms ...)



The use of mobile devices for booking services has only grown since the beginning of 2020 due to the Pandemic and continues to do so at a rate of 45% per year.

Today, having a Mobile App is essential for any service business:
  1. 35% of users make bookings from their mobile phones.
  2. The opening rates of Push Messages is near 99% while the current opening rates of email marketing is around 20%. So Mobile Apps represent a real and efficient marketing solution all around.
  3. In 2021, 72.9% of global online payments were done from mobile devices.
  4. More importantly, Mobile Apps have +157% higher conversion rates than any Website.
In this step-by-step guide we are going to build an App for a Clinic, although you can use this guide to create Apps for any kind of service based business (gyms, dentists, beauticians, hairdressers etc.)
  1. Main information
  2. Treatments and services
  3. Booking system
  4. Push Messages 
  5. etc.





First Steps

Once inside Scoreapps, from the main dashboard just click on the app icon on the left hand side menu.



Then just click on 'Create App':




Then give it a name and choose your design from the template library.

All templates are predesigned so that you don´t have to start from scratch.

You could change the template at any time or even use a 'Blank Template' if you prefer.


For this example we will choose ablank template


The process of creating an App with Scoreapps is very simple. You just have to follow the different steps the builder actually offers you.

These steps are represented in a progress bar at the top of the builder and you can jump from one step to another with ease.





First step. Designing the App

From here you can chose another kind of template ...




... or edit the style of the layout (see below).




Layout election menu


Some Layouts offer you the possibility of adding a slider or an animated carousel of images on the cover of your App,

This can be done in less than 10 seconds.





Please note that not all Layouts accept the use of Sliders.

If you scroll down a little you will find a section called 'Start Slider Options':

- Indicate whether you want the images to move in loop.
- Specify the duration of your Slider.
- Adjust the opacity of the images.
- Choose the height of the images.

If you want Slider images to occupy the entire screen we recommend that these images are 1432X2732 pixels

By checking the page coloring box, you can color the background of the home page. 

In this example, as the slider occupies the entire screen, there is no need to enable it.







Then you can choose a home screen image that´s fully optimized for all kind of devices and screen ratios.





Use the overlay tool to view whether the design fits inside the guided areas.

This section shows the different options you have available depending on the kind of layout you have chosen.





Make sure that the elements you consider important are always within the indicated area.

In our example, the doctor's picture remains within the overlay, therefore, it would be visible on all devices.

To learn how to design the images correctly, download the template with all the measurements for .png and .psd formats.

Here´s a 5-minute video that shows you how to design the Home Screen of the App:



Now it´s time to choose the language and the currency of the area you´re going to be operating in.




To change the text fonts of your app, you can choose a font from the app builder's menu, or import a new font from Google Fonts.

To do this, just type the name of the font and then press save.







Second step. Colors






Now choose the main colors of the app.

 

- General: applies to the substance (if there is no specific image) and the general text.
- Start: applies to the navigation menu and its elements.
- Header: applies to the navigation header of the app.
- Card: applies to items displayed in card format.
- List: applies to items displayed in list format.






In addition, if you already have web programming knowledge, at the bottom of the dashboard you can add CSS code and customize your app even more if you wish.







Third step. Features





Once the initial screen is designed and we´ve chosen the main colors of the App, it´s time to add all the different features.

 

Your App will soon be completed.

 

If you started your App from a template, you would see that they already have some features added by default.

 

These are features that we consider are interesting for each industry. They appear as a kind of carousel and if you want to delete any of them, all you have to do is click on the X.






To see how simple it is to add new features into your App, let's delete and re-add the Custom Page feature ...




In our example, we have added a series of features that we consider relevant for this particular industry. 





(ABB) Custom page




For this App, we wanted to start by creating a section that will allow us to present the values of the company and its mission.

In addition, we have added a promotional video and at the end of the page, a CTA button that allows people to contact the company with ease.

To do this, we have set up a Custom Page and called it ABB, (the company name).

This feature offers you several options to start crafting a page that provides information about this company.

You can write an article with an image, you can publish a photo gallery, you can post a video directly on the page and you can add CTA buttons or even links to external websites.










Click on the link and check out a step-by-step article about the feature "Custom page"


Treatments (Folders)



In this section of the App we want to showcase the kind of treatments that the clinic actually offers.

To configure this section we we have to use 2 features (Folders and Catalogue)

The first thing would be to add the Folders feature to be able to classify content inside.

The folders name will be "Treatments" and then we choose the icon we want to display by clicking on the icon.



Here's a small video tutorial that shows you how to configure the Folders feature.





Then we must add the "Catalogue" feature to the app.

We are going to include 2 different lines of services.

First "Facial treatments" and as we did with the previous feature, we have to choose the icon we want by clicking on the icon.

And then we click on the catalogue feature again to create the "Body treatments" and then choose their icon too.

This is what they would look like once created.







The Catalogue feature shows a list of products within the App.

It allows you to add a description of the product (customizing the format), add a price, an image of it and even enable different product formats. This is interesting when you need to specify different variations of a product (colors,  sizes, etc.) as you could specify a particular price for each option.

This catalog was not connected to the Store Function. It was designed for physical business.

If you have doubts about how we have actually done this process, here´s a short video that explains how to configure it correctly:





And in this video we show you how thew catalogue feature really works.




Indiba (Custom Page)




This section highlights the benefits of a leading tool in this particular industry.

For its promotion, we have created a Custom Page and then added pictures, informative texts and also CTA´s.






You can learn more about the "Custom Page" configuring in the following video.



Click on this link and access a step-by-step article about the "Custom page" feature.

Images

Then you would have to add a gallery of images, give it a name, add the pictures et. and in a couple of minutes you will have your gallery up and running.

In this video you can see how easy it is to configure this feature.




Book your Appointment (Appointment Pro)


Having a highly effective booking system is essential. Your clients will then be able to book their appointments in one single click.

The Appointment Pro feature will send your clients appointment reminders, allow the pre-payment of the appointments, automate the loyalty points system (a feature that´s linked to "Loyalty Card" feature), and much more.

When the user pays through different payment modes, the payment gateways charge the business owner for each transaction, and if the client canceled the reservation, in that case, the business owners would have to face those costs. So to protect these losses, the Appointment Pro feature has a 'Cancellation' option through which cancellation fees can be applied.

As an admin, you can easily define the closing and opening times of the business and set specific times for each of your service providers.  

For a better user experience, this feature also allows you to display the distance to the different locations of your business (For this you need to correctly enter a Google Maps API key from the "API Keys" > Google Maps Settings menu section).



But lets see step by step how we configured this feature.

Settings tab



Watch this video to see how to set it all up.




Payment 



To configure the different payment methods, just select and fill in the data from the different platforms.

For example, for card payments, you should fill in the Stripe data. You can see this on their website.

If you don´t know how to get your Stripe API keys, here is the link to an article that explains how to do this 




Sliders



If you wish, you can add a image slider at the top of the main screen of the Appointment Pro feature.

To do this, you must check the box "Display home slider" in the "Settings" tab.






If you want to add more images to the slider, just repeat this process again.

Remember that the images should be 512 x 320 pixels.


Integrations




From here you can get the web URL and the registration code to use the reservation function wherever you want.


Labels/Tags




From there, you can edit all the different tags of the system. If you wish, you can change the original names for other new names.

Dashboard



From here you can manage the requirements of the booking system such as editing locations, services, classes, suppliers, managing reservations, timetables and reports.

As soon as you access this section you see information about the current week (Monday to Sunday). 

All the confirmed appointments, current revenue, projected revenue (expected income according to the final number of bookings) and finally the estimated total income.

As you can see, the total number of appointments are represented in red and the completed ones are in green.

This chart shows a full month s data.



Locations, Categories, Services and Suppliers

In this short video we show you how to configure the dashboard of the "Appointment Pro" feature.



Service Reservations

In the Bookings section, you can manage all bookings.



1- Select Location:From here you can apply a location filter by selecting the location from the drop-down menu.

2- Select Supplier:From here you can apply a supplier filter by selecting the supplier from the drop-down menu.

3- Select Status:From here you can apply a filter depending on the status of the booking as: Accepted, Pending, Completed, Rejected, etc. by selecting the status from the drop-down menu.

4- Id:From column ID you can obtain the identification number of the booking.

5- Customer / Location / Service: From this column you can see the clients name, location of the booking and also the kind of service he has booked.

6- Date: From this column you can see the date of the appointment.

7- Slot: From this column you can see the time slot.

8- Amount:From this column you can see the fee that will be charged on that particular appointment.

9- Status: From this column you can see the current status of the appointment.

10- Action: By clicking on the three points icon, you can fully manage the appointment:

(a) View: From here you can see the full details of the appointment, i.e. Booking, Payment, Customer and service.

(b) Accept: By clicking 'OK' you would accept the booking.

(c) Reject: Clicking on "Reject" would reject the customer's booking request.

d) Mark as completed: The service has been completed.

(e) Cancel: To cancel the reservation.
Note: The user may also havecancel the reservation on your part from the application.

(f) Delete:Clicking "Delete" would remove the platform reserve.

- Add booking: You can also add appointments directly from the platform by simply clicking on the blue "Add booking" button and then providing the necessary data.



Calendar

From here you can see the appointments that have been made from the app and from all the locations of your business.

You can also manage bookings directly from here as you can View, Accept, Reject, Mark as Completed, Cancel and Delete any appointment.



Click on this link and you could see a step-by-step article of the "Calendar" feature.

An here is a small video that also shows you how to configure the Calendar feature.



ABB Clinic (Custom Page)

This space is designed to provide information about the business, such as location, pictures, etc.

To do this, we have added a personalized request.



In this video you can see how to easily set up this feature.



Click on this link and access a step-by-step article about the "Custom page" feature


Loyalty (Loyalty Card)

With loyalty card feature, you can offer rewards to your clients after several purchases.

To validate a loyalty point, the business owner should enter a four-day password. So the client must show their card to the merchant so he can virtually validate it.

For this App we have designed the following loyalty card:






You can also add your own images to identify the different points of the card (active and inactive)



In our app, we have chosen the following icons:


Inactive point


Active point

You can then assign a password and a QR code for each employee.

To create a password, just click on the button.




By clicking the QR logo, you can download a QR that can be used by each employee to validate loyalty points instead of having to use the password.



In the following video you can see how we configure the Loyalty Card feature.



Click on this link and access a step-by-step article about the "Loyalty card" feature


Contact (Form V2)

To create the Contact form section, we have used the Form V2 feature.

We have included the following fields.



If you want to learn how to configure this feature, watch the following video.



Click on this link and access a step-by-step article about  the "Form" feature


Lists (Custom Page)

This section is very simple.

It includes a CTA button so people can contact the business and book a treatment directly by phone 

Do do this we use a Custom Page, with a header image and a call to action button.



Share (Share App)

This feature allows your users to share the App in just one click.

For a more personalized experience, you can can edit a message and a CTA button that encourages people to share the app with friends and family.




If you want to learn more about how to configure this feature, just watch the following video.




(Custom page + Padlock Pro)

The main objective of this section is to provide the business with a secure space to be able to share information and documents with its clients, easily, securely and confidentially.

For this particular App we have followed the following methodology:

- Users' ID number. A reference number to identify each section of each user. In this example we have used three fictional users, called "Example 1", "Example 2" and "Example 3". Your email addresses would also be important.



To start building each custom section, we need to use a "Custom Page" for each user.

And to identify this page we will use the ID + USERS NAME:



On the custom page we will include a header image, along with a text, and then attach a medical report of a patient.

The patient could then download this report.



- And with the other users we will do exactly the same.

- Once we have created ALL the "Custom Pages", i.e. one for each user, we then add the "PadlockPro" feature.



And call it "My reports".




And then select:

- Unlock by: Account
- Choose the features you want to block: All the previous pages we just created per user, ( ID + NAME, to identify them promptly).



Once we have selected these options, we will then assign access to each user to their respective page:

- Choose a customer from the drop-down menú (it would appear next to email address).
- And then select the Role (the page we have created for that user).



On expiration date you can select whether you want this action to expire.

If you leave it blank, it would not expire.

When you finish the process, you would have a list of all your users' emails with the allocation of their corresponding "custom page".



The main menu of the app would look like this:



When users click on "My Reports" they would access a login page. You should enter the email and the contrast with which they were registered.


Push Messages

Push messages represent the most efficient marketing system today.

 

They have a 99% opening rate.

 

And adding this powerful tool to your App is very simple:


Just click on the "Push Messages" feature icon


 An then you would need to publish the app in a native Android or iOS version. 


Once the app is published on the App Store and/or Google Play, you could then send messages to you users directly from this section.


Click on this link and you could see a step-by-step article of the function."Push Messages"



Step 4. App icon and settings




From here you can choose the icon you want to display on the screen of the your user's devices.



If you want to send push messages, from here you can customize the icon or the background color for example.




This tool will help you choose an image that´s compatible with all the screen sizes of the different devices.


This image will appear on the screen when the app is loading.






Step 5. Advanced





If you wish, you can also monetize your app by adding ads inside.

 

To do this, you can easily use Admob.




Publishing your App

If you join a Starter, Business, Growth or Reseller programs you can publish your app in various ways:

1.     Native Android version.

2.     Native iOS version.

3.     Web App HTML5.

4.     PWA mode(Progressive Web App).




To publish a native version of your App you need to be a Business, Growth or Reseller plan member, but you can publish a Web App and PWA version of you app for free simply by joining a starter plan.Promoting and launch of your App
If you have followed the guide here, you should already have a first version of your Application. Remember that if you have any questions you can consult our Helpdesk or write to the Support team (soporte@scoreapps.com) )



    • Popular Articles

    • How to build an App for a Restaurant

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • Audio & Music

      To add this feature to your app go to the step "Features" and click on the icon "Audio": Then give a name to this new app section. Then click on the + icon to add a new Playlist Then place a title and image on the Playlist and click OK to save your ...

    • APPS: Contact

      This feature allows you to create a contact page for your business. Add important data such as Address, Phone Number and Email. To add this function to your application go to the "FEATURES" step and click on the "Contact" icon: Settings. Within ...

    • APPS: Custom page

      This functionality gives you several options for creating an information page. You can write an article with an image, you can publish a photo gallery, you can post a video directly on this page and you can add call buttons or a link to any external ...

    • Related Articles

    • Create an App for gyms or fitness trainers

      If you follow in the footsteps of this guide, in just over half an hour you will be able to launch a stunning Fitness App capable of competing with any tailor made app you can imagine within your industry. In this example we show you how to set up an ...

    • Create an App for a store

      Ecommerce from mobile devices skyrocketed since the beginning of 2020 due to the Covid Pandemic19 and continues to grow at rates of 45% annually. Today, having a Store App is a must for any Ecommerce or Retail business: 35% of users make purchases ...

    • How to create ANY KIND of App

      With Scoreapps you can build almost any kind of App, without having to program a single line of code. But to make things even easier for you, here are a series of Step-by-Step Guides to help you build the most common kinds of apps: - App for an ...

    • Create an App for Courses

      When you´re building an Infoproducts App, that requires a membership area, it´s very important to include a "Starter" section. This way, if the Membership is already available, the Login can be linked directly. In the following video we show you the ...

    • How to create an App for Attendance

      What functions should be added in the App? - Lock - Form v2 It would be necessary to add theGoogle Maps APIso that the App can geolocate the User/Worker at the time of signing. - Lock This function should be configured as follows: - Form V2 It could ...