Building Product Foundation

Loopback came to us with a strong vision but needed help bringing it to life. They wanted a feedback tool companies could embed easily on their sites, but the entire user experience needed designing from scratch. 

We started by digging into their core needs: custom forms, bug reports, feature requests, and public boards to share updates.

The challenge was making it flexible enough for different companies, from simple feedback to complex workflows. 

Working closely with their product team, we mapped out features and user flows to build a solution that truly solves their customers’ problems.

Research & Competitor Benchmarking 

Before diving into design, we took a step back to understand the feedback collection landscape. We studied both direct competitors, other feedback tools and even indirect ones — such as platforms with customization or collaboration features. 

Our research showed a split: simple tools lacked needed customization, while complex ones overwhelmed users. We also found many competitors struggled with widget deployment on websites, revealing a clear opportunity. 

This insight helped us pinpoint effective features and design patterns, and identify pain points we could improve, setting the stage for a more intuitive Loopback experience.

Creating Feedback Widget Flow

The feedback widget was the core of Loopback’s experience, where users left their feedback on websites. We made the creation process template-based so users could start with a design and then tweak fonts, colors, emojis, and form fields to fit their brand. 

It was simple enough for non-tech users to set up without needing developers. Keeping it template-based helped prevent decision fatigue but still offered flexibility. 

A live preview showed exactly how the widget would look and work before it went live.

Designing Template Selection System

We built the template selection system to strike a balance between ease of use and flexibility. Categories covered feedback types like bug reports and feature requests. 

Early versions overwhelmed users with too many templates. We redesigned it with a clean card layout that made comparison simple. Preview functionality helped users explore templates before committing. 

The system was built with scalability in mind, ready to add new templates as needs change.

Customization Interface

Once a template was selected, customization needed to be easy yet robust. We built a split-screen interface showing a live preview next to the controls. The design was simplified for non-experts, making controls easy to use but flexible. 

Color options let users pick from presets or customize their own to match branding. Typography settings included font, size, and spacing—but limited enough to keep widgets readable. 

Emoji and reaction features added personality, with choices of emoji sets or the ability to disable for more formal feedback.

Feedback Chatbot 

The chatbot extension allowed users to convert any feedback widget into a chatbot, retaining their original branding. 

With simple customization for intro messages and bot names, users maintained their visual consistency. 

Custom triggers let teams control when to activate the chatbot, while all feedback; whether through widgets or chat – was managed in the same dashboard for streamlined efficiency.

Individual Feedback Detailed View 

The feedback detail view became the hub for tracking and managing responses. We designed it like a task management system where teams could collaborate, comment, and update status. 

With stages like “in review” and “resolved,” the system gave visibility into each piece of feedback. 

We also allowed feedback to be made public, letting customers track their suggestions. A timeline view showed all actions taken, ensuring clarity and accountability.

Dashboard Design

The dashboard is the ‘command center’ for managing feedback, handling everything from occasional submissions to heavy daily loads.

We designed it for all users, showing recent feedback with clear statuses to highlight priority items. Search and filters made finding feedback simple by looking through all content. 

Bulk actions let users handle many items at once: changing status, assigning team members, or shifting categories quickly and smoothly.

Collaboration Features

Feedback collection is rarely a one-person job. Teams needed a way to collaborate on responses and track progress easily.

We built a commenting system similar to ClickUp and Asana, allowing team members to discuss feedback internally before replying. Status tracking kept everyone on the same page, with stages like:

• "New"

• "In Review"

• "In Progress", and…

• "Completed." 

Assignment features made sure feedback went to the right people, avoiding missed items. An activity timeline showed every update and comment, giving teams full visibility.

Changelog 

The changelog feature kept users informed about updates and showed them their feedback was making a difference. 

We made it accessible as both a standalone page and an integrated dashboard element, allowing users to stay updated without interrupting their workflow. Updates were clear and useful, with descriptions, screenshots, and links. 

Integration with the feedback system automatically added resolved suggestions to the changelog, closing the feedback loop and building trust.

Mood Analysis Screen 

We saw emotional data as the untapped opportunity in feedback tools, which prompted us to implement emoji responses that capture sentiment quickly without language barriers or typing friction. 

We created a five-emoji scale for nuanced emotional tracking and built comprehensive customization options.

The real-time preview further ensured that companies saw their branded widget exactly as users will experience it. 

This strategic approach to designing specific features helped us position Loopback as an emotional intelligence-led feedback platform compared to other “run-of-the-mill” products. 

Public Board System

One cool feature Loopback offered was the public board, letting companies share progress on feedback openly with users. This showed users their input was valued and acted upon. Feedback marked public appeared on a branded board visible to customers, creating trust and encouraging participation. 

The board showed the status of suggestions and company updates. We designed it to blend seamlessly with each company’s website look and feel. 

Striking the right balance between openness and privacy was important, giving companies control over what updates were shared.

Optimizing for Mobile 

While the main dashboard was built for desktop, we knew many users would access it on mobile devices. So we made sure feedback widgets were fully responsive and tested them across screen sizes and touch inputs. 

Instead of cramming every desktop feature into mobile, we focused on the essentials. For example, we redesigned the project settings dropdown for easy access on small screens. 

This way, team members could manage feedback on the go without feeling overwhelmed by too many options.

Conclusion 

We wrapped up the project in just 4 weeks, owing to a structured process & strong client communication.

The deliverables (including the marketing website and full app design) gave the client everything they needed to start development. 

Being focused on core goals & avoiding scope creep also helped us stay on track.