Modernizing Navigation Capabilities at Appian
Modernizing Navigation Capabilities at Appian
Summary
Appian is a low-code platform that allows users to create end-user experiences through sites and portals. I co-led the design of a new collapsible sidebar navigation style that modernized Appian’s UI offerings.
Summary
Appian is a low-code platform that allows users to create end-user experiences through sites and portals. I co-led the design of a new collapsible sidebar navigation style that modernized Appian’s UI offerings.
Role
Co-Designer
Role
Co-Designer
Collaborators
UXDs, UX Engineers, PMs
Collaborators
UXDs, UX Engineers, PMs
The Problem
The Problem
Appian’s navigation styles were not exciting and up to date with the times.
Appian’s navigation styles were not exciting and up to date with the times.
One thing that’s common across most websites is the navigation bar. Subtle or eye-catching, a good navigation bar is clear, easy to use, and responsive.
One thing that’s common across most websites is the navigation bar. Subtle or eye-catching, a good navigation bar is clear, easy to use, and responsive.
It was clear that Appian’s current style options for navigation weren’t as modern as what was possible. One prominent gap was a sidebar style, present in many sites.
It was clear that Appian’s current style options for navigation weren’t as modern as what was possible. One prominent gap was a sidebar style, present in many sites.
Appian's existing navigation styles, "Mercury" (top) and "Helium" (bottom)
Appian's existing navigation styles, "Mercury" (top) and "Helium" (bottom)
For my first project at Appian, I joined the team as we were introducing a sidebar option, but we were missing a crucial piece of functionality: collapsibility. From usability testing, we saw that without this functionality, it was hard to get people excited about the new style.
For my first project at Appian, I joined the team as we were introducing a sidebar option, but we were missing a crucial piece of functionality: collapsibility. From usability testing, we saw that without this functionality, it was hard to get people excited about the new style.
Some things we heard from users were:
As a user who works on high zoom levels, I can’t see much of the page, and I always have to scroll past the sidebar to see the page content.
As a user who works on an information dense dashboard, I need as much space as possible to process the page content.
As a power user of this site, it’s clunky to see so much space reserved for site pages I’m already familiar with.
Some things we heard from users were:
As a user who works on high zoom levels, I can’t see much of the page, and I always have to scroll past the sidebar to see the page content.
As a user who works on an information dense dashboard, I need as much space as possible to process the page content.
As a power user of this site, it’s clunky to see so much space reserved for site pages I’m already familiar with.
How might we expand navigation styles available to developers to lower the barrier of adoption?
Industry Research
Industry Research
Overall, sidebars don’t vary too drastically between platforms.
Overall, sidebars don’t vary too drastically between platforms.
I reviewed patterns across SaaS platforms, productivity tools, and enterprise dashboards to understand the common sidebar design patterns.
I reviewed patterns across SaaS platforms, productivity tools, and enterprise dashboards to understand the common sidebar design patterns.
Some key findings out of competitor research
Some key findings out of competitor research
Constraints
Constraints
Beyond elements common to all sidebars, our design had to account for Appian’s navigation menu.
Beyond elements common to all sidebars, our design had to account for Appian’s navigation menu.
A description of the navigation menu from Appian's documentation
A description of the navigation menu from Appian's documentation
The navigation menu allows both end-users and developers to access sites and workspaces from a central location. Developers use this all the time to jump between design environments and end users sites.
The navigation menu allows both end-users and developers to access sites and workspaces from a central location. Developers use this all the time to jump between design environments and end users sites.
Usability Testing
Usability Testing
Usability testing revealed promising results, but our collapse icon placement was too hidden.
Usability testing revealed promising results, but our collapse icon placement was too hidden.
With support from our UX Engineers, we quickly tested an early prototype. The collapse icon was placed at the bottom of the sidebar to keep controls sleek.
With support from our UX Engineers, we quickly tested an early prototype. The collapse icon was placed at the bottom of the sidebar to keep controls sleek.
A snippet of the collapsibility functionality we tested
A snippet of the collapsibility functionality we tested
We received positive feedback overall, but identified a couple areas of refinement:
Discoverability: The collapse icon was easily hidden behind docks or missed entirely
Disorientation: The navigation menu's shifting location between the collapsed state and open state caused users to lose track of it
Choppiness: If the animations between the collapsed state and open state weren’t quite right, we’d end up with a really dated looking design instead of modern
We received positive feedback overall, but identified a couple areas of refinement:
Discoverability: The collapse icon was easily hidden behind docks or missed entirely
Disorientation: The navigation menu's shifting location between the collapsed state and open state caused users to lose track of it
Choppiness: If the animations between the collapsed state and open state weren’t quite right, we’d end up with a really dated looking design instead of modern
Iterating
Quick prototyping in Figma enabled us to make quick decisions without over-investing.
Quick prototyping in Figma enabled us to make quick decisions without over-investing.
It would be a significant time investment for our UX Engineers to prototype each design interaction we had, and at the time our UX team was only using static mockup tools and discussed ideal animation behavior in the abstract.
It would be a significant time investment for our UX Engineers to prototype each design interaction we had, and at the time our UX team was only using static mockup tools and discussed ideal animation behavior in the abstract.
I experimented with animation settings on my personal Figma account to bring interactions to life for design discussions. We also brought the UXEs into the decision meetings so we could all be on the same page with desired approaches and feasibility.
I experimented with animation settings on my personal Figma account to bring interactions to life for design discussions. We also brought the UXEs into the decision meetings so we could all be on the same page with desired approaches and feasibility.
Examples of three collapse icon placements we explored
Functional prototypes allowed us to communicate visually, align faster, and avoid hesitant decision making.
Functional prototypes allowed us to communicate visually, align faster, and avoid hesitant decision making.
Impact
Impact
The collapsible sidebar was a hit!
The collapsible sidebar was a hit!
In the year since the feature was released, almost 500 sites use the sidebar layout in production, with about a 15% monthly increase.
In the year since the feature was released, almost 500 sites use the sidebar layout in production, with about a 15% monthly increase.
Not only are we seeing a rapid growth in external adopters, internally our Solutions teams, ProcureSight and Process HQ teams have also been showing this new style some love.
Not only are we seeing a rapid growth in external adopters, internally our Solutions teams, ProcureSight and Process HQ teams have also been showing this new style some love.
Reflection
Reflection
Close collaboration and rapid iteration works.
Close collaboration and rapid iteration works.
Spending time looking at prototypes rather than long discussions was the best way to get alignment.
Spending time looking at prototypes rather than long discussions was the best way to get alignment.
Despite our best efforts, we couldn’t fully resolve the shifting navigation menu issue. Looking back, I would have loved more time to address this—it occasionally resurfaces as a user pain point.
Despite our best efforts, we couldn’t fully resolve the shifting navigation menu issue. Looking back, I would have loved more time to address this—it occasionally resurfaces as a user pain point.
This project taught me how a “simple” feature can become a foundational part of other features—and how smart prototyping and collaboration can unlock long-term impact.
This project taught me how a “simple” feature can become a foundational part of other features—and how smart prototyping and collaboration can unlock long-term impact.
Now seeing the wide variety of AI prototyping tools we have available, this could have been a great candidate to try out. It’s an important lesson to constantly be aware of the full toolkit you have available to you and use them to the best of your ability.
Now seeing the wide variety of AI prototyping tools we have available, this could have been a great candidate to try out. It’s an important lesson to constantly be aware of the full toolkit you have available to you and use them to the best of your ability.