Azure B2C

 

In the Azure B2C effort, I was a part of a team who redefined an experience that would allow us to serve our users more accurately. Keeping our users safe and secure were two driving factors in why this project came about.

The Details

 

My Role

UX/UI Designer

Tools

Figma

Azure

Sketch

Zeplin

Azure B2C Background:

Azure Active Directory B2C (Azure AD B2C) Is a customer identity access management solution capable of supporting millions of users and billions of authentications per day. It takes care of the scaling and safety of the authentication platform, monitoring and automatically handling threats like denial of service, password spray, or brute force attacks.

The Problem

How might Cat.com redefine its Azure B2C implementation in order to better and more accurately serve its users? A few key aspects are what really brought about this change: 

  • Recent security incidents impacted dealers, business and customers

  • Separate workforce accounts from customer accounts to strengthen security

  • Customer IAM features and onboarding process available

    • User Sign In

    • eCustomer Registration

    • Customer Profile Maintenance

    • Account Recovery

The current implementation already consists of an existing UI that will be utilized and built upon in order to achieve accuracy.

Within the larger problem that we as a team were trying to solve, I found it easier to break it down into smaller tasks.

  1. Identifying the Gaps

 

Problem: The product team and I wanted to understand where the gaps and areas of opportunity were in the current flow. We also needed a way to quickly visualize this to present to the larger product team for feedback.

How it was solved: This was solved by using flow charts to better visualize the screens that already existed, identified the gaps, and presented areas of opportunity.

Why Flowcharts?

Flowcharts allowed both myself and the product team the ability to collaborate on the expected experience or steps of a user. These diagrams allowed us to visualize each possible step a user could encounter. After user flows were created, they were presented to members of the product team for feedback prior to working on designing screens. This allowed us as a team to not only ensure accuracy, but save time by catching possible errors in the flow before designing. They were also critical in ensuring that each possible step was covered prior to designing screens, modals, error messages, etc. Since it was understood that any delay in receiving finalized designs could result in a project delay, these user flows were critical in ensuring accuracy prior to moving into the design phase.

Understanding these user flows was also critical for me as I was coming into this project with no prior knowledge around Azure B2C, User Sign In, or User Sign Up. Having these flows allowed me to visualize and better understand the problems that needed to be solved in order to make UX and UI recommendations. As a result of having saved time on the front end with the flows, this allowed me to meet with team members in small groups to review updates to designs. It also is what allowed me to stay ahead of deliverable dates which ultimately contributed to the overall success of the project. 

2. Working With Gated Content

 

Problem: We needed to develop the capability to secure value added content behind the Cat.com logged-in experience.

How it was solved: This was solved by using flow charts to better visualize the screens that already existed, identify the gaps, and presented areas of opportunity. The Gated Content screens were designed in high fidelity and added into a flow in order to view the finished product. 

Execution: Gated content was broken up into two flows: “Gated Content Sign In” with missing information and “Gated Content Account Sign Up”. Both flows illustrated the additional messaging added onto the “Sign In” screens informing the user that they are required to sign into their Cat account or create one. User flows were instrumental again in allowing the team and I the ability visualize the steps in the process prior to designing the screens.

3. Aligning with Existing Azure Screens

 

Problem: Azure screens had already been designed and developed by another team, however aligning the screens from a UX/UI perspective in order to make them usable for multiple teams was the challenge.

How it was solved: This was solved by collaborating with the Fleet 3.0 team on how we could make the UI and UX usable for multiple use cases as well as multiple teams instead of just specific to one.

Collaboration

Working with the Fleet team to identify the areas of opportunity where we could come together on things like UX, copy, and iconography styles allowed us to create screens that would be usable in cases outside of just the Fleet team. We discussed specific requirements that the Cat.com team had and came up with components that would be fitting for multiple use cases. This is huge as additional teams begin to adopt these screens and will be able to adopt a UI that has been created with multiple use cases in mind.

Another beneficial aspect to collaborating was being able to come together as various product teams and understand if the copy on the right side of the screen is something that we could keep consistent on with screens as well. This would allow users to have a sense of familiarity when logging into various applications. By keeping the messaging the same and not application specific, we gain trust with our users by not confusing them with similar design but different copy. 

4. Technical Limitations

 

Problem: The product team as well as myself needed to better understand the various technical limitations that could present themselves. 

How it was solved: This was solved by partnering with developers the entire duration of the project.

Working Through Technical Limitations

Although there are usually workarounds, backend technical limitations are important to be aware of so the UI and UX is able to function as it's designed. I partnered with developers during the entirety of the project and presented to a team of developers during touch points. This was helpful as they were able to provide their feedback and I was able to iterate as I went along. I was also able to capture many of the technical notes I had for the developers right in Figma. This will allow them to refer back to any point previously discussed as they begin to work on the development.

Working this way allowed us as a team to not only understand technical limitations up front, but gave me the opportunity to make changes while the design was still in progress and no final decisions had been made. This made it possible to prevent possible delays on the project due to rework and allowed me to deliver the final project ahead of deliverable dates. The additional benefit to this collaborative way of working was that all of my questions and comments for developers that were covered during the process are documented right in Figma along with its’ corresponding screen. 

 

Example of a development note I left in Figma accompanied with flow lines for the technical team to refer back to

5. UI Recreation & UI Library

 

Problem: Several screens had been designed by a previous designer, however due to business deliverable changes, several had become outdated. The screens were also designed in a tool no longer used by the UX teams. We also needed a way for other UX teams across the company to quickly adopt the Azure B2C work I was putting together for their own projects.

How it was solved: This was solved by recreating all screens in our current design tool, and working with the business analyst and product owners to ensure accuracy. It was at this time that I updated the screens with any necessary UI and UX changes for the updated flows. I also built a UI library with reusable components for myself and other teams wanting to use screens and elements from this project to easily grab and go. 

UI Recreation

Taking screens from Sketch and recreating them in Figma is no small task. Although the “Import” feature exists in Figma, the screens are never the same after importing. Since as a company Caterpillar is moving away from design tools like Sketch and into Figma, this was a good opportunity to ensure that the latest Azure B2C designs were created in Figma. This would allow other designers across various UX teams to borrow screens and or components to start working with no hassle.

UI Library

Building a UI library is key in ensuring accuracy across all design teams within a company. After building the UI library, I met with other teams across the company to walk them through the designs and answer any questions they had around using it. The response after using the library was that it was “quick”, “easy”, and “sped up” their own process. To ensure that our digital Cat products across the enterprise have a similar look and feel, it is incumbent on us as designers to continue exposing other teams to our work so it is clear what’s already been done and what can be reused. The various design teams within the company are committed to aligning on UI and UX standards, which is another way to maintain consistency.

 

Snapshot from the Azure B2C UI library with components built for speed and consistency between teams

6. UI/UX Documentation

 

Problem: I needed a way to call out the new UI updates that had been made to existing screens for developers, business analysts, and product owners. I needed to make it as easy as possible for them to identify the elements on a screen that had been changed.

How it was solved: This was solved by using numerical callouts on each screen and tying them back to a larger note that corresponds with each number.

My Process

Adopting the same process I introduced to the Fleet 3.0 team, I created a list of UI changes and put them next to the corresponding screens. I then used the numbers from that list and added next to each corresponding element right on the screen. This method had been used with the Fleet 3.0 developers and we received great feedback around how easy it was to identify what and where the changes were as opposed to just reading them from features in Azure. 

The feedback from the developers and business analysts from the Azure B2C team was that this was “helpful” and “intuitive” for them as well. It has also been important for me to bring best practices from my Fleet 3.0 role over to this role as there are always areas where we can improve our process. Ensuring accuracy the first time and preventing rework on the development side is crucial.

 

Snapshot of how I documented visual changes within the UI

Test Drive Yourself

Click here to view the high fidelity prototype.

Looking Back

The collaborative all hands on deck nature of the project allowed us to meet our delivery goal for the project. Although the project is still in progress from a development standpoint, from a design perspective I was able to stay ahead of target throughout the entirety of the process. Setting my personal targets ahead of delivery dates gives me a chance to step away from the project and come back with fresh eyes which was critical here. With constantly changing copy, requests from the team, and last minute feedback, it was important to stay caught up with changes to adhere to all delivery dates. 

In the future, I expect that more teams will be adopting this flow as well as wanting to add to it. I’ll continue to serve as a resource for guidance and best practices in order to maintain consistency across teams.