How We Used Arctype to Improve User Onboarding | DevsDay.ru

IT-блоги How We Used Arctype to Improve User Onboarding

DZone Web Dev 7 апреля 2021 г. Derek Xiao


Guiding Users to an 'A-ha' Moment

In 2020, ex-FB exec Chamath Palihapitiya shared his secret for growing Facebook to its first billion users. He had a laser focus on only 3 goals: getting users in the door, getting users to experience core value as fast as possible, and delivering core value as often as possible.

We wanted to see if we could apply these principles at Arctype and recreate the magic that Chamath engineered at Facebook. So last month we focused on the second goal, getting users to experience core value, and we saw some impressive results.

At Arctype, we’re building a SQL editor to help our users collaborate on database management and analytics. One of our core metrics is the percentage of our users who have run a query. After going through the process below, we were able to improve this metric by close to 2X. Here were the 3 steps we followed:

  1. Create a dashboard to find underperforming KPIs.
  2. Interview real users to understand why these metrics are low.
  3. Fix the issues by 'stealing.'

Read along to learn how to apply these same steps to have more successful onboardings in your own product.

Creating a Metrics Dashboard 

To improve our new user experience, we had to understand how new users were currently using Arctype. We used to answer these questions by running queries and creating charts. This process was time-intensive and often led to duplicate work from someone unknowingly re-creating an existing query. To solve this we decided to create a dashboard focused on user onboarding. We saw three main benefits for creating a dashboard: 

  1. View multiple metrics at the same time to see the big picture.
  2. Easily shared with anyone on the team.
  3. Saves time on future analysis.

The next step was deciding what to include in the dashboard.

Selecting the Right Product Metrics for The Dashboard

We wanted this dashboard to provide a picture of what users were doing leading up to running their first query. When creating a dashboard focused on a user journey these are the rules we apply:

Activation Dashboard UI

  • 1-3 'key' metrics (KPIs). These provide a snapshot view of how the product is performing. When choosing these metrics we think about what defines success for this portion of the user experience.
  • 1-2 charts. The goal of the charts is to provide a more detailed look into the key metrics. Some common visualizations are showing performance over time or frequency distributions for specific user events.
  • Input controls such as dropdown menus to allow users to dynamically adjust the dashboard.

You’ll find that everything is grouped in threes as an ode to the law of 3s. We’ve found putting more than 3 similar objects actually makes dashboards more difficult to understand.

A Repeatable Process for User Research

After we learned that 50% of our users weren’t linking a database, we prioritized conducting user research in the next sprint to learn how we could improve the database connection experience. In order to do this, we began interviewing new users and observing them as they explored the app to learn more about where they were dropping off. After doing 20 user interviews, we developed some best practices.

  1. Email users immediately after they signed up or identify churned users and send them emails offering to 'personally onboard' them onto the product.
  2. User interviews can serve the dual purpose of onboarding users and also gaining insights.
  3. Create a general onboarding script that guides the user through tasks leading up to an 'a-ha' moment.
  4. Do interviews in pairs so one person can take notes. Written interview transcripts are incredibly helpful for synthesizing the research.

After you’ve finished collecting user feedback from your interviews, you will have a wealth of data, but it will be unorganized and indigestible. The end goal of conducting this user research is ultimately identifying actionable insights that can be turned into development tickets for the engineering team.

Making Sense of User Feedback

One tool that we commonly use at Arctype is affinity mapping. Through this process, we’re able to quickly group together insights and bubble up themes, and develop a sense of what’s most important. Affinity mapping is usually completed in groups, but with zoom fatigue, we’ve been trying to do more activities asynchronously. To run an effective asynchronous affinity mapping process, we borrowed some tips from the map-reduce model of distributed computing. Here’s what we learned.

  1. Assign everyone a clear set of interviews to be responsible for.
  2. Everyone contributes observations, learnings, and ideas to a shared document.
  3. Mark which interview each insight came from and this will serve the dual purpose of seeing how many times each insight occurred.
  4. For the first iteration of grouping, the focus is just creating any groupings to organize the mess of notes.
  5. Take a second iteration to try to create some high-level MECE framework for categorizing all of the groups.
Buckets of Learnings Diagram

After going through this process with our own user research, we had seven major groupings appear that could be categorized into either Product or Design insights. Product insights relate to building the right product, and it can include things like identifying a target user, refining your core value, etc. Design insights make sure your users can use the product. This can be things like navigation, information hierarchy, etc. For a quick primer on UI design principles, we highly recommend Don Norman’s 6 principles.

The original problem we wanted to solve was increasing the percentage of users who connect a database. Going through this process allowed us to review our database connection experience with fresh eyes, and we discovered a lot of things to be improved. A key finding for us is that we have two different types of users: those who already have a database and those who don’t. These two personas had different problems, but we were not fully solving them for either. In the next section, I discuss how we took these insights to design a new user experience.

Designing a Better Experience

A problem that spanned across both user personas is that our existing database connection screen was “overwhelming” for new users. At Arctype we want to create the simplest tool for a developer to go from a database to queries, so we knew we had to fix this. The database connection screen is the first screen that any new user sees, and we immediately throw a lot of information at them. Multiple groupings of buttons (Gestalt), 20+ CTAs drawing your attention, etc. In order to streamline the entire process, we decided to introduce a paginated onboarding experience.

A dedicated onboarding experience would allow us to guide users through the database connection flow, and it would also enable displaying different screens depending on which user persona they fall into. 

UI Examples

These are my tips for when you’re at a resource-constrained startup and want to move fast on designing a new experience:

  1. Research best practices. Spend 1-2 hours just reading and taking notes. Don’t worry about your designs at this stage, this is just to prime you in the right mindset.
  2. Great artists steal. Look at the UI from large companies with large design budgets. We marked up Asana's onboarding experience in Figma to get a feel for the elements they used to make it great.
  3. Don’t be scared of LoFi. Use existing design components where you can (radio buttons, input boxes, etc), but feel free to just use shapes for the rest to keep up the momentum.

By the end of the week, we had created an activation dashboard, conducted user research, synthesized insights, and designed a new onboarding flow. We had a review with the engineering team, and then it was time for implementation!

Measuring the Success of The Redesigned Onboarding

Arctype UI

It’s always important to measure the success of your efforts. This is a great time to pull back up that Arctype activation dashboard you made at the beginning and review how your metrics have changed. We just launched our new onboarding flow, and we want to hear what you all think! Download Arctype here and let us know how we can continue improving our experience. We’re excited to continue working together to create the best SQL client for developers.

Источник: DZone Web Dev

design analytics product user experience onboarding

Читайте также


If it bugs you, save screenshots

Дизайн UX Planet 21 апреля 2021 г. 8:23
Quick tips to build UX skillsUser experience is really about human experience, and a UX designer’s most powerful tool is the ability to tune in to how something feels to use in the real world, under real conditions.This is easier said than done when...... читать далее
content-design technology-strategy ux-design ux-design-process

Unlabeled Icons: Sacrificing Usability for Aesthetics

Дизайн UX Planet 21 апреля 2021 г. 8:23
Do you really not have room to label that?Uhh…Emu hunting? Friends list? Ea-nasir owes me fine copper ingots?People have been confused by unlabeled pictograms for over 10,000 years. I am not the first person to write a version of this article. Howeve...... читать далее
product-design design icons ui ux

Разработка DZone Web Dev 20 апреля 2021 г. 18:56

Introduction The world of web development has changed rapidly. Over the last fifteen years, web pages have evolved from simple HTML text to multimedia interactive experiences, elevating web development to art. That’s like a civilization going from st...... читать далее

java javascript seo development react rendering vue googlebot

Дизайн UX Planet 20 апреля 2021 г. 13:51

In this case study, I am going to innovate with the design process and unravel my decisions and thinking for a better understanding of my motivations.The story that led to InnovationA doctor in a medical hospital was taking a break and sipping coffee...... читать далее

ux-research ux-writing ux-strategy figma ux-design

Дизайн UX Planet 20 апреля 2021 г. 13:51

LeadMarket Mobile App Redesign — UI/UX Case StudyWhat is Lead Market?LeadMarket is India’s Largest Marketplace of pre-qualified leads for Insurance, Mutual Funds, Loans, Real Estate and Stocks. The customer can enjoy the option to buy and manage the...... читать далее

case-study ui-design médium user-experience ux-design

Дизайн UX Planet 20 апреля 2021 г. 13:18

User scenario is a key element on way of UX designer thinking. For design process, at least one time, user scenarios are thought to create empathy and take an action based on user needs by defining what/why users do and the context in which design is...... читать далее

context ux scenario services empathy

SEO Yoast.com 20 апреля 2021 г. 12:23

The web, and our online habits with it, are never at a standstill. One result of our fast-paced online behavior is that we scroll through our social media channels like nobody’s business. Or without having our full attention on it. Most of the...... читать далее

Facebook Image SEO Instagram Pinterest Twitter

Популярные темы

новости (393) ux (363) design (329) headline (271) python (226) ubuntu (220) ux-design (218) devops (206) новость (204) javascript (201) web dev (193) security (188) seo (150) tutorial (141) working in tech (137) дайджесты вакансий от new.hr (136) статьи (131) ui (127) programming (118) testing roundup (116) software testing (113) user-experience (111) дизайн (99) product-design (94) google (93) java (90) игровые проекты (85) ui-design (84) design-thinking (84) primary (77) api5 (76) технологии (76) движки и конструкторы игр (70) прочее (70) job hunting (68) windows 10 (68) бизнес (68) php (66) bash programming (66) laravel (65) technology (65) debian (61) hardware (60) css (59) linux mint (57) uncategorized (56) обучение (56) мероприятия (56) работа (52) docker (51) español (51) covid-19 (50) web design and applications (49) cloud (49) android (49) case-study (49) chrome (48) турбо-страницы (47) инструкции (46) обзоры (46) tutorials (46) data (45) ux-research (45) machine learning (44) publication (44) angular (44) networking (44) навыки алисы (43) inspiration (43) home page stories (43) разработчики (42) apple (42) kubernetes (42) web (41) art (41) job skills (41) c++ (41) powershell (41) ios (40) kali linux (40) mysql mariadb (40) google ads (39) cybersecurity (39) virtual reality (39) автоматизация (38) wp (38) vue.js (37) маркетинг (37) wordpress (36) aspnet (36) тестирование (36) события (36) arch linux (36) полезное (36) productivity (36) marketing (36) кейсы (35) css 3 (35) events (35) smm (35)