AI-Powered Vendor contract management mobile app

Jonny Jackson
Table of contents

1. Intro - What if

Evisort is one of the premiere major names in AI-powered contract management, reshaping how businesses handle contracts. As a multiple-award winning firm, AI is their forte, linking data, expediting deals, and revealing business insights. What a powerhouse. What if I crafted a mobile app of the Evisort Platform, specifically, vendor contract management?

AI-powered Contract Management Software | Evisort
Evisort empowers enterprises and growing companies alike to transform their businesses with AI-powered Contract Lifecycle Management and Analysis software.

Evisort platform has won several awards and is highly revered by those who live and breathe contractual work. Do check them out.

If you have ties to Evisort, let's connect. I'm all in to redefine contract experiences with AI. Just thinking about it gets me fired up. This mobile app sample project has lots of assumptions and I would love your feedback. Lets dive into this sample project, shall we?

0:00
/0:20

Tension leads to magic:
This might not work, or it may. But, either way, this is a mobile approach. A few principles that I abide by, and have gained my former clients success (mantras)

  1. Don’t complicate it, simplify it.
  2. I am not my user.
  3. Prototype as quickly as possible to work out the bugs.
  4. Test early, and often (ABT) Always be testing.

Keep it simple and use core functions and you will win engagement. This said, let’s start with textual architecture.


2. Few-Shot Prompts - Textual architecture

Document the screenplay, then roll the film
Anytime I begin a new project, it’s pertinent to get as much information as I possibly can about the users of this Software. Put myself in their shoes. This helps humanize the data. Snapping screen caps of the ui in action also help contextualize things. Using few-shot learning, I modeled contract data into ui object layouts.

I usually use Apple Notes to connect thoughts, research, and compose ui callouts.
I usually use Apple Notes to connect thoughts, research, and compose ui callouts.

3. Navigation

Taxonomy, Open Card Sort, Closed Cart Sort then Tree-testing
Your mobile navigation should be quick, easy to use and well-tested. Absence of user testing, I draw competitive analysis or white papers based on Evisort vertical.

Some notes to keep in mind:

  • Evisort mobile users crave seamless access to accurate and up-to-date document filters.
  • The app's navigation must empower Evisort clients to excel in managing contractual details, leaving no room for oversight.
  • Prioritize spacious, easily tappable elements to avoid frustrating mis-taps during critical tasks.
  • Ensuring backward compatibility is crucial—a quick exit with close buttons and maintaining context amid multitasking is vital on mobile.
  • Enable swift uploads and parsing for a smooth, efficient workflow right from the start.

Diagramming:
After getting some textual architecture and navigation global-sets onto the notepad, I then diagram.

Here is why:

Creating a diagram based on existing screenshots from the Evisort website is a strategic move in my opinion. While direct access to user tests or tree-tests would have been ideal and my go-to strategy, leveraging the current taxonomy offers a strong starting point to architect the mobile interface. Adhering to the established structure maintains consistency and acknowledges the team's expertise. Simplifying this taxonomy for mobile without unnecessary changes respects the existing innovation while adapting it for a mobile context.

Diagram architecture 1.1

Diagram of app with labeled taxonomy
Diagram of app with labeled taxonomy

Diagram architecture 1.2

Diagram of mobile app proposal - using bottom bar and tabs
Diagram of mobile app proposal - using bottom bar and tabs

Level 1:
{Primary-navigation}
The Primary navigation should almost always be seen, pending the items within this group.

Level 2:
{Secondary-navigation}
The secondary navigation is driven by selections on the primary navigation; thus, it too should be seen wherever primary navigation is seen.

Level 3:
{Tertiary-navigation}
This is a 3rd level of navigation, usually tabs or some other element on mobile that can control a large part of a specified “view”. Similar to secondary nav, this is a roll down from the secondary navigation.

Ultimately, all 3 levels should work together in forming a guide on helping people find what they’re looking for without needing to tap “search.” I am not making a google app, search should rarely be used if we do this thing the right way.

What can be incrementally improved, for a mobile experience?
I believe that its much simpler to redesign an existing application. In lieu of curating Evisort existing app, I then look for anomalies that fall outside of standard navigational taxonomy practice, these outliers are what usually bloats a navigation. Again, I am assuming this note below. I want to get things wrong so testing can reveal what should be right about all of this. You may be similar to me, in that seeing how users navigate the app, gets my idea engine going.

For navigation anomalies, consider the following:

Navigation anomalies: Two expiration labels on two levels of navigation.
Navigation anomalies: Two expiration labels on two levels of navigation.

On the primary navigation we have Expirations, which also appears on the secondary navigation. This is an anomaly. Usually we do not repeat labels on a navigation because it is redundancy of information, which leads to user confusion. 

I'm thinking about a few things, but they might be off:

"Are these Expirations specific to this dashboard?"

"Does the primary Expirations section cover all expirations in my app?"

"How about archived Expirations? Can I access all of them from this dashboard?"

"Which contracts top the list for expiry in the data table below? Do I need to sort to find this?"

The goal is to display key contract information quickly; clauses, vital data, extracting key business intelligence that the Team can action on.

More Button
The more button houses global navigation. This must be tested thoroughly, to satisfy users expectations.

0:00
/0:12

The More button - Allows you to hide secondary features without using a hamburger menu

  • Tapping "More" takes you to an entirely new screen
  • This screen functions as an alternate menu with supplemental options
  • Takes advantage of the extra screen real estate for menu links
  • Easier to scan and visually separate from main navigation menu
The more button houses global navigation. This must be tested thoroughly, to satisfy users expectations.
The more button houses global navigation. This must be tested thoroughly, to satisfy users expectations.

The same thoughts are highlighted into the prototyping experience.

What if you used a more button to house ancillary services for the Evisort mobile experience? Addendum to this: would always conduct tree testing when approaching a mobile experience for getting the taxonomy to meet what people expect on mobile.
What if you used a more button to house ancillary services for the Evisort mobile experience? Addendum to this: would always conduct tree testing when approaching a mobile experience for getting the taxonomy to meet what people expect on mobile. 

Navigation Bottom Bar:
The bottom bar gets to the core functionality of this application—right where users need them:

  • Dashboards

  • Documents

  • Search

  • Analyzer

  • Upload

The bottom bar with Dashboard, Documents, Search, Analyzer, and Upload—right where users need them.
The bottom bar with Dashboard, Documents, Search, Analyzer, and Upload—right where users need them.

I think this lineup can be pragmatic, placing essential features within instant reach for efficient use. Let’s skip the fluff: practical info beats fancy visuals in mobile UI.

Clarity over icons, always. Never pair just icons and no text. Plus, with zero ui now here, this will help alleviate pressure on “disambiguating” icon-only designs. Pair icons with text, creating a powerful effect on training users on pattern recognition of their most used functionality within your application.

Humane AI Pen example of zero ui that I find very exciting
https://mashable.com/article/humane-ai-pin-futuristic-features 

4. AI-Driven UI

I've gathered numerous insights from successful mobile applications used by leading global brands in software, e-commerce, and services, resulting in millions of interactions and increased revenue. However, let's dive straight into the exciting part: the AI-driven UI. Take a look:

Mobile interface details

Follow a pattern and be detailed on mobile interfaces. If your indicators are Circles, then use circles. Do not mix and match because something looks good. Cohesion helps form a brand that is scalable.

Follow a pattern and be detailed on mobile interfaces. If your indicators are Circles, then use circles. Do not mix and match because something looks good. Cohesion helps form a brand that is scalable.
Follow a pattern and be detailed on mobile interfaces. If your indicators are Circles, then use circles. Do not mix and match because something looks good. Cohesion helps form a brand that is scalable.

Data Table on mobile should be Cards

I want your users to enjoy using your app and not feel like their on tinder or excel.

🤓 Nerdy user experience explanation on this (since I am a nerd)

I am a nerd so I will give you the ux nerdy explanation on this: card-based layouts offer the advantage of displaying information more comprehensively at a glance. That is, a quick look. When comparing multiple rows or items simultaneously, cards can provide a quick overview without requiring excessive scrolling. This layout allows users to easily compare elements side by side, aiding in swift decision-making or analysis without the need for continuous scrolling.

Original Cell of information:

Data Card of same information, on mobile, nothing is truncated except the file name:

Data tables on mobile can be engineered as a card, to help users read all information without any need for scrolling.
Data tables on mobile can be engineered as a card, to help users read all information without any need for scrolling.

Data visualization - Vertical Scroll of Bar Chart

Desktop: Current Bar Chart

See Key Contract Data and Vital Trends Instantly with Intelligent Dashboarding
See Key Contract Data and Vital Trends Instantly with Intelligent Dashboarding

Mobile: Users can see other charts, by swiping right or left.

0:00
/0:06

Data visualization - Vertical Scroll of Bar Chart

Sticky header on navigation - keep people in context
Users can maintain context of their work journey to know what screen their on by having a fixed header in place

0:00
/0:06

Sticky header on navigation - Users can maintain context of their work journey to know what screen their on by having a fixed header in place

Ai-Driven tooltips - Enhance your onboarding
Don’t listen to those UX purists who go on and on about how an intuitive ai should be invisible, blah, blah. Nonsense. Train your users. Use tooltips when needed. Doing so will create strong information scent and get people on your app to self-serve when navigating throughout multiple workflows.

0:00
/0:13

A tooltip guides you through onboarding. After tapping 'x,' that message won't reappear. It's linked to your credentials, not just cached sessions. This prevents repetitive pop-ups on your mobile app.

Set your filters - focused inputs leveraging native OS functionality
Filtering on mobile - use modal sheets and page-takeovers to help people stay focused on tasks.

0:00
/0:12

On mobile devices, use modal popups and full-screen views to keep users engaged with key tasks.

Full Video of mobile demo
Mobile demo of sample Evisort mobile app.

0:00
/0:39

Full demo of Evisort mobile application sample

5. Invitation to collaborate

That’s about it. If you have a similar use-case or work with the Evisort Product Team, would love to hear from you. Did this case study help you? Have a similar use-case? I would love to help in any way I can with your Web app. Let's talk.

Spread the word