top of page

CloudClip - Hackathon Project 

Slide 16_9 - 1.png

Role

UX Designer  

Tools

Figma

Timeline 

July 17, 2023 - July 20, 2023

Overview 

During my internship at Principal Financial Group, I had the privilege of participating in the company's annual Cloudathon. This 3-day hackathon provided a unique opportunity to collaborate with fellow talented interns and explore innovative solutions within the cloud computing space.

 

My team and I decided to focus on enhancing developer productivity and collaboration by creating a Visual Studio Code extension named "Cloud Clip." This extension aims to streamline the process of sharing code snippets, files, and other resources among developers, fostering a more efficient and collaborative development environment.

Day 1: Understanding the Problem and Research

Project Goals

  • Simplify Code Sharing: Allow developers to easily share code snippets directly from their VS Code editor, eliminating the need for external tools or platforms.

  • Enhance Collaboration: Facilitate seamless collaboration between team members by providing a centralized repository for shared resources.

  • Improve Productivity: Save developers time by reducing the overhead associated with sharing and managing code snippets.

User Research

  • User Interviews: Conducted informal interviews with fellow interns to gather insights into their code-sharing habits and pain points.

  • Observed developers working in a collaborative environment to identify challenges in real-time.​​​

Day 2: Ideation and Design Exploration

Brainstorming

  • Generated ideas through a collaborative brainstorming session with the team, focusing on key features like: 

    • Easy code snippet selection and sharing

    • Integration with popular cloud storage platforms

    • Version control for shared code

  • Created a mind map to visualize the relationships between different features.​

Sketching and
Wireframing

  • Created low-fidelity wireframes to quickly iterate on the user interface layout.

  • Focused on the core functionality of code snippet selection, sharing, and viewing​

CloudClip_Sketch_Wireframes

Day 3: Prototyping and Testing

Prototyping

  • Used Figma to create a high-fidelity prototype that accurately represented the final design.

  • Incorporated interactive elements like dropdown menus, buttons, and modal windows.​​

Usability Testing 

  • Conducted informal usability tests with fellow interns to gather feedback on the prototype's usability and user experience.

  • Identified areas for improvement, such as 

    • Optimizing the code snippet selection process 

    • Enhancing the visual clarity of the shared code.

Final Design and Lessons Learned

Interactive Prototype 

Key Learnings

01

 The Importance of User-Centered Design:

The importance of early and frequent user testing in identifying and addressing usability issues.

03

The Challenge of Balancing Simple Feature 

The challenges of designing for a specific technical audience and the need to balance functionality with user experience.

02

Item The Value of Iterative Design:

The value of collaborative design and the power of diverse perspectives.

04

The Importance of Effective Collaboration & Communication

Regular team meetings, shared design documents, and effective feedback mechanisms were all factors that significantly improved the design process and product quality.

bottom of page