Challenging productivity standards for a personal AI assistant

It was important that Edgar’s design felt human, trustworthy, and most importantly: not too techy. Even though it’s AI based, it doesn't mean it needs to be fully branded as such. Instead, we opted for a calm and minimal color palette with earthy tones, paired with a simple and neutral sans-serif font. By adding minimal and slightly heavier icons in the mix, the style direction enabled us to create a clean and conversation focused experience across the app and website.

AI is often represented by bold purple colors. We wanted to step away from this vibe and made sure to avoid dominant colors that often make the experience more daunting. We approached the color scheme from the opposite direction, by using earth-like tones such as green, turquoise and creme white. Making use of modern colors and advancing technology, it created a human feel while also allowing for playful elements.

As the font needed to be eligible even for smaller screen sizes, Basier Circle was the perfect match. It’s a modern, sans-serif collection inspired by a clean, simple and neutral style.

Due to its circular letter forms and tight balancing, it creates clarity in text. Whether it’s a message from Edgar, a description in one of its workflows or a section on the marketing website.

We incorporated simplified web app interface elements in both the website as well as the web app itself. By doing this we’d be able to provide a visual glimpse of the user interface for visitors, and thus potential users, on the marketing website. It allowed us to offer website visitors a preview of Edgar’s aesthetics.

In the web application itself we utilized similar simplified User Interface elements, or ‘snippets’ as we like to call them. By using these snippets we had an illustrative way to offer users a more hands-on understanding of the interface and what to expect. A great example of this is Edgars workflows: the snippets provide a concrete example of certain notifications a user could receive from Edgar within a workflow, making it easier for the user to understand how it works.

When designing for Edgar, one of the primary objectives was to create a simple and familiar chat interface. Nevertheless, Edgar packs some enhanced capabilities and it's crucial to strike a balance between this familiar chat interface and the potential for interactive follow-ups on Edgar's suggestions. This is where a range of different widgets come into play, essential for processing any feedback and information that Edgar may throw at its users. But in the end, it should still feel like you’re talking to a perfectly  helpful friend.

Creating workflows is one of the primary perks about implementing Edgar in your workflow. Being able to share workflows with a community is even more awesome. We’ve made sure it’s attractive to look at too, incorporating thumbnails that slightly hint to the UI when you share your workflow with others.

Besides the designs for Edgar as a product and its website, we also created marketing material to help gain traction on Product Hunt and other platforms. Making sure the designs not only looked the part, but also showcased the most important features Edgar has to offer and get people excited to start using it.