Typeform Mobile

Product Design, UI/UX Design, Secondary Research, User Interviews, Art Direction, Design Workshops

About Product

Typeform is a SaaS product that allows users to create engaging, accessible, and delightful survey experiences. Back in 2018, Typeform was well known for its user experience, for the innovative way of dealing with web forms, and was already used by thousands of users and companies such as Nike, Apple, Uber, and Airbnb, among others.

There was a little problem, though. Typeform has two types of users. The builder, or the user in charge of creating and putting the questions of the form together, and the respondent. Even though the experience for respondents through mobile devices was good, accessible, and easy to use, the builder side was thought of as an “only desktop” product.

For two quarters I worked on a cross-functional team with two Product Designers, four full-stack engineers, a Product Manager, and stakeholders.


Many users and companies demanded access to different functionalities using their touch devices, but that wasn’t possible, and it was one of our top requests at that time.

Typeform builders couldn't access their accounts from mobile devices, and more than 50% of the new signups were coming from touch devices. This is how we framed the problems we started from


As mentioned before, we were facing different challenges, being the main one that the product, on the bulding side, was conceived as a desktop only platform, what led into a complex Information Architeture, and non-accesible Design System UI Components.


With our team, we found a huge opportunity to impact our team’s OKRs related to users acquisition, product adoption, and conversion rates. We thought that by letting users feel the power of creating a typeform and discovering the benefits of the product right after the creation of an account, we would impact the activation of those users. So, with this project we wanted to:


The first tasks we did was simply analysing the existing. Audit the product, list the different areas and sections, understand the information architecture in deep, be aware of all the components used across the product, and rearrange sections, the hierarchy of the builder, and make it work on smaller devices.

New Information Architecture
User Persona


We looked for a development/impact balance. The initial iteration of the experiment, was timeframed on a quarter. The main purpose was to learn from users in production. Understand their behaviour, identify painpoints, and learn how to contribute to the team and company’s OKR through this project.

MVP Designs

Once the MVP version of Typeform Mobile was implemented, we decided to go straight in production and learn from it.

2nd Iteration

Goal: Create to qualify

Based on our learnings, and getting our team’s goals and KPIs in mind, we decided to focus on three main things as part of the second iteration of the project:

  • Deprioritise UI not related to the creation of a typeform
  • Make some UI elements more relevant to help on the job of creating and previewing a typeform.
  • Qualify.
  • Be compliant with Apple’s Human Interface guidelines.

New Information Architecture vol 2
New Iteration UI
Multilevel Header Navigation


Once we had the user flow, the priorities of the project, and the screens designed, we run several tests on top of a prototype built in Figma, with users to identify any usability problems, collect qualitative and quantitative data and determine if they could successfully perform the required tasks. To do so, we used User Testing, a platform where we recruited both, Typeform users and non-users, and a sample of people with different backgrounds that fitted our user persona description.

The results of the tests were positive overall. We didn’t find any major usability problems, users were able to create a form, preview it (qualify), and share it. We found out that adding descriptions nearby the question type was very useful for them to select the right question type, and at the same time, we took the decision of making the action of adding new questions more prominent, since some of the users had trouble finding out the button to add new questions.

Design System

Since the project touched different areas of the product, such as the builder, the results panel, or the template gallery, we created new variations of the existing components to make them work on mobiles, as well as new components that required less hover interactions to work properly.In my endeavor to craft a cohesive and scalable user experience, the design system was animportant part of the design team’s toolkit. A design system serves many purposes that lay afoundation for a product’s long-term success. Investing in building a design system upfrontimproves workflow efficiency and collaboration between designers and developers, ensuresconsistent implementation, and enables a consistent experience for the product’s users.


As part of our goal, we wanted to put our Typeform progressive web app into a wrapper and offer it in the Apple Store. Including some custom push notifications, an integrated authentication system, and splash screens with user guidance. As part of those explorations, we can see the proposed icon and some visuals of the splash screens on the following slides.

iOS Icon
Splash Screen


The results of the project were very positive. We contributed to increase the number of active users, had an impact on acquisition, and we saw CS tickets related to mobile decreased.

The project had a positive impact across other teams, changing the way new features were conceived and built.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system

image caption