About the Project

I was hired as part of the core team of Scroll Viewport in Stuttgart Germany as a product designer. The app is part of the Atlassian Marketplace as an add-on to Confluence, a product to collaborate on documents inside of your company. It allows you to generate a Help Center websites from your documentation. It consists of two parts - the App UI and the Theme or the Help Center website itself.

As a product designer, my first task was conducting a UX audit of the entire platform, including the theme editor and the app where users manage their content and settings. From day one, I knew there was a big opportunity to improve the user experience and. I quickly realized that the customization process was confusing. Users struggled with adding multiple themes and understanding the layout types and our support was always flooded by those questions.

Finding quick wins to get a green light of the team and users

Starting small, I proposed creating more visual layout options to simplify the user experience. Users were often puzzled by our layout types (seen from multiple customer requests in support), so I introduced a more visual approach to layout selection. By adding icons and a radio button interface, users could easily preview and select their desired layout. This seemingly small change made a big difference, helping users onboard more smoothly and understand the customization process better. From that moment, we didn't have any more support tickets regarding the layouts.

A Full Redesign – One Step at a Time

Motivated by the initial success, I embarked on a full redesign of the theme editor. The existing design was cluttered, with inconsistent paddings and misplaced icons, making it hard for users to navigate. Instead of an overwhelming overhaul, I broke the redesign into manageable chunks. I added descriptions, tips, and adjusted UI elements incrementally. This approach allowed us to implement changes over the next 6 months, making the transition seamless for our users.

Listening to User Feedback

A recurring piece of feedback was the lack of a full view option. Users disliked having to navigate with the sidebar always open. To address this, I added a full view option by allowing users to close the sidebar, which significantly improved their experience.

Keeping Users Informed

Communication is key, and I wanted our users to feel connected to the ongoing improvements. By incorporating a 'new' label for updates, we ensured users were always aware of the latest features and enhancements.

Introducing the Styles Section

Customization was a major area for improvement. Inspired by platforms like Wix and WordPress, I introduced a styles section in the theme editor. This was also driven by a great initiative by the frontend developer to use tokens instead of styles we had in the current version. Users could now easily change colors and typography, tailoring their help centers to match their brand identity. This new section included options for headline and body fonts, branding colors, and even element roundness and shadows.

Saving and Applying Styles

One of the standout features was the ability to save and apply styles across different sites. This was particularly beneficial for users managing multiple pages or content sources, ensuring a consistent look and feel. Before, they had to do everything manually, having two windows open and matching styles that took hours.

Editing by Content Source

One of the biggest user needs we had down in our roadmap was ability to change each topic differently by adding at least a different banner for each section. I had to be very strategical about the change and that's what I do best! Simple solutions seem very obvious but it's a result of a lot of design thinking and research.

My solution was to create a dropdown for editing by content source, complete with smooth animations and the key here was in using animations as the interface indicators of change. This allowed users to switch between content sources effortlessly, enhancing their control over customization.

Developing the In-App Help Widget

One of the most exciting parts of the project was developing an in-app help widget. Users wanted an easy way to embed articles into their websites, similar to what Zendesk offers. By repurposing our existing mobile version instead of building something new and unnecessary, I created a widget that featured recommended articles and improved search functionality. This widget provided users with a seamless way to integrate help documentation into their sites.

Designer tales!

Reflecting on this journey, I’m proud of the improvements we made. By focusing on usability, listening to user feedback, and implementing changes incrementally, we transformed the theme editor into a more intuitive and user-friendly tool. This project taught me the value of small, consistent improvements and the importance of keeping users at the heart of design decisions.