Cloud 9 IDE
Cloud9 IDE is an online development environment for Javascript and Node.js applications as well as HTML, CSS, PHP, Java, Ruby and 23 other languages. As 1 of 2 designers in this start-up we created the worlds first online development environment. It allows developers to write, run, and debug their code together in real time with this powerful and flexible tool. Developers can collaborate on their projects publicly, or keep them private. Company exited with a sale to Amazon where it is still part of their AWS developer tool set.
Background
-
Developing with a local environment on your computer can cause deployment problems, and waste time debugging their environment.
-
Remote teams cause a lot of overhead
-
Onboarding new developers is a deciding factor for many cloud services.
The challenge
-
To remove maintenance factors from development workspaces
-
To offer real-time collaboration, editing and team management
-
To build an extension-store that is full-proof and eliminates limitations
-
To make an attractive product that developers will pay money for
-
To develop into an Enterprise product
Project details
-
Role: Staff UX/UI Designer
-
Team: 33 (2 in design)
-
Budget: 5.5M (Round A Funding)
-
Timeframe:
-
Alpha: 4 Months
-
Beta: 6 months
-
1st Release: 12 Months
-
Feature Release: (Every 2 weeks)
-
00. Cloud9 IDE principles
Cloud 9 IDE's company principles are centered around three key elements: user centricity, user control, and always online. By focusing on designing with users at the forefront, empowering them with control over their interactions, and ensuring products and services are always accessible, Cloud 9 IDE strived to deliver the best possible user experience. These principles form the foundation for creating innovative and reliable cloud-based development tools that meet the needs and preferences of users, while also fostering a culture of trust, loyalty, and customer satisfaction.
User Centricity
Designing with user centricity at the forefront ensures that our products and services meet the needs and preferences of our target audience, resulting in a better user experience and increased customer satisfaction.
User Control
Empowering users with control over their interactions and coding experiences with our products and services is essential to building trust, loyalty, and satisfaction with our brand and product.
Always Online
Prioritizing an always-online approach to design ensures that our products and services remain accessible and functional to users anytime, anywhere, while also providing real-time collaboration.
01. Discover
During the discovery phase of the project, we conducted a series of activities aimed at gaining a deep understanding of the project's scope and requirements. We began by mapping the existing architecture and ecosystem to identify any potential gaps or areas for improvement. We then conducted user interviews to gather insights into user needs, preferences, and pain points, which helped inform the design of the product. This comprehensive approach ensured that the resulting solution was well-informed, user-centered, and aligned with the project's goals and objectives.
Map Architecture
Map the
Eco-System
User interviews for Use cases
Cloud9 IDE
Promo Video
The video showcases the unique value of Cloud9 IDE by highlighting its innovative features and benefits. The video highlights the ease of collaboration, the flexibility of working remotely, and the seamless integration with popular tools and technologies. By emphasizing how Cloud9 IDE enables developers to work smarter, faster, and more efficiently, the video effectively communicates the value of the product to potential users and reinforces the company's commitment to delivering cutting-edge cloud-based development tools.
02. Define
During the define stage of the Cloud9 IDE project, we utilized wireframing, personas, and journey maps to refine the design of the product. We created personas to represent different user types and their unique needs and goals, which informed the design of the product. Journey maps helped us identify key touchpoints and interactions within the user experience, which helped us optimize the product's flow and usability. Finally, we created wireframes to visually represent the product's structure and layout, allowing us to refine the design and ensure that it was intuitive, user-friendly, and met the needs of the target audience.
Wireframes | Low Fidelity
User Persona
To create a persona for Cloud9 IDE, we identified Alex Moren, a remote developer who values efficient collaboration with his colleagues. We researched his needs, goals, and pain points, and created a detailed profile that included his demographics, job title, work environment, and communication preferences. Alex's persona informed the design of the product by highlighting the importance of seamless collaboration and communication tools. By taking Alex's needs and preferences into consideration, we ensured that the resulting product was tailored to the needs of remote developers like him.
User Experience Journey Map
Alex Morgan's journey map for using Cloud9 IDE starts with signing up for the product and setting up his cloud-based development environment. As a remote developer, he needs a solution that allows him to work efficiently and collaboratively with his colleagues, so the journey map also includes the steps of debugging his code and collaborating in real-time with his team members. Finally, the journey map includes the step of deploying his code, which highlights the importance of ensuring that the product is easy to use and integrates with existing deployment tools. By mapping out the steps in Alex's journey, we were able to identify pain points and areas for improvement, which helped us optimize the product's flow and ensure a seamless user experience.
03. Develop
I brought the design concepts to life through the creation of mid-fidelity wireframes, visual designs, and video tutorials with real users. In this section, you'll get a glimpse of the design process as I refined and iterated on the product, incorporating user feedback and testing to ensure the best possible user experience. From wireframes to final designs, I worked tirelessly to ensure that the resulting product met the needs and preferences of our target audience. So come along and discover how we transformed our design concepts into a functional, intuitive, and visually engaging product.
04. Deliver
Cloud9 IDE Video Walkthrough
Cloud9 IDE's Walkthrough, is a comprehensive guide that showcases all the features and functionalities of the software. The Walkthrough takes you step-by-step through the process of setting up and connecting your coding profiles, creating and managing workspaces, collaborating with team members, and deploying your code to the cloud. The Walkthrough also provides tips and best practices for maximizing your productivity and efficiency while using Cloud9 IDE. Whether you're new to coding or a seasoned developer, the Walkthrough is the perfect tutorial for getting started with Cloud9 IDE.
04. Deliver | Details
Clear communication, well-defined design guidelines, and proper tools and processes are necessary to ensure that the visual designs are accurately translated into code. Attention to details matter when experience is the differentiator.
Features
Features | Design details
Search
Highlighting and syntax hints let you know exactly when you’re on the right path, or if you’re missing an operator. The results are then streamed back to your browser.
Go to file
Insanely fast file access means you’re always milliseconds away from opening the right file. See what you are looking for and its location.
Adaptive Themes
Now Cloud9 updates its skin to match your editor theme. Try hovering over themes to see instant previews before choosing the perfect one.
Multiple cursors
Multiple cursors: You’ve never seen multiple cursors like this. Keyboard shortcuts connect you to a ton of useful functions: search for some text and then add cursors to results; add a cursor to the rows above and below the current line; or, simply type or paste onto multiple cursors.
Focus Mode
Focus: Free your editor to its full potential. Every part of the Cloud9 UI can be collapsed or hidden entirely, so you get the maximum space to focus on your code. And for the truly exceptional among us, there’s zen mode, where the editor floats above the IDE to fill 100% of the browser.
Drag & drop
The project tree scrolls, highlights and expands folders automatically for the most natural drag-n-drop experience. You can even drop files onto your FTP server. Making your coding interface intuitive and adaptable.
05. Impact
I am proud to report that since the launch of Cloud9 IDE, we experienced significant increases in revenues, freemium subscriptions, and paid subscriptions. Our unwavering focus on providing an exceptional user experience has resulted in a loyal and growing user base, which has in turn driven our success.
Overall increased revenues
-
Inside 7 months the revenue was nearly double
-
The growth trend is steady
-
We were well positioned for sale or for a round B in funding.
Increase subscribers (freemium)
-
Gaining momentum in the number of overall subscribers
-
600,000 users of the platform
-
We sourced inside the comunity to staff our products
Massive growth in paid subscribers
-
Paid subscribers were on an exponential increase
-
The more people used the platform the more subscribers we could convert
-
We had 140,000 paid subscribers