Web app design and development


Creative direction, web app design and development for Superface, designed the Minimum viable product (MVP) for the BETA version. We also created the brand design, business and marketing strategies. Superface is a web app that protects the identity of children and adults online, the app detects faces and quickly places funny masks on them, so that it is not possible to recognise who they are.

colores superface aplicacion

Create a MVP and a persuasive web so that the target users do not hesitate to try the service. It targets users that are not familiar with digital environments and losses focus often.



A persuasive website that targets its main users.

Our strategy


A website based on rewards where the signup process gives access to the app and many different resources that the users needs to overcome their daily tasks.



A web app that is very intuitive, clear and can be used by users that are not familiar with technology nor digital environment.



A website where information is plain sight without making user think.

diseño aplicacion web

Our main focus

The website and web app structure is designed so that users know where they are at all times and what actions they need to take, making it easy for them to explore the different options across the sections and features offered.

diseño aplicacion web
diseño aplicacion niños


Uploading a picture and choosing a mask was simplified through the use of layers on top of the photo, so that the user doesn’t lose track and keep their attention focused. After a task is accomplished within a layer, it takes the user to the next one, this way it doesn’t overwhelm them.

Web style guides

We based the overall web design in the branding exercise previously defined. As the main sector we target is very much related to schools and children, the design is quite childish with a somewhat misterious feeling, as the main goal of the app is to hide faces with funny superheores masks, we wanted to stand out this feature.


Poppins is a Sans serif font with a geometric structure. This typo is quite formal but playful and has got a slightly futuristic character.


desarrollo app superface

Web and app flowchart

We created a flowchart which helped us to create and polish the final strategy.

estrategia web flowchart

Intuitive navigation with all the main actions visible at all times

The minimum viable product should be designed on its simplest version and leave room for further and ongoing development.

diseño pagina web applicacion
diseño aplicacion web
diseño web aplicacion web
diseño aplicacion web- perfil