Category: carousels

  • Slack’s Onboarding Carousel is short-sharp and on-message

    ul {
    list-style-type: square;
    margin-left: 2em;
    }

    Slack is one of the fastest growing companies in history taking only 2 years to get to $1B valuation. Their 2017 round was based on a $200M ARR and resulted in a $5B valuation – so based on real-enterprise value, not just hype. Here is a chart of their stellar growth.

    onboarding carousel

    Te really great thing about slack is that you can get started and feel the impact of chat very quickly, just like the experience you had when you started with DropBox. You can be started and chatting with Slack while Skype is still loading 😉

    So in the spirit of speed Slack give new App users a fun-designed Onboarding Carousel that reiterates the key reasons for using the product and then gets out of the way. Here is how it looks.

    onboarding carousel - example slack 1
    onboarding carousel - example slack 2
    carousel - example slack 3

    Style

    The design is playful, remisniscent of their product icon colours and the solid colours don’t distract from the key messages.

    This might just be a great case study for B2B Apps that don’t want to style to trump substance. For B2C Apps, there is an assumption that some eye-candy needs to be present in the carousel but in B2B its important that the functionality is the hero.

    Buttons and Swiping

    On each page of the carousel, the exit for the user is consistent:

    • sign in to a team 
    • OR create a team

    Having different buttons on different pages would be confusing so this design allows the user to escape the onboarding carousel with only the two call-to-actions that matter.

    The “CREATE A TEAM” call-to-action is unique to Slack but pivotal to the main use-case that MIGHT happen. I’d suspect that many Product Managers would think that mobile users would never create a team, so this step could be easily over-looked.

    Messaging and Text

    As implied by our post’s title, the text is perfect product positioning based on how a user’s JTBD (Jobs to be Done) mindset would be – they want to (1) talk to groups and (2) talk one-on-one.

    They don’t fluff about with other things like uploading images, snippets or linking docs. They will allow the user to discover that later.

    In fact in a post called “How Slack blends productivity and delight”​ the author discusses that “Principle 1: Put people, not features, first.” informs their design decisions. This Principle clearly impacts the wording they use. 

    I love the clarity and simplicity of this communication.

    Making Slack’s onboarding carousel with Contextual

    In this quick 3minute video, John shows how to create a carousel just like Slack with needing to get you developers involved. The benefits are:

    • free your developers to do more important app features and fixes
    • no need for an Appstore release
    • change the content at will.
    • measure the results and engagement.

    https://vimeo.com/269130715

    What about tips?

    Slack also use tips and tours once you are inside the App and we cover this is a separate blog post. Their rollout of threaded conversations was interesting in using phased tips.

    Are you looking to get more users to love your mobile and web apps? You can onboard users just like the bigs guys but without a big budget! Click on the buttons below to get your 14 day free trial or contact us for a demo! 


    Get Started


    Get a Demo


    Contact Us

  • Reminding users of a screen’s purpose

    You know that whilst carousels are cute, that most users just swipe through them ignoring the message. So its interesting to see how Twitch provide an inApp popup to remind the user in a more contextual way.

    If you are NOT a gamer and if you don’t know Twitch, then you are really missing out on the future of entertainment. Its definitely worth downloading and trying to figure out what the hell is going on!

    Take a look at these neat first-time popups.



    These are cool, they:

    • show in the right place right time
    • stand out with a cool design
    • easily get out of the way once you’ve glanced at the message.
    • dont block the context of the screen

    This seems much more useful and contextual than the following two screenshots that are shown in the start-time carousel.

    These carousel pages are cute but:

    1. they don’t really show the page what they really look like
    2. they stand in front of the register/login page which is a huge cognitive barrier the user has to get through. Signing in on mobile sucks and the user will have forgotten what the carousel said once they figure out user name, lookup or think back to the last time they used their unique (hehe) password.

    So its really hard to know why they showed these screens at all on the carousel, it just seems wasteful. The habit and expectation of carousels is very ingrained until Product Managers realize there is a cleaner, more contextual way to onboard users.

  • Open Source Onboarding Carousel

    Using Open Source components is a great way to get beautiful code elements into your App. We extended the Contextual platform to allow the popular “Paper Onboarding” carousel – it’s attractive and had a decent amount of flexibility.

    The cool thing about Paper Onboarding is that it’s material design slider. Here is how Ramotion (its authors) describe it:

    Paper Onboarding is a simple and easy to use onboarding slider for your app. bottom.

    By allowing this to be added in our point-and-click dashboard where you can preview on the web and on your devices.

    We made one initial thing even easier:

    You just need to provide content for each slider page – a main icon, text, and small round icon for the bottom

    We made this so you didn’t need any extra developer code.

    Ramotion's Paper Onboarding Example

    We had some additional goals that we thought would be super awesome for our customers

    1. Be able to use images that are hosted remotely
    2. Allow changes to the carousel without needing to do an Appstore release.
    3. Target different carousels at different users
    4. Have carousels in different parts of an App (not just the home screen).

    Here is how it looks in the Contextual Dashboard.

     

    On Android, its automatically built in – nice.

    On iOS, to add the open source Paper Onboarding to Contextual and get all the above benefits you just need to add:

    platform :ios, '8.0'
    use_frameworks!
    pod "pointzi"
    pod "paper-onboarding-pointzi"
    end

    So its, super-easy to get started and then have all the dynamic benefits.

    To learn more about the open-source checkout the awesome work from the folks at Ramotion on Github.

    https://github.com/Ramotion/paper-onboarding

    and

    https://github.com/Ramotion/paper-onboarding-android

  • Contextual Native Carousels now available

    The animation below show  how easy it is to now deliver beautiful carousels in Contextual without:

    1. needing to write code, just add our SDK
    2. needing to do an Appstore Release!

    You can also A/B Test different carousels to targeted groups to test which gives the best results.

    In this video you can see it takes seconds to :

    1. craft a 2-screen carousel
    2. select an image from our library or pick your own
    3. change the text
    4. preview it on a real device

    Some other great controls are:

    • Full control over font type, color, background color
    • Beautiful swipe colour transition between screens
    • Buttons can customized for each slide (see down the bottom it changes from “Skip” to “Done”
    • No particular limit on carousel screens. But we recommend no more than 3, otherwise you’ll drive your users crazy!
    • Multiple images per screen.
  • 10 Common App Prompts That Convert

    Mobile App user retention rate is <10%. That is largely attributable to not “Activating” user engagement quickly and at relevant times.

    If users don’t find utility and value from the product quickly, they rarely stick around. Figures for user churn are over 70% within first 3 days.

    To give your users the best chance of extracting utility, there are a few common use cases we see in successful Apps. Its no coincidence these use-cases are recurring – take note!

    In this post we cover 10 common app prompts that really make a difference to retention, activation and growth.

    1. The ‘Get Started’ Tip

    User activation is about getting the user to an “a-ha” moment as quickly as possible.

    So one of the simplest and most obvious things to do is place a tip pointing at the one action to deliver “instant-gratification” returns.

    e.g In a real-estate App it might be the first filtered search. In a social App it’s often sharing your first picture.

    In many applications, this is called “Empty State” – the single-player mode where the App is absolutely empty until the user gets started. 

    common app prompts - get started tip

    Todo-lists, CRMs, Mailboxes all have empty states. In this situation, you will probably design into the application but you may still want to iterate different A/B tests on messaging.

    You design a product, you’ve been staring at it for months and you’ve developed a habit that would make Pavlov’s dogs drool. You click happily and assume that your users will automagically guess how to use it.

    Not so.  The value this simple understated tip is triggering the user’s first action. The tip is never seen again because the user now has started the habit!

    2. Feature/Intro Tour

    There are different names:

    tours, flows, walkthroughs

    But they all mean the same thing. Building on the simple tip, you introduce the user to a set of key features and explain how to initiate those actions.

    In earlier posts we’ve discussed how targeted tips in a tour is superior to using a carousel that users will forget. This little animation shows how you can advance a user during early App experiences.

    common app prompts - guided tour

    3. Targeted Nudge for unused Feature

    Its common for popular apps to have a loyal user base but some of the users are missing key utility available in the application.

    With Contextual, you can target these users, to start using the feature. You can use an attractive prompt. That may lead to the screen in the App or kickoff a walk-through/tour.

    common app prompts - tour

    4. New Feature Announcement

    Here is 2 cool simple examples:

    1. Skype takes a smart approach to user education by telling me I can have more fun now because they support  “sharing photos”, “locations”, “GIFs” tasks. Read more here.
    2. Netflix’s 2-prong approach to prompt users to start using off-line video playing is a great re-inforcing approach. We’ve seen Slack do that too. Learn more…

    SkypeInCallOptions
    LD_1 (2)
    common app prompts - new feature

    5. Launchers

    As we mentioned in the last post, these valuable tip bubble app prompts can help clarify the purpose of a field or action without clogging up the screen.

    The user can simply tap/click on them, help the user understand and then get out of the way.

    6. Invite a friend

    Increase your virality or k-factor with app prompts to get a team mate or friend on board the app as well. Sometimes this sharing might have a referral incentive – we’ve written before why Uber and AirBnB use shared rewards as the most effective conversion. If only the referrer gets the reward, the recipient is suspicious of their motives. Remember that Uber gives new users free credits anyway via advertising or postcard handouts, so giving them a referral credit is easily within their cost-of-acquisition calculations.

    7. App updates and Service Alerts

    Either by push or inApp, content, you may want to tell users something thats happening immediately that may affect them.

    I like this one because its human and fun (who wouldn’t love a sad wrench!) and its a clear CTA. Notice also its a nuclear option, there is no dismiss on the modal so the user performs the CTA or presumably backgrounds the App and won’t be a live user until this step is completed.

    8. Welcome Popup or Carousel

    We’ve talked a lot about carousels before and our mixed feelings about them. If this is how you define “on-boarding” then you are NOT thinking about the full-user journey. BUT a welcome is good for orienting and informing the purpose of your App in terms of the user’s needs.



    9. Upsells, Offers & Rewards

    Converting Free to Paid or Upselling a plan is a key part of the the App economy. Allowing users to progressively unlock new capabilities is an action worth “testing”.

    When you test you are allowing the data to tell you what converts most effectively.

    A/B testing different prompts and messaging with a tool like Contextual can be done before hard-coding  into the application. This “test-and-learn approach is the iteration speed Prodict Managers need to achieve growth.

    10. Action Needed

    Different to the “Empty State” requirements of first-time on-boarding is driving more “sunk cost bias” into the user’s experience of the application. This sounds evil but is usually to reap returns for the users. LinkedIn is famous for driving users to complete their profile, they bread-crumbed ways that a user could enhance their profile and thus sinking more investment into the App and what it would return to the user.

    The red-box (I added for emphasis) shows how LI devotes a large amount of screen real-estate embedded to guilt users to complete this task.