With AI growing ever so fast, the company behind Edgar knew it was time to introduce it to the world. Edgar is a personal assistant, designed to directly integrate in your personal and professional life. It has all the context it needs, and can streamline entire processes for you. Giving you more time to work on things that actually matter.
Edgar had a solid idea of how the personal assistant should work and behave. What they needed however was a professional yet playful visual identity that could be applied to their web-app as well as their marketing website. In a rapidly expanding world full of ways to use and apply AI, visually standing out from others is key.
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.
Colors to stand out
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.
Easy to read typography
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.
Looking the part across the web
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.