Product Design, UI/UX Design, Secondary Research, User Interviews, Art Direction, Design Workshops
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.
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.
Once the MVP version of Typeform Mobile was implemented, we decided to go straight in production and learn from it.
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:
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.
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.
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.
