.jpg)
Jackie Jiang –
Product Designer & PM
Lukasz Swierlikowski – Engineer
User Research
Wireframes
Prototype
The ability to allow changing the execution order of plugins has always been existing through our backend API. However, due to the overly complex nature of this feature, the need to realize this feature in our GUI has been proven by the increasing demand from our field team as proxy from our users. Therefore, our mission is to visually translate the existing complex logic into a user friendly interface.
Increase of the feature adoption rate
The solution is scalable enough to consider for future feature addition and content changes.
Ensure the alignment with current branding language.
Worked with our field engineer team to consolidate a list of products that our clients are most familiar with. Then, I conducted an exhaustive analysis of selected companies from the list to identify the pattern that our users already love and can easily adapt to.
.png)
The decision to offer collapsing the side navigation has dependency on the clarity of icons.
A B2B technical platform product would tend to have more L1 and L2 items to display than the non-technical products.
Interaction design is less the focus, but emphasize on clarity of info architecture with a clear breadcrumb path
Rather than a formal round of user interview, we conducted an informal round of interview through Slack or Zoom chat with internal users from Developer Advocate Team and Front-End Engineer Team. We got some very passionate, yet honest responses which confirmed why we want to redesign the side nav to begin with.
The first step is to determine the basic structure of the side nav and how should the user interact with the side nav. We compared the solutions against the research results and consulted with internal users to validate whether the interaction pattern fits their expectation. At this stage, we are actively checking with engineer teams on feasibility and level of efforts.
Once we decided with a general direction for structure and interaction, we proceeded to "dress up" this component to deliver a more pleasant visual experience and more importantly, a clear information hierarchy.
Screenshot wouldn't be sufficient enough to experience the interaction in this case, but perhaps the interactive prototype below can do the job. Have fun!
As I am also responsible for maintaining the design system at Kong, my last piece of work ended with building a fully functional component for our Figma component library. It also provided a detailed blueprint for engineers to understand the logic behind.
We were happy with the result, but not satisfied. So as we concluded the initial MVP launch, we already started cooking our next iteration to introduce a more immersive experience .
Kong has multiple lines of product from SaaS to on-prem. Part of the plan is to adapt other product lines with Konnect navigation to start forming a consistent experience for our customers while saving Eng resources by referencing the same component library in 2023.
satisfaction based on internal survey after the launch of side nav
faster overall performance based on our Datadog analytics for response rate decrease
It always feels good when I have targeted the right problem to solve and have solutions specifically tailored to the problem while be future-proof. Although overall everything was smooth, there was still some unexpected surprise during implementation where front-end Engineer and I realized we did not consider the browser scroll bar compatibility which forced us to come up with fast solution to unblock the release. This empathized the importance to have a browser compatibility checklist at the design system level.