Cidade Matarazzo is an ambitious project located in a historical district of the city of Sao Paulo. This iconic villa will be re-modelated and given a new life becoming a spot that will attract lovers of culture, food, entertainment and tourists. Therefore came the ideation of a "super" app, as ambitious as the project itself. Just in one single app several services for visitors of Cidade Matarazzo would be merged.


In this project I was the only Product Designer in charge of the research, wireframing, design and prototyping of the app, and alongside with the Project Owner we formed a team of just 2 which had to give shape to a solution starting totally from scratch. Since there was no references, inputs, visuals or anything to consider we had to create a strategy for our approach since the main stakeholder (the client) was very eager to see an early interactive prototype in order to keep betting for this project.

We divided our approach into 4 phases: Discover, Define, Develop and Deliver.

On the Discover phase we established the roadmap and main goals to achieve in our research, since the Matarazzo app could be described as a mix of several apps into one single solution the research phase required to check several kind of apps and products in order to gather the best concepts and ideas that could be taken and applied to Matarazzo. There was no such thing as a direct competitor, but we also thorougly investigated existing "super apps" that we could found in distant markets such Asia or Middle East and which provided a sense of how something so complex could look like.

On the Define phase we applied different UX research methodologies to understand better the needs and business concept for the Matarazzo app. We draw User Flows for the different sections of the app to understand how the users could reach their goals. For example in the Food section User Flows were made for the main tasks of the user such as could be booking a table on a restaurant or ordering food delivery. Additionally since the range of potential user profiles was very wide we came up with User Personas to understand better how users from different age ranges, knowledge and backgrounds could use the Matarazzo app. As well as Customer Journeys to gain a better perspective of the user emotions and pain points through the usage of the app.

The Develop phase needed to be reached as soon as possible due to the urgent needs of the client and stakeholders to have an interactive prototype of the app on their hands in order to decide whether they wanted to invest into this project or not. Hence, from the early wireframes made on Sketch a prototype was created using Protopie tool, which was the tool of choice given it's possibility of testing the proto on the mobile as if it was a coded prototype, giving the stakeholders the feel of how the real and finished app could be like in terms of interaction and navigation. Building a solid Components Library and Design System was also crucial in order to accomplish a fast design of the several features of the app and also to be able to quickly come up with new prototypes as new features could be requested.

For the Deliver phase the UI and designs would be polished as the visual aspect was very important in order to engage users. Thanks to the improved prototypes the iterations with stakeholders continued to be succesful and the back and forth feedback helped to understand better the client expectations and business needs and requirements, which was something to consider when taking design decisions since on the development phase of the app would be two different development teams involved.

User Flow - Fashion section: example of buying an item
User Flow - Food section: example of booking a table at a restaurant
User Flow - Food section: example of ordering food

For a project starting from scratch the research phase played a key role in defining the strategy and approach for the ideation of the Matarazzo app. After the initial heavy load of research and once the early prototypes were approved and given thumbs up by the client and stakeholders involved we were able to proceed to give a better look and visuals to the app. Thanks to the creation of the Components Library the addition or modification of the app sections, features or elements was quick and effective in order to meet the roadmap deadlines and cause an impression in the stakeholders presentations that we carried out.

The app is divided in 5 main sections (Food, Fashion, Culture, Wellness & Education). Each of these subsequently is divided into 3 sub-sections in which the user can navigate through the variety of services under that section's branch. Typically each of the main sections could work as an individual app itself, but in such a complex project as Matarazzo, all the sections are merged into one single app.

The "B Inspired" area is an angular part of the platform, a social media section in which users can get "inspiration" about all the services and activities that are taking place in the Matarazzo premises. They can keep track of their favourite influencers/businesses publications and find out about events and anything that happens in Cidade Matarazzo.

On "B Inspired" influencers, personalities and Matarazzo's businesses can upload pictures, videos or any other kind of content regarding their activities or services. These special user profiles are able to access a specific section from where they can upload and manage their posts, as well as checking detailed statistics regarding their user engagement.

To enhance the reward system on the app a token based solution, MCoin, was conceived as a concept. Users would earn MCoins as they use certain features of the app. With MCoins they can pay for products/services or get benefit and other privileges.

Aside from the user side app there was the need as well to create specific CMS apps for the other Matarazzo user profiles (Couriers, Farmers and Restaurants/Businesses). Through these CMS apps they can manage their products, services, bookings, information, etc.

Next project