At ngrok, I was in charge of designing a variety of our dashboard’s features, documentation, visual designs, and more. I collaborated closely with the CEO to drive product vision and make key decisions, ensuring our designs aligned with company objectives and user needs.
Within the ngrok dashboard, I spearheaded a range of projects, from large-scale initiatives to smaller tasks, each contributing to the platform's functionality and user experience.
The Request Viewer serves as a critical tool within the Ngrok platform, offering users the ability to inspect and analyze network requests with ease. As a vital component of the dashboard, the Request Viewer empowers users to gain deep insights into the details of each request, facilitating effective debugging, troubleshooting, and monitoring of their network activity.
Prior to the integration of the enhanced Request Viewer, users relied on a substitute solution that presented various limitations. This legacy system provided basic functionality but lacked the robust features and user-friendly interface necessary for seamless request inspection and analysis.
The Request Viewer project aimed to enhance the ngrok platform by introducing a comprehensive tool for analyzing network requests. Working closely with my product manager, I gained valuable insights into industry standards, competitor offerings, and user requirements, laying the foundation for designing our version of the tool tailored to meet ngrok users' needs.
The previous request viewer solution was barebones and presented several limitations, hindering users' ability to effectively inspect and analyze network requests, and often led to users needing to use third party tools alongside ngrok. Leveraging my PM’s extensive knowledge in this space and conducting thorough competitor analysis, we identified key pain points and areas for improvement.
This included streamlining the user interface, eliminating unnecessary features, and optimizing usability for seamless request inspection.
I spearheaded the design and implementation of the enhanced Request Viewer, ensuring alignment with ngrok's existing dashboard framework and UX standards. This involved refining the information architecture, layout, and visual elements to integrate the Request Viewer into our dashboard. By collaborating with engineers and my project manager, I facilitated the inclusion of essential features while maintaining a cohesive UI.
The dashboard can be accessed by creating a developer account at ngrok.com
As a non-programmer, I was keen on making things accessible. As I began to learn the power of ngrok’s features, I saw potential ways where we could improve usability of our product.
OAuth with ngrok allows users to securely authenticate and authorize access to their applications and services through the ngrok platform. By configuring OAuth integration, users can streamline the authentication process for their applications while ensuring security and compliance with OAuth standards.
Using console command lines, users can manually configure OAuth integration by navigating through various settings and options. This method offers granular control over the OAuth configuration but may require more technical expertise and time to set up.
In contrast, the ngrok dashboard provides a user-friendly interface for managing OAuth integration. Users can easily configure OAuth settings, manage authentication providers, and monitor OAuth activity, all within a centralized dashboard environment.
And by the way, with the same method as adding OAuth through the ngrok dashboard, users can seamlessly integrate additional features such as SAML, webhook verification, IP restrictions, and more, simplifying the process of enhancing their application's security and functionality. I worked on some of these features as well!
ngrok’s expressive icons are a collection of carefully crafted visual elements designed to enhance user experience and communication for our platform. These icons serve as intuitive symbols to represent various features and concepts, ensuring clarity and ease of use.
Our expressive icons adhere to strict design principles to maintain consistency and coherence. Each icon follows uniform guidelines, including consistent line thickness and color palette usage. The 800 color palette is utilized for outlines, while the optional 100 and 200 color palettes are employed for the body and details respectively. This uniformity ensures visual harmony across the entire collection.
One of the key considerations in these designs is striking the right balance between detail and simplicity. These icons are meticulously crafted to capture the essence of each feature or topic they represent, providing enough detail for clarity without overwhelming complexity. By maintaining this balance, the icons effectively convey information at a glance while remaining visually appealing.
The expressive icons within our platform embody a commitment to design and effective communication. Explore the full collection on ngrok.com or various ngrok press kits.
In my early days at ngrok, I shared my desire to simplify their product messaging. Because ngrok was used primarily from a command-line interface, it was quite an intimidating space for non-programmers to get a grasp on the product’s core features.
In my early days at ngrok, I shared my desire to simplify our product messaging, particularly for non-programmers. With ngrok primarily being utilized through a command-line interface, I wanted to ensure that those unfamiliar with programming concepts could understand what we were about. To address this, I advocated for the creation of infographs using the expressive icons to convey our core features in a visually engaging manner.
We believed this to be worthwhile for three key reasons.
Firstly, to let existing users know that they can do much more, much easier, via our dashboard.
Secondly, to increase adoption among more casual users by demonstrating the simplicity of our key features. By showcasing the ease of use through infographs, we aimed to make ngrok accessible to a wider audience.
And lastly, to ensure potential customers, particularly decision-makers in enterprise settings, understood the value proposition of ngrok. While software developers may grasp the technical aspects, conveying this value to non-technical stakeholders was essential for securing buy-in and support.
The integration of expressive icons and infographs serves to enhance user understanding and promote adoption of ngrok. By simplifying complex concepts and articulating our value proposition, these visual assets play a pivotal role in effectively communicating with both technical and non-technical audiences.
I was also in charge of ngrok’s documentation site. My main focus was to provide comprehensive layout and navigation for our ever-expanding product documentation.
Documentation plays a pivotal role in the ngrok ecosystem, serving as a platform to promote new features, offer walkthroughs, present use cases, and more. Beyond instructions, we enhanced quality of technical reference materials by incorporating real-world examples.
Documentation can be viewed at ngrok.com/docs
With no dedicated marketing team during ngrok's early days, I took the initiative to work on many of our marketing endeavors, primarily focusing on our online presence. This involved the creation of various splash pages and landing pages to effectively communicate our brand message and showcase our offerings online.
With no dedicated marketing team during ngrok's early days, I took the initiative to work on many of our marketing endeavors, primarily focusing on our online presence. This involved the creation of various splash pages and landing pages to effectively communicate our brand message and showcase our offerings online.
One of the defining moments of my involvement in ngrok's marketing journey was the announcement of our $50 million USD Series A funding on the Nasdaq Tower in New York City. As part of this effort, I was tasked with creating a 30-second animated spot to advertise our achievement to the world.
Drawing upon our slogan and the significance of the $50 million announcement, I crafted a compelling message that resonated with our audience and conveyed the essence of ngrok's mission. The Series A funding announcement stands as a testament to our collective efforts at ngrok, and serves as a milestone in our journey towards greater recognition and impact!
Unfortunately, only our East Coast team members got to attend the event so I did not get to see it in person... 😒