Front end make in mashfrog. Guidelines for choosing between a mobile app and website

Augusto Montoni, Head of Front End Solutions, told us what is meant by front end and which professionals are involved in this activity, taking a particular look at the "make" solutions in mashfrog. This discussion is also part of the knowledge and skill sharing plan for the Group's business lines carried out through a series of training webinars entitled "mashfrog digital youniversity".

What is meant by front end

Front end is the visible part of a programme, the one with which the user can interact through an interface, allowing their interactions to  function effectively. In its most general sense, the front end is responsible for acquiring the incoming data and processing it with predefined and unchanging methods, in order to make it usable in the back end.

It's not just about the web world. Everyone thinks that it only refers to website development, but actually by front end we mean all the parts of a system that involve direct interaction with the user of a service. It could be defined as "the tip of the iceberg", i.e. the clearly emerging part of a system that is much more complex and broader than what the end user actually sees.

The front end can take various forms: it can be a website, a mobile application and also the most recent Alexa skills, a system of interactions through voice commands, as well as smart TV applications. There are many types of front ends and many languages with which they can be written from a programming point of view: these range from purely web technologies to the languages of the various platforms.

What is the front end for

The purpose of a good front end is to represent the visible part of the system in a simple way, hiding the complexity behind it. We could say that it corresponds to how a company's image is seen by the user, and it often determines its credibility: an efficient company with an old, not very usable website can lose important slices of the market. Very often, users abandon a website or app at first glance because they do not like it aesthetically or because it is not usable, hence the importance of a functional and efficient front end.

Workflow

At this point, Augusto explains the different phases that characterise the work of the front end to us. Starting from the client's brief, the first action concerns User Experience: a benchmark is made to understand how similar systems have solved the same problem, also because the user may be used to a certain pattern of use and it would be problematic to alter it. Then the information architecture is defined to give priority to the most important items and hide the secondary ones. In essence, a wireframe is designed, creating a rough structure for the front end showing the interactions that the user will make and the various flows that will be activated. From this, you can move on to the User Interface, then define the look&feel of the product, animations and interactions, and after that go on to the final phase of actual Development. Finally, Testing accompanies the project throughout its evolution, from receipt of the brief to actual development.

Professional figures involved

As this workflow clearly shows, the front end team is not composed only of developers, but of very varied professional figures with distinct skills, which Augusto describes in detail.

UX Designer
This is the person who oversees the usability of the product, which must be considered in detail. 
To do this they must:

-    understand the context, answering the question "what should the system do? What problem does it have to solve?"
-    make the needs of the brand coincide with those of the end user, responding to business needs on the one hand and offering a service to the user on the other;
-    identify the target, then understand who the application is intended for and try to identify with the person who will use it;
-    define the methods for interacting with the system, as experience design is essential for the success of the product.

UI Designer
They take care of presenting the product, containing the experience within the brand image: look&feel, fonts, colours, images and so on. As such, they must:

-    represent the experience
-    define the visuals
-    define the interactions, animations and everything that surrounds and concerns the visual aspect.

This aspect is by no means secondary to the experience, but rather goes hand in hand with it: websites that represent the client's identity well but offer a bad experience are soon abandoned, but the opposite is also true, so the experience is well thought out it is lacking in terms of UI, exactly the same thing happens.

Developer
This is the person who writes the code, i.e. transforms that which has previously been designed into computer language. Therefore, the developer:

-    defines the architecture of the front end, and therefore takes care of everything relating to the sphere of development
-    transforms the user experience into an executable source code
-    deploys the website/app

The role of the developer is very important because they handle the performance of a product, another element that contributes to the success of its use by the user.

Tester
The role of tester can be covered by the same professional figures already described, but it is always preferable to configure a well-structured test area, identifying dedicated resources.
The tester simulates the behaviour of the end user during the interaction phase and:

-    defines test cases
-    performs usability tests
-    performs functional tests
-    checks consistency with UI and UX

The two faces of the frontend: mobile app and website

From a commercial point of view, it is very important to offer the customer the front end that best meets their needs. Therefore, Augusto explains that neither apps nor websites are better than the other, rather they simply perform their tasks in different ways and may be more or less suitable depending on the circumstances.

But what is an app? Augusto explains to us in simple words that it is an application that can be downloaded on your smartphone that executes a piece of code inside the phone and not in a browser (as happens for a website), then exploits all the potential of the device, both in terms of performance and interactions. 

The other side of the coin are websites, of which there are at least three types:

-    landing pages, purely informative pages in which user interactions are very limited;
-    CMS, also in this case the purpose is informative, but a part of the back office is dedicated to the inclusion of editorial content;
-    Web apps, these are much more like an app, in which there are many interactions with the user with the back end systems involved. 

In conclusion, the choice of the best front end always depends on the customer's needs and the way the product is to be used, so no kind of front end is better than another, but rather one system is better for certain circumstances.