The illustration of the mobile application of vidstep
vidstep_banner_desktop_gif_image
Image of the home page of the vidstep website

Overview of the project

Vidstep is a platform that allows you to create step-by-step instructional videos, and build product demos for Potential customers to standardise the experience for your business. The platform also provides valuable insights so you can see how your video is performing as soon as it’s published.

Platform stats before the redesign phase:

  • 35K+ Users
  • 4500+ Business Accounts
  • 100+ Positive Reviews
  • Industry

    Edutech

  • Platform

    Web app

  • Location

    Australia

  • Services

    Design Strategy
    UX Design
    UI Design

Challenges we identified

  • vidstep-challenge-icon

    Product features communicated poorly through public website

    Vidstep’s public website is inadequate in conveying the product’s features to potential customers effectively. This can lead to confusion, frustration, and impact the no. of onboarding of the users for free trial.

  • vidstep-challenge-icon

    Higher learning curve to understand the system

    Challenging for users to understand and effectively use the Vidstep tool due to its complexity which can impact their overall experience and perception of the system.

  • vidstep-challenge-icon

    Difficult to find relevant information while viewing the Vidstep video

    Users have difficulty locating the information that is relevant to their needs or interests when using Vidstep. This can lead to frustration and dissatisfaction, and may ultimately result in a decrease in user engagement and retention.

It is crucial to empathise with the users in order to develop a product that addresses their issues and offers practical solutions.
Our Approach

Insights from the collaborative discovery sessions

During the interaction with the client, we ask questions, listen to their ideas, and clarify any uncertainties. Once we have a solid understanding of the client’s requirements, Taking into account the platform’s nature and the needs of different user types, we then analyse their existing platform and website to identify areas that can be improved.

  • Due to its inability to clearly communicate the product's functionalities, the Vidstep website experienced a low adoption rate among users.
  • The design needed to be intuitive & straightforward, allowing users to quickly grasp how to use the platform and create videos effortlessly.
  • Creating step-by-step videos can be challenging, particularly for users who come from a non-technical background.
Redesign of public Website

Organise the information and navigation pattern of the website in a structured and more visually appealing manner

We organised the navigation and information with different user types in mind, making it easy for them to locate relevant information. This helps users understand how Vidstep can add value and take advantage of the tool.

Navigation pattern improvement

We created the website navigation in such a manner where it guides different users groups through the content and features of Vidstep which are more relevant to them and that helps in user retention.

Custom graphics that properly conveys the message

Effective graphics are an essential component of visual communication and can be used to enhance the understanding of complex information or data by presenting it in a clear, concise, and visually appealing manner.

  • Get the Consolidates Videos Accessible to Your Teams
    vidstep-case-study-consolidate-video
  • Direct
    Social Media Sharing
    vidstep-case-study-social-media-sharing
  • Access Your Vidstep Videos From
    Anywhere
    vidstep-case-study-access-video
  • Sales And Marketing Are Always
    Top Of Mind
    vidstep-case-study-sales-marketing
  • Customer enablement breeds loyalty
    and engagement
    vidstep-case-study-customer-enablement

Redesign of the website pages

Improving the user interface and user experience of a website to increase engagement, user satisfaction, and ultimately achieve business goals

Scrolling Image
  • Pricing page
    Image of pricing page on the website of vidstep
  • Blog page
    Image of the blog page on the website of VidStep
For Webapp

Structuring user journey through wireframing

Once we had a clear understanding of the client’s requirements, we began working on wireframes. Wireframes are essentially simplified layouts that help to illustrate the structure and flow of a design. During this stage of the project, we involved the client in every stage of the design process to ensure that their needs and preferences were being met. We also took the time to explain the rationale behind each design decision.

  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • vidstep-case-study-wireframe
  • Setting the visual tone

    In the visual design stage, we explore various design options and experiment with different layouts, colours, fonts, and other visual elements. Throughout the visual design stage, we regularly took feedback from stakeholders. The feedback helped us refine and deliver final visuals that meet clients’ requirements.

    Guided Vidstep creation process

    Guiding users through the Vidstep creation process in a manner that prevents them from feeling disoriented at any point.

    Viewers can easily find the relevant information related to and Vidstep

    While viewing the Vidstep user easily find the information or the resources regarding the step.

    vidstep-case-study-vidstep-relevent-information

    Light & Dark mode options for viewers

    By providing both dark and light modes in the system, users can opt for their preferred display mode and enhance their engagement with the system.

    • light-icon
    • dark-icon
    vidstep-case-study-vidstep-light-image
    Image of a video playing on the mobile application of VidStep - dark

    UI kit

    To ensure a uniform visual design and user experience throughout the platform, we developed a UI Kit. Having a UI Kit in place simplifies the process of expanding the platform with new features and functionalities, while preserving the existing design language.

    • Typography
      Image of the page where Typography design guidelines are written.
      vidstep-case-study-typography-mobile
    • Colors
      Image of page where color design guidelines are written.
      vidstep-case-study-colors-mobile
    • Components
      vidstep-case-study-components
      vidstep-case-study-components-mobile
    • “UXTeam provided exceptional design work that exceeded my expectations. They were professional, responsive, and highly creative in translating my vision into a visually stunning and functional design. I highly recommend their top-quality services.”

      vidstep-case-study-travis-reading
      Travis Reading
      CEO, Vidstep

    Vidstep

    The web app has received overwhelmingly positive ratings on both AppSumo and Google, along with stellar reviews.

    vidstep-review-info-image
    • vidstep-case-study-5-star-rating

      I was planning to use vidstep just as a screen sharing tool for clients but after just a few minutes I was blown away by just how easy it is to get a video loaded, chapters built, resources added and embedded in my website. I am now using team training and client facing instruction. All of this without a single visit to the knowledge base or live chat.

      sumoladyZ
    • vidstep-case-study-apsumo-rating

      Vidstep is fast and awesome.
      You can record your screen directly with vidstep.

      iloweb
    • vidstep-case-study-apsumo-rating

      Vidstep is excellent to create step-by-step videos to advertise how a physical or digital product works to sell.

      José F. Hernández
    • vidstep-case-study-5-star-rating

      VidStep is AMAZING! Finally an easy way to create training videos! I love being able to create one video with screen recording, do my editing, then upload it to VidStep and just break it into sections with simple markers. This is a game changer for pre-recorded videos! I have already recommended it to three of my friends!

      MatKoenig
    • vidstep-case-study-5-star-rating

      You’re going to regret it if you miss this one! It’s absolutely perfect for those who do a lot of tutorials or explainer type of videos. I’m sure I’m going to get great use out of this one and the price is an absolute no brainer so grab it while you can!

      Sumoling74
    • vidstep-case-study-apsumo-rating

      So simple to use and so powerful ! I built my first test vidstep in about 5 minutes, amazing. The app is really simple to use and implict, it’s perfect ‘and the bug asset is also that you can take a video of your screen from the app, wow !

      ChristopheHK

    Have a SaaS project or idea in mind?

    Let’s connect and understand how we can collaborate to take it to the next level!