PitchLabs Intern

PitchLabs Intern

Remote

Overview

In this internship at Pitch Labs, I redesigned and implemented critical web pages, including FAQ, Legal Info, and Podcast sections. The initiative aimed to enhance user experience and accessibility on both desktop and mobile platforms, streamline content updates, and maintain a consistent visual style across the website. A significant component of this project was the development of a Tailwind CSS-based UI design system, utilizing atomic design principles to ensure design consistency and development efficiency.

Tools

  • Figma

  • Microsoft Clarity

  • Google Analytics

  • Storybook.js

Timeline

Start: Apr 2024

End: Present

Problem Description

Prior to the project, Pitch Labs' website faced challenges with inconsistent user interfaces across different pages, which hindered user engagement and made site maintenance cumbersome. The lack of a unified design system led to inefficiencies in developing and deploying new website features, particularly affecting the adaptability of designs between desktop and mobile platforms. Additionally, there are some missing web pages that cause a lack of integrated functionalities that could meet specific operational needs across departments, resulting in a fragmented user experience and operational inefficiencies.

My Role

As a UI/UX Designer, I independently designed the web pages and collaborated with various departments to tailor functionalities that met specific operational needs. I conducted thorough audits of existing UI elements to ensure uniformity across all pages and developed the design system that empowered the development team to apply consistent, efficient designs throughout the site.


User Interaction Analysis

  • Desktop User Behavior:

    Users frequently interacted with the contact information section, highlighting a strong interest in reaching out.

  • Key Takeaways:

    Ensure the contact information section is prominently accessible and functional to meet user expectations.
    The current email addresses on the web page are only displayed as text and do not have a clickable function, which causes dead clicks and confusion.

Low Fidelity Prototype

In the initial phase of the project, I developed low-fidelity prototypes for the pages. These prototypes outlined the basic layout and interaction flows, allowing stakeholders to visualize and provide feedback on the structural foundation of these key web pages. By focusing on wireframes and simple interaction models, I facilitated early discussions on content placement, navigational logic, and essential features, ensuring that each page met both legal standards and user expectations for accessibility and ease of use. This early prototyping stage was instrumental in aligning the project's vision with practical execution strategies before moving on to high-fidelity designs.

Hi-Fi Prototype Showcase:

Building on the insights gained from the low-fidelity prototype, the high-fidelity prototype was developed to refine the visual and interactive elements of these pages. This advanced prototype included detailed designs, realistic user interfaces, and interactive elements that closely mimicked the final product. It provided stakeholders with a clear view of the aesthetic and functional aspects of the website, including typography, color schemes, and navigation flow. Including high-fidelity elements allowed for more accurate usability testing and feedback, ensuring that the transition from the conceptual stage to the final implementation was smooth and aligned with user expectations.

Next Steps:

Following the successful implementation of the high-fidelity prototype, the next steps involve a comprehensive audit of the user interface elements across all web pages. This audit will ensure that there is a uniform design style throughout the website, maintaining a cohesive user experience. Additionally, the previously developed UI design system based on atomic design principles will be fully integrated into our development processes. This system will enable the development team to efficiently apply consistent designs across the website, enhancing the scalability and maintainability of the web infrastructure.