External Client Apps
External Client Apps are V2 of Connected Apps. A Connected App or External Client App is a framework that enables an external application to integrate with an Org using APIs and standard protocols, such as SAML, OAuth, and OpenID Connect. They use these protocols to authenticate, authorize, and provide single sign-on (SSO) for external apps.
Below you'll find my design journey for this project, showcasing artifacts and insights gathered from the collaborative workshops and meetings I conducted (Yes, I like a good workshop in Figjam).
My Role
Product Designer
Teammates
1PM + 1CX + 1 Eng Manager + 3 Engineers
Value Add
A more streamlined experience that gives admins and developers the ability to create External Client Apps that are deployed locally by default.
The Kickoff
To kickoff the project, I gathered important documentation, did trainings on Connected apps, put together a workshop so that my Product Manager could dump all of his knowledge on this subject in one spot, and partnered with him on creating a design brief.
From there, I created a Kickoff Meeting for all of us who would be embarking on this adventure together. In this meeting we were able to introduce ourselves and get to know one another better. We also went over who our users were, what the problem was, and the goal of this project. From there we looked over low-fi mocks and aligned on a timeline of milestones for our project. We also discussed the best way for us to communicate moving forward.
The Problem
Today, our developer users have a very disjointed experience when they are creating and managing their Connected Apps. This is because the flow is broken up into different parts of Setup, instead of being housed within the same area of the navigation. The flow below shows how far into the navigation the user can get until they hit a dead end. The right-hand side represents the different part of Setup that the developer has to navigate to in order to manage the developer side of the app (called App Manager). To add to this, when they create a new Connected App, the app is made globally, meaning that all orgs will get that app.
The Goal
To create a new experience that is seamless, intuitive, and easy for our developers, admins, and customers to install create, manage, view, or even make it a package-able app with External Applications.
The Timeline
I worked closely with my Product Manager to craft a timeline of key milestones for our project. This timeline was effectively communicated during the kickoff meeting with CX and Engineering, ensuring alignment and clarity across all the stakeholders.
The team is now working on the UI implementation. I attend their weekly stand-ups and hold a weekly UX meeting to chat about what they're working on, answer any questions that they may have, and discuss areas where we need different solutions due to technical capabilities and time. This project and team have made great progress and that's partially due to the agile way we have of working.
My Process
Discovery:
I had to familiarize myself with Connected Apps and its landscape to understand what External Apps would be. To accomplish this, I went through many trainings and documents on Connected Apps and External Client Apps. I was also able to create a sandbox org and get hands-on experience.
From there I created user flows. This allowed me to see gaps in the product and understand our users' pain points better. I put together several workshops for my PM and I to knowledge share and brainstorm ideas for External Client Apps.
From these activities, the Design Brief was born. It was now time to get the team together for a Kick Off, which you read about above!
Research and Design Iterations:
Due to the nature of large companies, it can be difficult to get customers for user research. This usually happens due to resources and timelines and limited access to customers. Because of this, designers have to be creative. We have to find ways to improve our designs and get feedback.
The lack of feedback led me to an audit on Setup. I searched Setup for common patterns that our users would be accustom to. This audit led me to find the need for a new pattern for our Help. I created a new component, and it will be used in our product.
The audit allowed me to see where other products or apps used similar components and designs that we needed for External Client Apps. I was able to find the teams who worked on these components. We were able to reuse their components. Another issue you can run into in large companies is redundant work. This new network with these teams has allowed us to implement more intricate components for our MVP design. The main two are badges on tables and a flow for adding Custom Attributes.
One of my guiding principles in design is that feedback is a gift. Since I couldn't get to my users, I sent my designs out in design feedback channels within Slack. I've also shared them multiple times in my immediate team's Design Crit. Lastly, my development team and I have shared it out in their Demo days, which always generates great feedback.
I will be sitting down with customers in the next couple of weeks and conducting usability testing and interviews. The insights gained from this research will inform the feature improvements for our next release.
Accessibility
As an ambassador for our design system, I advocated that we use components from the library. I only created custom components when necessary. Our design system components ensure accessibility and responsiveness. However, for any of our custom components, I do go to Accessibility office hours to check that we've considered all aspects of accessibility.
Hand-off
For Release Planning purposes, I do put design decks together. However, for hand-off to developers, I now use Figma. Figma's inspect mode has made this aspect of the process much easier. The developers can dive right in and see which components have been used, spacing, and any notes that I've added in.
I do hold weekly UX meetings because things come up. Sometimes design has to negotiate with technical feasibility and time to implement. Or, there may be a use case that was overlooked. That's why I find it crucial to integrate into the dev team. The more known and seen you are, the more the developers will feel comfortable reaching out.. and this will lessen the amount of design choices made without UX.
CX is also included in these weekly meetings and updated via Figma when new labels or descriptions are needed. They are also able to keep us up to date on their Help and Release Notes and ask any questions that they may need answered.
MVP Design:
Below you will see our MVP design that will launch this April. This gallery takes you through the flow of Editing a Trusted IP Range. Clicking the images will allow you to see the gallery at a larger scale.
What's Next
Next up, we will be sharing our designs with customers to conduct Usability tests on the current implementation. We will take the feedback and make improvements for our next release.
This product will launch in April. For the next release we will implement a migration strategy. The first step will be to make our users aware of this new product and the benefits of using it instead of Connected Apps.