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?
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?
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)
- Don’t complicate it, simplify it.
- I am not my user.
- Prototype as quickly as possible to work out the bugs.
- 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.
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.
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 architecture 1.2
The Primary navigation should almost always be seen, pending the items within this group.
The secondary navigation is driven by selections on the primary navigation; thus, it too should be seen wherever primary navigation is seen.
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.
Navigation - anomalies
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:
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.
The more button houses global navigation. This must be tested thoroughly, to satisfy users expectations.
- 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 same thoughts are highlighted into the prototyping experience.
Navigation Bottom Bar:
The bottom bar gets to the core functionality of this application—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
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.
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 visualization - Vertical Scroll of Bar Chart
Desktop: Current Bar Chart
Mobile: Users can see other charts, by swiping right or left.
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
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.
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.
Full Video of mobile demo
Mobile demo of sample Evisort mobile app.
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.