Announcing Console 2.0

Sara
Appwrite

--

After several months of hard work by our design and engineering teams, we’re excited to announce Console 2.0. Developer experience has always been a priority for Appwrite since the beginning. The web console is one of the most important pieces of the developer experience puzzle. The new Console not only looks better but serves a functional purpose. We designed Console 2.0 to reflect many of our core product values better and be more welcoming for community contributions. We’ve spent many hours in the last few months, both internally and with our community members, discussing and developing changes to the Console.

So what made us decide to redesign the entire Console?

Simplicity

One of our core values at Appwrite is simplicity — it guides us in everything we do: we want to simplify software development. We felt the old Console didn’t reflect this value as much as we are striving for.

The new Console is simple. It reduces visual load with more purposeful color use and more selective inclusion of information.

Our new Users screen — renamed to Auth

Consistency

Consistent behavior reduces fumbles, mistakes, and frustration when using Appwrite. The new Appwrite Console uses a consistent UI library, so navigating from page to page and task to task will flow seamlessly. We built a component library in Figma, with usage guidelines documented thoroughly. Before adding a new component, we considered if it could be solved by using our existing ones first.

Design System

Accessibility

Our old Console wasn’t fully accessible. While building our new components, we ensured that every component complied with most accessibility standards — from design to code. Console 2.0 is also designed to be accessible to developers of all skill levels. Complex workflows will provide more guidance for newer developers and promote good technical decisions. One example is the introduction of an onboarding flow, where we guide new developers from signing up with Appwrite to making their first API request.

Our new Google Chrome DevTools accessibility score

Scalability and collaboration

Shipping new features that our community requests as efficiently as we can while maintaining quality is what we strive for every day. In fact, many new features are created by our community of over 700 contributors. We noticed that it was too difficult for developers to add new features to our Console because of the architecture and technology we were using. Our new frontend is built with SvelteKit, a modern Frontend Framework, making it much easier to contribute and collaborate, both internally as well as with our community.

The process

As an open-source company, our design team had a great advantage in having easy access to our community for gathering feedback. We involved our community at different points during our process. Before redesigning a specific part of the Console we gathered feedback through surveys, community forums, and sites like Reddit and Product Hunt. We prioritized this feedback on effort vs. impact required. After redesigning the screens, we did usability tests with our community members to see if there were any issues with the new design.

What now?

Our goal with this redesign was to create a “Minimum Loveable Product”. We prioritized the biggest issues, in consultation with our community who provided us with many insights. We’re fully aware that there are still many improvements that we can make, and the UI will continue to evolve.

That being said — we need your help as a community member. If you have ideas on how we can improve further, feel free to let us know on Product Hunt, in our Discord Community, or create a GitHub discussion.

Some things that we have on our backlog:

  1. Filtering and sorting options — Better filtering and sorting options for all of your data in the Console
  2. Better search capabilities — Searching through users, databases, users — you name it!
  3. More (customizable) analytics — We’re going to research what you would like to see in terms of analytics, providing the ability to customize what you see on your dashboard
  4. Better keyboard access & navigation — We know developers love their keyboard shortcuts
  5. And much more — Let us know on Product Hunt what you’re wishing for!

🚀 Product Hunt
💻 GitHub Console 2.0 repository

P.S. We’ll share our thought process behind these design decisions in several more detailed follow-up articles. Stay tuned!

--

--

Sara
Appwrite

Design Lead @ Appwrite | Product Designer and Illustrator. 🖌