Design and Development of an Online Sales Platform for the Brand: Engenharia Do Brigadeiro

Abstract

The research here presented consisted in the Design and development of an online store proposal for Engenharia do Brigadeiro (EB). This company only had a Facebook and Instagram page and, with the Covid-19 pandemic, it felt the need to reinforce its online presence, in order to reach more customers. Thus, we developed a Design prototype for the mentioned online store that should answer to both the company’s needs and to its customer’s needs. Methodology wise this research was divided into three stages: in the first stage we undergone a literature review about the currently undergoing consumers’ buying habits migration into the digital context, and about User Experience Design. In the second stage we proceeded into understanding and modelling our user and its main needs and goals. And in a third stage, from all the data we collected from the previous research stages, we designed an online store prototype, which we further submitted to Usability tests. The conclusions drawn from these tests are presented at the end of this chapter.

1 Introduction

This research work focused on the development of a communication and online sales platform for a brand called “Engenharia do Brigadeiro” (EB), a small Portuguese company that sells made-to-order brigadeiros¹ online, through its Facebook page. Created in 2019, the company is in a growth phase, and in recent years it found that, due to not having any other online sales platform besides Facebook, it was at risk of losing customers. In addition, EB realized that many of its customers also wanted information about its products, such as how they were made, what allergens they might contain, whether they were suitable or not for celiac or vegan consumers, what the products’ energy value was, among other product information.

Although EB only accepted orders through its Facebook page, it also had an Instagram page as these were the networks most used by its customers. However, the company felt that this kind of online presence was no longer enough to increase its sales and brand visibility. And so, with the development of an online store, they wanted to expand the way their customers could order and to increase their online presence. Therefore, the lack of a pro-active online sales and communication platform was a gap that EB needed to fill and which we proposed, with this research work, to try to eliminate. So, the challenge was to create a design prototype of an online store that would answer to these needs and motivations, both of EB and its customers, being this the main goal of this research work.

The conceived platform derives, therefore, from the combination of several sources of information and research, namely a survey about EB’s own needs and requirements; the study and modeling of its most common user’s characteristics (EB’s customers) identifying, therefore, their main needs; and also a literature review about the migration of consumption habits from a physical context to the online context. This was done to fulfill the main goal of this research work, which was to make the process of buying products through the conceived and designed online platform easy to use, intuitive, pleasant and useful, for its future users.

2 Research and Project Goals

The current research work consisted in the study and development of a first prototype for an online communication and sales mobile platform for the company EB, with the goal of answering to the needs and motivations of both EB and its customers. More specifically, it was intended, through research in Design, to create a digital communication solution that, on the one hand, helped EB to increase its online presence and sales, and on the other hand, helped its customers to more easily and conveniently access information about its products and, ultimately, to purchase them. Therefore, by developing digital communication tools, the intention was to bring the EB brand closer to its current and potential new customers.

Knowing that the fulfilment of the goals identified above is a long process, this study focused on the conception, design and prototyping of the online platform in order to ensure, through the adoption of UI and UX Design strategies, and also through the implementation of Usability tests, an interface solution that is pleasant and easy to use for EB customers.

3 State of the Art

Since we set out to conceive and design a digital platform for food sales and ordering, it becomes imperative to understand what it currently means to buy something and how these transactions of goods and services operate today, particularly in the food business. In other words, what new behaviours are experienced by consumers (are they the same as in the past or not) and in what ways they operate. As will be described and analysed below, there are several factors that have driven this transition phase in which we find ourselves, from the typical purchase made in a physical store to the purchase made, also and in parallel, through digital platforms.

3.1 The Transition of Shopping Behaviours from the Physical Store to the Online and Mobile Context and the Factors Driving It

In recent times in Portugal, the ecosystem of transactions of goods and services, as in the rest of the world, is migrating to the digital environment, although not yet completely eliminating the purchase in physical stores behavior. As published by the Portuguese Trends Observatory in a survey developed by Grupo Ageas Portugal and Eurogroup Consulting Portugal [1, 2], although online commerce is growing, the majority of consumers say they still prefer to buy in-store [1, 2]. However, there are indicators that reveal a clear growth trend of shopping in the digital context. For example, in 2019, according to a study by DPDGroup, an average of 83,000 orders per day resulting from online purchases were delivered in Portugal, for a total of 20.7 million per year [3]. The same study also mentions that 35% of its respondents buy online regularly [3]. Already in 2019, according to the CTT e-Commerce Report 2020 study, 51% of Portuguese people with internet access had already made at least one order on the internet and it was estimated, at the time, that by the end of 2020 this number would reach around 56% [4].

On the other hand, the Covid-19 pandemic, also seems to have leveraged this growth in digital transactions. With the 2020 confinement and the consequent closure of physical stores in Portugal, buying online became the only way for some consumers to shop [1, 2]. In fact, 73% of e-shoppers claimed to have shopped online between 3 and 5 times a month [5]. And after a further confinement in early 2021, these circumstances only accentuated the growth trend of the e-shopping market, growth that, according to an ANACOM’s² report about e-Commerce in Portugal in 2021, reached about 52%, 7 more points than in 2020 [6], figures and numbers which converge with the growth forecasts described in the CTT e-Commerce Report 2020 study.

Therefore, as can be easily seen by the data presented above, online shopping is already a very substantial slice of the overall shopping market in Portugal.

Another factor that is intertwined with this rapid growth of e-commerce in Portugal is the increase of digital apps’ download. Data from the period after the confinement caused by the first wave of the pandemic, reveal that during this confinement the installation of Apps grew 70% compared to the same period of the previous year. And, regarding food consumption Apps (restaurants, Uber Eats, etc.) these grew 21% [7]. As in Portugal, the only forms of service available in restaurants were deliveries and Take Away services, this significant growth in the adoption of Apps for food consumption is understandable and expected. On the other hand, there was also a huge explosion of new online stores, restaurants started adopting the Take Away model, making deliveries and accepting orders through social networks [7]. These facts demonstrate how much the restaurant industry had to adjust to this new paradigm of electronic commercial transactions.

Regarding the use of mobile phones to purchase goods and services, there are also some indicators presented in market studies that show the growth of this purchasing behavior. For example, in the Portuguese context, from 2016 to 2018, the number of Portuguese who used their smartphone to make online purchases increased, according to the 2018 e-Shopper Barometer, by about 6 percentage points, reaching 54% in 2018 [8]. And in 2019, according to a study by DPDGroup, 72% of its respondents stated that they made their purchases through their smartphone and that this was the most used device when making transactions [3].

So, in conclusion, as can be seen from the data presented above and this new ecosystem of commercial transactions, it can be said that these new behaviours clearly support the relevance and need for companies or brands to have an online presence today and, in particular, an online presence adapted to the mobile platform, as it seems consumers are increasing their purchases through this medium. It is therefore necessary that they offer their customers and consumers digital tools that meet their new habits and modes of consumption. And EB is no exception in this regard.

4 Methodologies

Methodologically, this project was divided into three distinct stages, each with its own specific methodologies that are detailed below.

4.1 First Research Stage

In a first research stage, an extensive literature review was conducted on topics that were deemed relevant to this research such as the following:

• 1. The growing transition of consumer habits to digital and mobile platforms;

• 2. Interaction Design and User Experience Design (UX Design).

Regarding point 1 it was intended to understand how consumers buy and consume today. And, for that, it was necessary to analyze the growing use of mobile, and consequent download of applications, derived from everyday life and new consumer habits. Regarding point 2, it was intended to collect what other authors and researchers say about the Design of the interaction and User Experience, in order to, on the one hand, guide the design process of the EB online platform, and on the other hand, extract design requirements for this platform’s design.

4.2 Second Research Stage

In a second research stage, a survey regarding the characteristics and needs of the user was carried out. It was intended, in a User-Centred Design approach, to mainly know and understand the characteristics and needs of the EB customers, in order to, from this knowledge, also extract Design requirements that would allow us to adapt the solution later designed to EB’s target customers.

4.3 Third Research Stage

In a third and final research stage, from all the data collected in the previous ones, the design requirements of EB’s mobile sales platform were determined. Next, we proceeded to the design and development of a non-functional and high fidelity prototype, using methodologies and concepts associated with UX Design (User Experience Design) and UI Design (User Interface Design). To this end, the following steps were performed: creation of the main persona; information architecture design through a sitemap; user flows; wireframes; interface design; and, finally, high-fidelity prototyping [9]. Finally, Usability tests were applied to the prototype with a sample of participants that were representative of the target audience, in order to understand if the solution and platform designed was easy to use or not, and if its interface had a good level of Usability. Each of these steps is briefly described below.

Primary Persona

Personas are, according to Cooper et al. [10], archetypes based on behavior patterns of real consumers that are discovered during the research stage (…). These abstractions, built on the common characteristics and needs of real consumer groups, are usually materialized as a fictional character representing potential users [10].

In the case of this project, only the Primary Persona was defined, which encapsulates the characteristics and needs of EB’s eventual customers, as this is an academic project and of limited scope. This Persona was therefore defined on the basis of an interview survey applied to the EB managers and on the basis of questionnaires applied directly to some of EB’s customers, where data on age group, academic qualifications, technological and digital skills (use of computer equipment, use of social networks, installation of Apps on a smartphone, use of smartphone to make online purchases), geographical origin and needs felt by customers when making purchases with the current EB online presence were collected.

Sitemap—Information Architecture

Before moving on to the platform’s UI Design it was necessary to define an information architecture. This refers to the structure and distribution of the content and functionalities offered by a digital product, describing how to navigate between the different pages and how they relate to each other. Therefore, it was also necessary, for the UI Design planning of this platform, to decide how to segment and organize the different contents and functionalities that would be displayed to the user, in order to understand how the user would interact with and navigate through it. So, a Sitemap (Fig. 1) was diagrammed in order to distribute and organize all the contents and functionalities resulting from the requirements determined for the design of the EB’s platform.

Fig. 1

Sitemap developed for EB’s digital platform

User Flows

In the UI Design planning of this project User Flows were also created. User Flows are diagrams that represent, in a schematic way, all the steps and actions that a user has to sequentially perform (according to a specific order) in order to complete a given interaction task within a digital product. These help a Designer to define all the possible paths that an eventual user has in a digital product, to perform a given interaction task, in the fastest and most effective possible way. In the specific case of this project, 6 groups of User Flows were created (since some of these tasks had more than one possible execution path) that described the six interaction tasks that corresponded to the primary needs of a future user of the platform (Fig. 2). It should also be noted that the interaction tasks that were diagramed and planned with these User Flows were precisely the same ones that were then tested and assessed in the Usability tests that will be described later in this document.

Fig. 2

Examples of User Flows designed for one of the platform’s interaction tasks

Wireframes and Sketches

Next the wireframes of the platform’s pages were drawn. Wireframes are the first sketches and visual composition studies of the graphical interface, using drawings with a low level of visual detail and usually without color. They are essentially used to help define the visual composition and relative positioning of all the visual and interactive elements that will be displayed on the different pages of a digital product's interface. In the specific case of this project, these were also used to quickly test several hypotheses of graphic composition and help define a visual and layout dressing for the platform’s different pages (Fig. 3).

Fig. 3

Homepage’s first sketch

High-fidelity Design and Interface Prototyping

As far as the graphic Design’s development was concerned, this was done in Adobe XD software and, later, a high-fidelity but non-functional prototype was assembled in the same digital tool (Fig. 4). The prototype can be viewed at the following link: https://tinyurl.com/mehzpy7k.

Fig. 4

Platform’s prototype displayed in a IPhone X screen

In terms of display resolution and format, the IPhone X screen resolution was used (375 × 812 pixels), since its format and size were similar to the device on which the Usability Tests of the prototype were later done, that is, an Asus Zenphone 5. As for the typography options, we chose to use two different fonts: Blanch Condensed and Open Sans. Blanch Condensed was used in the larger titles and in the product prices that are displayed on the platform's pages. The choice of this font derives from the fact that it is the main font used in some of EB's graphic communication materials, and especially in its logo. And as such, it is desirable to ensure graphic consistency among all the company’s communication materials, which the use of this font also ensures.

With regard to Open Sans, we chose to use this font in the remaining text elements, since it is a Sans Serif font optimized for the web and for mobile interfaces. It therefore offers excellent readability on screen and at smaller sizes, which is mainly suitable for the smaller typographical elements of the interface such as smaller titles and paragraph text. On the other hand, it has a neutral and connotation-free appearance, which is desirable in order not to visually compete with the visual expressiveness of the primary font.

Regarding the adopted text sizes, size 16 points was used for paragraph text, size 8 points was used for less important text such as breadcrumbs, size 30 points was used for primary headings, and size 12 points was used for secondary headings.

Regarding the colors adopted for the platform’s layout, in order to give it a cleaner and minimalist look, white was used as the page’s background which was combined, to ensure graphic and brand consistency, the color previously adopted in the EB´s logo. That is, the hexadecimal color #9A3324, which corresponds to Pantone 484. For the text elements an 80% black was adopted in order to reduce the visual weight of these elements and make it more pleasant to read. In addition to these colors there are some shades of gray and red in the color scheme implemented, particularly in some of the pop-ups.

Iconography wise, icons that used common visual conventions were used, so that there would already be a familiarity with their meanings that would minimize possible problems of understanding and interpreting them.

5 Usability Testing

Once the prototype was finished, the last and third stage of this study was dedicated to the Usability assessment of the prototype and its interface with a sample of EB’s target customers. With this assessment it was intended to test its ease of use so that, in the event that Usability problems or issues exist, they can be corrected and thus raise the degree of Usability of the interface to a level that provides the user with a pleasant, easy and comfortable experience of use and interaction.

5.1 Usability Assessment and Testing Sessions

A total of 5 Usability assessment sessions were conducted between August 21 and 26, 2021, with a sample of 8 participants. The sessions took place, in some cases, in the participants’ home kitchen and, in other, cases in the researcher’s kitchen, since this was the context in which the platform was expected to be mostly used.

Each participant was asked to perform 6 different interaction tasks with the prototype. These tasks corresponded to the primary needs of a future user of the platform. As far as equipment was concerned, the tests were performed on a smartphone with the Android operating system, model Asus Zenphone 5, equipment where participants were provided with the platform’s prototype.

Before the participants started any interaction task, the researcher who applied these tests explained to the participants how the tests would work. They were therefore informed of the following:

• 1. What the prototype platform consisted of and what it was for;

• 2. What the purpose of these tests was;

• 3. That given the non-functional nature of the prototype, the data filling fields would be filled in automatically with a mouse click;

• 4. That what was being assessed was the prototype, not the participant;

• 5. That while running the tests they would think aloud (Think Aloud Protocol);

• 6. A rough estimate of the duration of the assessment session.

After the completion of the tested interaction tasks, a satisfaction questionnaire was applied to each participant with questions such as the following:

• 1. Do you find it easy to get information in this online store proposal?

• 2. Did the online store proposal arouse your interest in the brand?

• 3. Do you consider that the interaction with the online store is simple and clear?

• 4. Do you consider the online store intuitive and accessible?

• 5. How do you characterize the website proposal? Not very interesting and not very useful? Interesting and useful? An interesting store that would be very useful to me?

5.2 Data Collection Instruments

In terms of data collection instruments the following were produced and applied:

• 1. A general script for the tests’ conduction. This script included all the instructions and information to be given to each participant, as well as the order in which the tasks and actions would have to be performed throughout the tests by both the researcher and the participants. It also included an observations grid (for observations and task execution times registration). This ensured that the tests were always applied in the same way with all participants;

• 2. A satisfaction questionnaire. As it was also intended to measure the degree of overall satisfaction of the participants in using the prototype’s interface and to verify whether the participants found the conceived Design proposal interesting and useful.

5.3 Recruited Participants Sample

For these Usability assessments a sample of the target customers of the EB brand was recruited. The sample was composed of 8 participants who, it should be noted, were actual EB customers. Despite the small scale of the sample this does not invalidate the validity of the data collected since, according to Nielsen [11], testing with only 5 participants allows us to find almost as many Usability problems as if we tested with many more [11]. As for the sample’s participants gender, 3 were male and 5 were female. Although the sample had male elements, we tried to make sure that most of them were female, since, according to EB, their clients are mostly female. In terms of age, the participants were between 18 and 60 years old. Regarding the digital skills of the sample most of the participants had enough digital skills to shop online and with a smartphone, as 5 declared they accessed the internet through their smartphone while 3 declared they did it through their PC. They are also all users of social networks. Regarding their vision capabilities, 5 of the participants stated that they already felt some difficulties and problems such as Myopia, Strabismus and Astigmatism, even using glasses. It should also be noted that one of the Participants had severe vision impairment and was included in the tests in order to understand if it would be possible for a user with special needs to use the online store, or not.

6 General Results and Discussion

6.1 First Major Conclusion

Regarding the results obtained, the first major conclusion drawn from the performed Usability assessments is that, at least in what concerns the interaction tasks tested with the designed prototype, they endow the interface with a quite reasonable degree of Usability, since the effectiveness levels are high and the global efficiency levels are medium. This belief of ours is based on the following data. Of the 6 tasks tested:

• 1. All were performed effectively. Only one task (namely, task n^er1) was not performed until the end by one of the participants (namely, participant n^er 5). All the remaining ones were able to execute both that and the other tasks successfully;

• 2. Only in tasks 1, 4 and 5 there were some problems of efficiency in their execution. In the remaining tasks there were neither critical errors (errors that prevented the progression of the task execution from a particular step forward) nor non-critical errors (errors from which participants would recover). However, in those in which some errors were observed, with the exception of task 1, the quantity and type of errors observed was not enough to state that they were of completely inefficient execution, since, when participants made errors, they were always non-critical errors.

On the other hand, the results of the Satisfaction survey seem to reinforce and converge with our conviction that the designed interface enjoys a quite reasonable degree of Usability, since:

• 1. All participants mentioned that they had no major difficulties in performing the tasks tested;

• 2. With the exception of participant n^er 5, whose vision difficulties did not allow him to read some font sizes, namely 12 pt and 8 pt, or to interpret the icons on the prototype, all considered it easy to obtain information on the developed prototype;

• 3. Most participants found the online store prototype simple and accessible, with the exception of 2 participants whose visual limitations did not allow them to understand the prototype in its entirety. These participants stated that they could not see some icons of the interface correctly, namely participants n^er 5 and n^er 7;

• 4. The participants considered the online store prototype accessible and of clear interaction. With the exception of 2 participants whose visual limitations did not allow them to understand the prototype, namely participants n^er 5 and ner 7;

• 5. In general, participants rated the developed prototype as “Interesting and Useful” and as “An online store that would be very useful to me”;

• 6. The participants considered that the prototype is functional and corresponds to their needs.

6.2 Second Major Conclusion

The second major conclusion to be drawn from the results of these tests is that, despite the fact that the interface of the prototype already enjoys a very reasonable degree of Usability, the errors made and the participants’ suggestions, show that there is still some room for improvement. Therefore, in a future design iteration, the following adjustments or reformulations should be implemented:

• 1. It should be possible to enter the purchase process through the product comparison feature page (add button for this purpose);

• 2. It should only be presented one date suggestion for the order’s pick-up.

6.3 Third Major Conclusion

While testing, we found that the interface of the prototype may offer some challenges and difficulties to some of EB's older customers. This conclusion stems from the fact that 2 of our participants suffer from some major vision problems (namely participant n^er 5–53 years old) and are not familiar with visual conventions typically used in the digital world (namely participant n^er 7–60 years old), such as specific icons widely used in the digital world. These participants, given their characteristics (age, visual difficulties, low digital literacy), were confronted with some difficulties in the Usability Tests carried out, which tell us that the Design of our interface should suffer some changes in order to accommodate their limitations since the EB’s target customers also include people in older age groups. Thus, in a future iteration of our prototype design the following adjustments should be accommodated:

• 1. Increase the font size (ideally at least 16 points), or at least provide some sort of functionality that allows the user to increase the font size if they need to;

• 2. Review the design of some icons, such as the trash can, which was not recognized as such by one of the participants;

• 3. Design larger icons and add to them a written label with their name/meaning, in order to make their interpretation more effective;

• 4. Use higher typography weights than Regular;

• 5. And include the possibility for the user to use the platform with a black background or make use of a contrast adjustment feature.

Finally, given the results presented and discussed above, it can be said that these were quite positive, given that the participants successfully performed most of the interaction tasks requested, and it was shown that the methodological strategies and research path adopted, focused on a User-Centred Design approach, produced the desired results.

7 Final Conclusions

This research project presents as final output a proposal for the design of an online mobile sales platform for the company EB, with the goal of helping this company to expand its sales and to provide its customers with a more convenient, fast and efficient way, both to find information about its products and to actually buy them.

Through a methodological approach in which: (a) the current ecosystem of behaviours and online consumption habits was studied and analysed; (b) in a User-Centred Design approach, the needs, characteristics and difficulties of EB's customers in their relationship with the brand and its products were studied, as well as the needs of EB itself; (c) design processes inherent to the practice of UI and UX design were applied; a proposal for the interface design of an online sales platform was conceived, designed, prototyped and tested in terms of its Usability. The goal was to ensure the design of a platform and its respective interface that is easy to use by its eventual users and that they consider useful in meeting their expectations and needs.

During the development of the project, to the better understanding of who is the typical customer and user of the platform, it was essential both the contributions with data about their customers by the EB managers, as well as the data that was collected in questionnaire surveys directly applied to a sample of customers. These contributions made it possible to map both the characteristics of users and to identify their needs and, thus, to conceive and design the platform with all the necessary data, content and operational functionalities according to the aforementioned mapping and user modelling.

With regard to the results obtained with the Usability tests, these indicate that the research methodologies used helped to create a prototype with a user experience that, although still needs some revisions and improvements to its design, was globally pleasant and reasonable in terms of the degree of Usability experienced by users. Only in one of the 6 tasks tested and only one of the 8 participants of the sample (the other 7 successfully completed the task) did not complete the execution of that task, which demonstrates the high rate of effectiveness of user interaction with the interface. In terms of task execution efficiency, some interaction errors were observed in 3 of the 6 tested tasks. However, with the exception of one of the three where errors were observed, the quantity and type of errors observed was not enough to state that they were of completely inefficient execution, since, when participants made errors, they were able to recover from them (non-critical errors) by themselves and carry out the task until the end. Therefore, these errors demonstrate that the interface of the so far developed prototype, despite already presenting a reasonable degree of usability, should still be subject to another Design iteration to try to minimize the observed errors.

Given these results, it is believed that, after a new Design iteration to eliminate the interaction errors observed with the prototype interface, the future implementation of the studied, designed, prototyped and tested Design proposal can successfully meet the needs of both EB and its customers. It may, on the one hand, increase the sales of EB products, thus bringing the brand closer to its customers. And it can, on the other hand, make it easier for customers to access information and purchase products, processes that with this digital tool will be accessible from the palm of their hands. Which of course is more comfortable and convenient, since it doesn’t force them to physically go to the store.