Overview of the project

In this case study, we will analyze the effectiveness of Handtyped in maintaining a personal touch in digital communication by examining its solution of creating a personalized digital keyboard from the user’s handwriting. We will evaluate the results in terms of user feedback, usage data, and other measurable outcomes to gain insights into the impact of Handtyped on enhancing communication.

  • Industry

    Utility

  • Platform

    iOS and Android

  • Location

    USA

  • Services

    Design Strategy
    UX Design
    UI Design

Challenges while designing Handtyped

  • same-boring-fonts-icon

    Same boring fonts

    There were many apps were which provided same default handwritten fonts to their users.

  • personalized-font-icon

    Hard to create personalized font

    Other apps used finger tracing to create fonts, resulting in dissimilarities between the user’s handwriting and the final product.

To overcome these challenges, Handtyped wanted to design and develop a mobile app, which scans their handwriting and create fonts out of it.
Our Approach

Insights from the collaborative discovery sessions

We developed a user flow aligned with Handtyped’s vision for the app, including brand guidelines and an overview of the product. Key insights included clear instructions for creating personalized fonts using handwriting scanning technology and consistency with the brand’s color palette.

  • We developed a user flow that aligned with the client's vision and goals for the Handtyped app, based on the clear brief they provided.
  • One of the key features of the Handtyped app is its ability to create customized digital fonts based on a user's handwriting, which is achieved through the app's handwriting scanning technology.
  • We incorporated the brand's color palette, as outlined in their guidelines, into the app's design to ensure consistency and enhance the overall user experience.
navigation-system-image-handtyped

Structuring user journey through wireframing

We created high fidelity wireframes to visualize its structure of the app. This enabled us to clearly define the application’s features and functionalities.

handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot
handtyped-wireframe-screenshot

Setting the visual tone

In order to establish the visual direction for the application, we designed several versions of the dashboard and collaboratively worked with the client to select the most fitting option. Throughout the design process,

  • Image of how to set up a page on a mobile application using handwritten
  • Image of different types of fonts showing in mobile application of handtyped
  • Image of scanner taking picture in mobile application of handtyped
  • Image of welcome page on mobile application of handtyped

we maintained open communication with the client and made revisions to our designs based on their feedback and requirements.

  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • handtyped_visual_write_font
  • Key screens

    We effectively addressed the challenges of Handtyped by incorporating the following key screens

    • interactive-onboarding-GIF

      Interactive onboarding

      A onboarding which helps users to understand the application’s flow and functionality.

    • Image of page how to set up page on mobile app of handtyped

      How to setup

      There are few screens after the onboarding which guides users how to create their fonts.

    • Image of a mobile app page where different types of font are shown.

      Easy to mange fonts

      Fonts can be easily be managed by the application’s dashboard.

    UI kit

    In order to establish the visual direction for the application, we designed several versions of the dashboard and collaboratively worked with the client to select the most fitting option. Throughout the design process, we maintained open communication with the client and made revisions to our designs based on their feedback and requirements.

    • Typography
      handtyped_ui_kit_fonts
      handtyped_ui_kit_mobile_fonts
    • Colors
      handtyped_ui_kit_color
      Image of page where color design guidelines are written.
    • Components
      handtyped_components
      handtyped_components_mobile

    What we delivered

    After a series of revisions and virtual meetings with the client, we confidently delivered the final designs. The app received an overwhelmingly positive response from users upon launch, resulting in hundreds of downloads across the globe on both the Google Play Store and Apple App Store.

    • 125+ hrs

      Focused design work

    • 15+ hrs

      Discovery sessions and feedback meetings

    • 40+

      Screens designed

    Have a healthtech project or idea in mind?

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