.svg)
.svg)
.svg)
PHPSANDOX
ABOUT PHPSANBOX
A web-based code editor and development environment that allows users to write, run, and share PHP code snippets in real-time. It features a clean and intuitive interface, syntax highlighting, and support for popular PHP libraries and frameworks. With PHPSandbox, users can test and debug their PHP code without the need for a local development environment.
ROLE
PROBLEM
The process of submitting bids for building projects is now more than just a numbers game. Relationship management with suppliers and subcontractors can be challenging.
Some of the problems are listed below.
1. Problems maintaining connections with others
2. It can be difficult to keep tabs on people's replies to bid requests.
3. Disconnect between different sources of context data
4. It's difficult to keep track of vital information about bid activities.
Goal.
The solution was to design a completely new look for the IDE with a user-centred approach. It was to develop a new creative direction and improve the user experience of being able to write and run codes. Creating a scalable component library for consistency and easier further development. A design system was eventually made public for other creatives to build amazing things with. This took a while because of the need to test every single style and component created. You can read more about the design system here.
Uncovering Insights:
Research Deliverables
A heuristic assessment of the current design, user feedback (obtained from the discord community), and competitive analysis were all parts of my project's research process.
I learned from the evaluation (using Jakob's Nielsen method) that users lack proper control over deleting their notebooks, the designs are inconsistent (both internally and externally), not very aesthetically pleasing, and lack proper documentation.
I learned from talking to some of the users that they have trouble using the embed feature.
competitive analysis
SKETCHING
To get started on the project, I began by sketching out some initial ideas. While these sketches didn't include a lot of detail, they helped to kickstart the design process. To further explore different design directions, I also created a moodboard that included various visual elements and design inspirations.
Through an iterative process, my team and I explored several different views and layouts until we landed on the final design. This involved refining the design based on user feedback and testing to ensure that the final product would meet the needs of our users.
Overall, the sketching and moodboarding process helped us to generate ideas and get the creative juices flowing. By iterating on different design directions, we were able to arrive at a final product that was both visually appealing and functional.
Analysing the Aesthetics: A Closer Look at the Visual Design of PHPSandbox
PHPSandbox is a versatile platform that serves multiple purposes, including project development and learning. We wanted to ensure that users could easily get started on the platform without the need to create an account, while still being able to save their projects for future use. However, we discovered that many users were failing to save their work because they were not aware of the need to create an account.
To solve this issue, we implemented a simple but effective solution that benefited both the users and the company. First, we added a clear warning message at the top of the page to alert users that an account was needed to save their work. This helped to reduce confusion and increased the number of registered users and daily active users beyond our expectations.
.svg)
PHPSandbox is a versatile platform that serves multiple purposes, including project development and learning. We wanted to ensure that users could easily get started on the platform without the need to create an account, while still being able to save their projects for future use. However, we discovered that many users were failing to save their work because they were not aware of the need to create an account.
To solve this issue, we implemented a simple but effective solution that benefited both the users and the company. First, we added a clear warning message at the top of the page to alert users that an account was needed to save their work. This helped to reduce confusion and increased the number of registered users and daily active users beyond our expectations.
Notebook creation.
When PHPSandbox first launched, creating a notebook was a straightforward process that involved selecting a supported library and starting a new project from scratch. However, as the platform evolved, we recognised the need to provide more flexibility and options for users to create and manage their notebooks.
To address this need, we added several new methods for users to create notebooks. One of these methods involved providing templates created by PHPSandbox, which allowed users to quickly and easily start a project based on a pre-existing design or function. Another method involved importing projects directly from GitHub repositories, which gave users access to a vast library of open-source projects that they could modify and customise as needed.
In addition to these options, we also made it possible for users to import local projects through the command line interface (CLI) or upload project ZIP files directly to the platform. These features allowed users to quickly and easily transfer their existing projects to PHPSandbox and continue working on them without having to start from scratch.
Finally, we continued to expand our library of supported libraries, giving users even more options and resources to choose from when creating their notebooks. By providing multiple methods for notebook creation and management, we have made it easier than ever for users to get started and stay productive on the PHPSandbox platform.
There’s a lot, actually.
While there are many features on PHPSandbox, I would like to highlight some of the key features that I worked on during my time there.
One of the most important features that I helped develop was the project-sharing feature. This feature allows users to easily share their notebooks with others by providing multiple sharing options, including the ability to invite other users to collaborate on a project or share a project link. This feature makes it easy for developers to work together and collaborate on projects in real-time.
Another feature that I worked on was the embed feature, which allows users to embed their notebooks on other platforms. Over time, we made significant improvements to the embedding experience, including the ability for users to preview how their code would be displayed when embedded and to make modifications to the display view. This made the embed feature more user-friendly and gave users greater control over how their code was presented to others.
.svg)
Of course, there are many other features on PHPSandbox that are worth exploring, and I encourage you to check it out for yourself to learn more about the platform and how it can help you with your PHP development and learning needs.
I also wanted to mention that we've added different types of dark themes to PHPSandbox, which I think is a great aesthetic addition. I'm really excited for when it's rolled out and users can experience it for themselves.
.svg)
.svg)
