IdHub

Building fluidity and flexibility into an identity management solution

We designed and implemented a user-friendly front-end for this complex enterprise platform.

IdHub Map land view responsive design
Type
Web
Segment
Enterprise (B2B)
Business
Growing
Industry
Identity Management
Geography
Schaumburg, USA
Year
Since 2019

Brief

Being the Design & Front-end Tech Partner to IDHub

IDHub is an Identity management system that provides access to various platforms, tools and systems to authorized officials and personnels. It facilitates viewing and controlling workforce access to all applications and data. We were the user experience design and front-end development partners to IDHub. Having multiple users and use cases, coupled with customisation capabilities, help organizations find the best ways to manage identity and access.. The platform is web-based with a few features, available in responsive view as well.

Engagement

A rocking team of 3 UX Designers, 4 Software Engineers successfully executed this project.

Tech Stack

“What sets them apart is the quality of their work. They actually put in the time and energy behind making sure that the deliverables and quality of work set them apart.”
Arun BinaykiaCTO, Sath
IDHub UI Design Details
Challenge

Creating an intuitive and efficient front-end experience in collaboration with an external back-end development team.

“Identity Management is a complex domain. Our detailed research into the competitors helped us identify opportunities to become unique. Rapid prototyping was particularly handy in this project.”
Krutik BhavsarSr. UX Designer, Aubergine

Making requests for new catalog items

Making requests for new catalog items

  • Easy catalog item finding using search & filter
  • A 2-step access request work flow
  • Request for multiple catalog items for multiple colleagues

In medium & large-scale companies, users require permission to access multiple applications. Then there are additional requests for unique items and those from multiple team members. Seeking and granting permission, as such can easily get overwhelming. We brought the confusion and pressure down by providing an easy search & filter option to find catalog items. After selecting for items, users have to fill in additional information. The system creates their account, once the manager has approved the request. The entire process was solved in just 2 steps. The same workflow helped users to request access to multiple catalog items for multiple colleagues.

IDHub request for new catalog design

Approval workflow for granting access to catalog items

Approval workflow for granting access to catalog items

  • Priority bases access approval
  • Sequential representation of request approval workflow

Every access to any catalog item requested by users for access should be quickly followed by an approval, depending on how crucial the access is. For instance, if an employee from the Accounts department needs access to a banking software, then it is important to verify the user’s request. Some access requests might also need multiple approvals. The approvers are presented with information of primary importance, while keeping secondary information handy. They are also given insights into the progress of the status of the request so far.

IDHub Workflow Designs

Simplifying certificate creation process

Simplifying certificate creation process

  • Streamlining and grouping to simplify a 10-step process
  • Reduced certificate creation time from 5-10 mins to 1 min
  • Features like auto-suggest, query builder and dynamic dropdown

Out of the many administrative features in this product, certificate creation is one of the lengthiest. It contains 8-10 steps, each with multiple fields. We streamlined & grouped all the steps on the basis of functionality & then highlighted all the necessary fields which are required to create certificates. We also reduced the average time of creating a certificate from 5-10 min to under 1 min by providing auto-suggestion, a query builder for select resources, a simple option to select data by using the dynamic dropdown, and many more.

IDHub Create Certification UI

Creating Custom Workflows

Creating Custom Workflows

  • Option to add custom elements in general workflows
  • Easy tweaking of workflow based on configuration needs
  • Customising library styles in RapidJs to suit the product

  • Customisation is at the heart of every successful product. Identity management systems are no different. Companies need ways to configure the system so as to customize workflows according to unique use cases. We achieved this by designing a visual workflow for creating interfaces. Most common elements needed to create the workflow were provided out of the box, with an option to add custom elements. This powerful feature enabled easy visualization of the workflow.
  • The pictorial representation of each step/level of the workflow needed us to look for the right library to implement this. RapidJs library was used for this but the design of this module had to match the visual language of the entire product. This required overriding the library default styles and customizing the library’s panel functionality.
IDHub Custom Workflow creation interface
“Since we were in charge of the front end only, and the application is all data-driven, the major challenge was connecting with the back-end team. We used to have a Sync-Up call on a daily basis and ask for the data/ API which was required and everything went so well that it didn't even feel like there were two different teams at different time zones. It was a great management experience to learn from. ”
Suraj HemnaniSr. Software Engineer, Aubergine Solutions

Designing an interface for custom form creation

Designing an interface for custom form creation

  • Enabled custom form creation to address multiple input types
  • Hint text, adding descriptions and custom JS code
  • Drag and drop interaction to ease dynamic form configuration.

For complex B2B enterprise applications, one of the common requirements is to facilitate custom form creation. Designing forms is one thing but designing an interface to enable users to create their own forms is a totally different ball game. We designed the interface to cater to a wide range of input types. We integrated the flexibility to define those files as required, add descriptions, hint text and add custom JS code in order to enrich the flexibility. We enabled a simple drag & drop interaction to enable easy configuration of these dynamic forms.

IDHub Custom Form experience design

Email Templatization using Rich Text Editor

Email Templatization using Rich Text Editor

  • QuillJS to create RTE that was compatible with modern libraries
  • Integration of custom parameters and fields in template
  • Capability to preview templates with values fed in.

  • The major challenge in templatizing emails was providing a Rich Text Editor to the user. The RTE should also support the “What You See is What You Get” paradigm and be compatible with modern libraries. The feature was accomplished using QuillJS.
  • The other challenge faced while creating a template was providing the user the ability to use Custom parameters such as username, subject, and other such fields and also previewing the template with the values. Collaboration with the back-end team and using the custom parameters’ API inside the Text Editor helped in achieving the desired results.
IDHub Email template UI

Reporting an issue with corresponding screenshot

Reporting an issue with corresponding screenshot

  • Issue reporting supported by evident screenshots
  • Core Javascripts to create draggable masking box

Whenever faced with an issue, users needed to be able to report it to the concerned authority. To accomplish this, we required a CTA, which when clicked, took a screenshot of the page and allowed the user to crop or resize the captured screen accordingly. We created a custom draggable masking box functionality using core javascript principles.

IDHub Report a Problem Modal
prev
next