Strawberry Creator - Content editor
Company: Strawberry
Project name: Strawberry Creator
Part: Content editor
Role: Product designer
Intro
The Content editor was the main part of Strawberry Creator, a new internal tool for the content team.
The goal was to simplify how to produce and create pages for the Strawberry website with the help of AI.
With just a simple prompt get a full page ready to publish or make smaller changes on a live page editor instead of "backhand" in Contentful. This was a project that took some turns and became something slightly else then it was meant to be from start!
User insights!
From interviews with the content team, I had to analyze a long list of pain points to find what was most important to focus on. For example, when adding blocks only the name appeared, so they had to add it first and then switch to preview mode to check if it was the right one.
Other features they also where struggeling with:
-
No Live view. Users cannot immediately see changes as they edit; a preview must be activated to visualize updates.
-
Not user friendly. Long lists of text for editing make the process feel more like backend work than frontend design with no feeling for the overall design.
-
Duplicates. Images to be added are listed by name only, with no visual reference. Therefore adding again goes faster then finding them.
-
Tone of voice. Content requires varying tones of voice based on hotel brand.
Project workflow
After the interviews, I created a user flow and divided the project into three clear steps.
Upload section
Just simply add text in the prompt (for example tone of voice), add document and images to use and hit the Create button.
The thought was that it would be quick and easy to generate pages to get inspired and have a short start lane
Or when you have created pages go by recent drafts to continue with already started projects.
Generate section
Three suggestions are generated, and more can be created using ready made blocks that Strawberry uses on their website.
For example, if you like different parts from two suggestions, you can easily remove the others and focus only on those two.
All suggestions can be previewed in the different languages used.
Edit section, block editor
By moving or copying blocks up and down, or between different suggestions, you can easily put together the page exactly as you want and edit text and images directly here.
To make the project possible within the short time we had, deeper editing, publishing, and translation checks were done after uploading to Contentful.
The turn and solution
The content team was excited about this version since it boosted creativity and made building new pages faster. But stakeholders chose to focus on improving Contentful instead of building something outside it, which was understandable.
To keep the project alive, I reframed the MVP around inspiration and helping users get started quickly. I cut the editing part and focused on generating page previews from prompts, giving several design options that could be built further in Contentful.
It didn’t fully solve all their Contentful challenges, but it became a useful feature when inspiration was low or when quick copy and visuals were needed for both desktop and app.
This is just a shorter overview, the full project can be found in my Figma file. And I am happy to share more details in an interview.
Screens from the page preview.