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.
THE GOAL
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.
Needs
ACQUISITION
A persuasive website that targets its main users.
Our strategy
DESIGN
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.
Needs
SUPER EASY TO USE
A web app that is very intuitive, clear and can be used by users that are not familiar with technology nor digital environment.
OUR STRATEGY
USER EXPERIENCE
A website where information is plain sight without making user think.
THE PROCESS
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.
Interaction
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.
Typography
Poppins is a Sans serif font with a geometric structure. This typo is quite formal but playful and has got a slightly futuristic character.
Colours
Web and app flowchart
We created a flowchart which helped us to create and polish the final strategy.
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.
