Activation Dashboard UI

How We Used Arctype to Improve User Onboarding

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.

Source link

The standard ‘CSS is awesome’ meme where the word ‘awesome’ flows outside of its containing box.

CSS Is, In Fact, Awesome

I recently listened to a talk by Hidde de Vries titled “On the origin of cascades”. It was an intriguing talk full of interesting historical tidbits about the origins and evolution of doing styles in the browser.

Hidde points out how adaptive CSS has been and continues to be and he compares that to this idea of natural selection. He points out that one of the biggest contributors to the success of CSS is its ability to adapt to the wide variety of needs stemming from the user base of the web.

Specifically, I really enjoyed Hidde’s shakedown of the “CSS is Awesome” meme. You probably know it. I’ve seen it. I’ve laughed at it. It’s an iconic representation of what people perceive as wrong with CSS:

The standard ‘CSS is awesome’ meme where the word ‘awesome’ flows outside of its containing box.

Hidde flips this joke on its head and points out that this joke actually demonstrates how awesome CSS is.

What you see in the image is CSS by default. From this starting point, you have options. CSS doesn’t guess at what you’re trying to do.

Want to let the containing box grow dynamically with its contents? You can do that with a little more CSS.

The words ‘CSS is awesome’ where the words fit their containing box.

Want to maintain sizing and cut off content when it overflows its containing box? You can do that with a little different CSS:

The words ‘CSS is awesome’ where the word ‘awesome’ is truncated  fit their containing box.

And, as one more example I’ll throw in myself: want to truncate text that overflows its containing box? That’s also possible with a little extra CSS:

The words ‘CSS is awesome’ where ‘awesome’ is truncated within its containing box to ‘awe...’

CSS doesn’t know which of those—or others—were your intention. Rather than guess, it starts at a base level and branches into a variety of outcomes with each additional styling rule.

This is the power of CSS. It gives you options. Use them or don’t.

So the dots Hidde connects, which I’d never put together, is that when we see this:

The standard ‘CSS is awesome’ meme where the word ‘awesome’ flows outside of its containing box.

And we point and jest, that is merely us not liking—or understanding—the defaults inherent in CSS. The overflow is working here as specified. We simply haven’t learned or understood CSS on that deeper level.

This lack of understanding CSS at a deeper level has corollaries in JavaScript. For example, people will laugh at expressions in JavaScript like this:

true == "true" 

On the surface, yes that’s odd. But if you look at the spec and understand the mechanisms that are at play deep in the language (coercion in this example), you’ll begin to understand how and why the spec is written the way it is.

This is precisely what Kyle Simpson argues in his eye-opening book You Don’t Know JS:

While designed to help you, implicit coercion can create confusion if you haven’t taken the time to learn the rules that govern its behavior. Most JS developers never have, so the common feeling is that implicit coercion is confusing and harms programs with unexpected bugs, and should thus be avoided. It’s even sometimes called a flaw in the design of the language.

However, implicit coercion is a mechanism that can be learned, and moreover should be learned by anyone wishing to take JavaScript programming seriously. Not only is it not confusing once you learn the rules, it can actually make your programs better!

This is right inline with an insightful sentiment expressed by Josh Comeau in his post “The Importance of Learning CSS”:

CSS is a very implicit language; it relies heavily on mechanisms buried deep in the CSS specification. When those mechanisms work in ways we don’t expect, we’re left in the dark, not sure what the heck is going on..

When we write code—in any language—we rely on our mental model of how that language works. If our mental model is incomplete or incorrect, there’s a good chance that we won’t get the result we were expecting. In CSS, those misalignments are super common, because of how implicit CSS is.

This all falls right inline with a sentiment I’ve expressed before about how “the working knowledge of [HTML/CSS/JS] are less about syntax and more about how things work.” CSS is, in fact, awesome. Familiarizing ourselves with its underlying rules and mechanisms allows us to fully recognize its awesomeness.

Source link

Typography – Ink Traps, Light Traps, Exploding Corners and more

Typography – Ink Traps, Light Traps, Exploding Corners and m…

Typography – Ink Traps, Light Traps, Exploding Corners and more

If you've ever looked at a typeface up close and wondered why those weird cut-out shapes (ink traps) inside the angles were there, this article goes very deep into why they exist:

submitted by /u/PlasmicSteve

Source link

r/graphic_design - Just sharing... Maybe some feedback?

Just sharing… Maybe some feedback? : graphic_design

Hey there! I hope everyone has been doing well! So… I’m interested in going into graphic design and just wanted to share one of my recent projects in my photoshop class that I’m taking this semester. This was just a photo composite project and this is what my mind came up with. I’d describe this piece as “The sky is the ocean.” 🙂 I was also trying to aim for a ‘modern surrealism’ look with this piece. I think I did pretty okay with this piece but any feedback would be great! Thanks!

r/graphic_design - Just sharing... Maybe some feedback?

Source link