Editscape: Content Creation Tool

The Problem

At Jobescape, the content team was building a new Academy, but they had a big problem. Our product's main content management system was clunky. It wasn’t built for their specific needs, and it took too long to create new lessons. We were missing key features like a live preview and a proper WYSIWYG editor. The engineering team was focused on other priorities, and a full CMS build was not an option.

As a designer with a passion for UI engineering, I saw this as an opportunity. I wanted to apply my skills in React and front-end development, so I decided to take on this project to learn and build something valuable.

The Solution

I created a prototype of an internal tool called Editscape. It was a focused solution built on Next.js, using Shadcn for the UI components, and the MDXEditor library for a robust editing experience. This prototype wasn't meant to be a full-scale CMS; it was designed to solve the content team's immediate needs and prove the value of a dedicated tool.

My approach was to work directly with the content team. We focused on their most painful workflow: writing and formatting articles for the Academy. Later on this prototype became a backbone for the funnel constructor.

Key Features & Design

The core of Editscape was a powerful and simple editing interface. It featured a dual-pane layout where the editor was the sole component.

On the left, a WYSIWYG editor gave writers a clean, markdown-based interface. On the right, a live preview showed exactly how their content would look on the production website. This feature alone eliminated the need for constant back-and-forth between a separate editor and the production site, saving huge amounts of time.

In the scope of this project lists, images, tables, paragraphs and headings were stylized.

When a piece of content was complete, the final step was a streamlined export process. The content team could choose to export the final file.

Results & Impact

Editscape was an immediate success. What started as a small prototype quickly became the content team's go-to tool. They reported that they were able to create and publish new lessons for the Academy two times faster than before. This not only accelerated our content strategy but also made it easy to onboard new contract writers, who could be productive from day one with the intuitive interface.

Lessons Learned

This project taught me a lot about the power of building small, focused tools to solve big problems. Instead of waiting for a resource-intensive project, a simple prototype proved to be an effective way to unblock a core team and show a significant return on investment. The project was also a crucial learning experience for me as a developer, solidifying my skills in React and taking a product from concept to launch on my own.