Hi, I am Charan

Experienced UX Designer with software development and business expertise
Home

19tools

Tools for modern life

Project Overview

The 19tools project hosts a diverse array of tools designed to simplify people's lives. However, the project faced several challenges in terms of user experience:
  1. The number of tools on the website is not fixed, posing a challenge in managing their presentation.
  2. Users may only be interested in specific tools, requiring a user-friendly way to navigate the options.
  3. Users are not regular visitors, necessitating intuitive design to aid quick understanding.
  4. New tools are continuously added, requiring a flexible design approach.
  5. The website is in its early stages and may undergo significant changes in the future.

The Design Process

In light of these challenges, I established the following UX design goals:
  • Ensure consistency in the process of learning about and accessing each tool, despite variations in their interfaces.
  • Implement a neutral visual design to accommodate diverse user preferences.
  • Develop an evolving but immediately functional design system.
  • Implement the design using Tailwind CSS framework.
Early breadboard design of the home page.
Early breadboard design of the home page.
Early breadboard design of the Proof of Relationship tool.
Early breadboard design of the Proof of Relationship tool.

To expedite the creation of the design system, I took the following steps:

  • The webpage was divided into two sections: a descriptive area providing information about each tool, and a functional section housing the tool's user interface. This division facilitated user navigation, with clear distinctions between the sections emphasized by differing background colors. This layout was introduced on the homepage to familiarize users with the navigation approach.
  • The design system was initially kept minimal, with only five text styles and four shades of grey.
  • Consistent styles were maintained between the design system and Tailwind CSS for seamless integration.
  • Inspiration for the design and iconography was drawn from IBM's Carbon Design System.
  • Figma's Components, Variants, Properties, and Auto Layout features were extensively utilized to ensure scalability of the designs.
  • Illustrations in the system were sourced from the Humaaans project to enhance visual appeal and user engagement.
Low fidelity wireframe of the Proof of Relationship tool.
Low fidelity wireframe of the Proof of Relationship tool

Low fidelity wireframe of the Proof of Relationship tool.
Mockup of the home page

Low fidelity wireframe of the Proof of Relationship tool.
Mockup of the Proof of Contact tool

Conclusion

While simple on the surface, the 19tools project presented several UX challenges. By establishing clear design goals and leveraging Figma's features, I was able to create a design system that accommodated the project's evolving nature. The resulting design system is flexible, scalable, and user-friendly, ensuring that the project can continue to grow and adapt to users' needs.