The small UI changes that make a big difference
While this week’s release was focused mostly on the new Corilla knowledge base, we managed to slip some design iterations in there as well. If you log into Corilla now you will see some new UI elements built around an updated workflow.
We’ve talked about a UI refresh for a little while now and maintained the ticket in the public roadmap. Our immediate focus is on functionality ranked by our community driven development model. But in each one of those enhancements or improvements comes the opportunity for design to take a position in the development cycle.
Design is…?
What was interesting in working on the knowledge base was the product team decision to get the feature out to our users sooner by extending the existing workflow model.
This has the benefit of empowering our users sooner by utilising an existing conceptual model. Namely the extension of the relationship of Corilla’s topics to collections. Where “topics go into collections”, we can extend to “collections go into knowledge bases”. With the bonus of even using the existing visual assets such as topic and collection cards.
This does pose some challenge in preparing the iterations to follow. They need to be genuinely more intuitive and useful given we’re doubling down on an existing design pattern. And they need to happen in quick succession.
When we pushed the first builds of the knowledge base, which we referred to internally as a “docs portal”, we simply extended this existing pattern. The alpha users got this “Portal” button in the core UI.
Example 1. Corilla’s original navigation UI
This navigation pattern fit the model but felt awkward. It was also backwards, where a user will want to create content before putting it into a collection or publishing it to an output like a knowledge base.
As we will soon be shipping a new import/export module, we looked at this release as an opportunity to prepare the UI (and the users) for the additional output options.
Example 2. Corilla’s updated navigation UI
This small change has a large impact. The UI labels are now less about the feature and more about the action. This change to an imperative form improves the onboarding experience for new users as it more closely matches their intent. We’re here to solve problems rather than build features after all.
Note that we’ve started to shift away from the brand blue to a more consistent charcoal. This becomes an anchor swatch for the brand and aligns more with the “pencils and paper” theme that we’re continually exploring. Design is an ongoing conversation, not a once-a-year brand refresh.
A startup of our size simply doesn’t get a chance to sit and design a brand style guide from scratch. Progress is made in meaningful iterations as we can get them, and understanding the long view with where talent like our head of design, Ton Ha, shines through. Needless to say we would be lost without having Corilla as our documentation tool for iterating on this style guide as well.
Example 3. Corilla’s original settings UI
The existing settings elements were compact in what is an otherwise oversized design aesthetic. The gravatar-enabled profile image was “cool”, but didn’t actually add a great deal to the experience. Dropping the name down to first name feels more personal.
The user isn’t a customer in our database to be logged and filed. Corilla belongs to the user. It’s their place to create their amazing content. Plus we’re pretty casual around here with the formality in any case, you might have noticed 😎
Example 4. Corilla’s new settings UI
Spacing these elements out matched the overall UI balance of the primary navigation as a whole, with the repeat use of a subtle vertical seperator (the yellow dot). This also gave the opportunity to break out the teams and settings content from what was a single menu.
Example 5. Corilla’s old settings UI
Under the old view, all of the personal profile, team management, admin and team switching was under the same menu. It grew with new features until it began to feel cluttered. This was especially the case as we saw writers creating multiple teams for work, personal projects, etc.
Example 6. Corilla’s new team dropdown
The new view breaks the teams out to their own view under the team name as selector. And the settings action get their own with the familiar cog pattern. In the wild our users have adapted instantly, with less cognitive load to look through lists, and the speed of muscle memory for clearly defined menus for obvious actions.
At a glance these are small UI elements. But in shipping them we’ve seen an immediate impact on improving the onboarding experience for new users and preparing the existing for a whole host of powerful export and publishing features.
And the best bit? Sneaking some design wins in to engineering and product-focused sprints 👩🎨🎨✌️ Not as additional features, but a core part of the product’s progress.
You might say it was a good day.
