Case Study: Client Portal Design for Edge AI in the Cloud | NetPro International LLC

What is Customer Portal Development?

At its core, customer portal development refers to the process of creating a secure digital environment tailored to the specialized needs of a company's clients that simplifies and facilitates interactions between professionals and offers a suite of tools, resources, and functionalities in a single place.

In software and tech-centric industries, the client portal usually provides tools for coding, version control, collaborative development, documentation access, and more. It acts as a hub where the client can actively engage in the development process, monitor progress, and provide real-time feedback.

Customer Portal Development: The Usual Step-by-Step Approach

User and Business Insights

It all starts with gathering detailed requirements that are typically collected during interactive workshops or stakeholder interviews to provide insights into the objectives, pain points, and expectations of the target audience.

Stakeholder interviews shed light on the strategic goals and visions of the client. What do they hope to achieve with this portal? What metrics do they want to impact? What functionalities are critical to them? Answers to these questions help shape the direction of the project.

Another common method for gathering insights is the development of user personas. These are fictional representations of the portal's target audience segments with outlined motivations, behaviors, and personal challenges that help UI/UX specialists create client portal designs that are both effective and relevant to the target audience.

Planning and Information Architecture

Once the foundational knowledge is in place, the focus shifts to planning and information architecture. This is where the structure of the customer portal begins to take shape.

It starts with user flows mapping, which involves detailing how users will navigate through the client portal to complete specific tasks. By streamlining these flows, developers can optimize the user journey, ensuring that it's intuitive and free from unnecessary complexities.

Furthermore, feature prioritization ensures that critical functionalities are addressed first, aligning with both user needs and business objectives.

Customer Portal UI/UX Design Foundations

The aesthetic and functional design of the portal stems from wireframes and mockups — low-fidelity representations that provide a visual blueprint of the portal's structure and layout.

While wireframes are more about layout and structure, mockups delve deeper into the client portal design details, such as color schemes, fonts, and element positioning. Both are critical for aligning the portal's design with the brand's identity and ensuring consistency.

Customer Portal Development Tools

With a clear vision in place, the development phase kicks off.

The first crucial task is selecting the right development tools, frameworks, and platforms. These choices lay the groundwork for the customer portal development and can determine many aspects of its future: how scalable it is, how well it performs under varying loads, and how easy it is to maintain and update in the long run.

Considerations When Choosing Tools

• Project Scope and Complexity

  Is the portal meant for a small group of users or a vast audience? A smaller project might do well with simple tools, while a more extensive and intricate project might need advanced solutions.

• Integration Capabilities

  Does the portal need to integrate with other existing systems or third-party services? Tools that offer seamless integration capabilities can simplify this process.

• Customizability and Extensibility

  Some projects require a lot of custom functionalities. In such cases, platforms that offer high customizability and can be extended with plugins or modules are more suitable.

• Performance and Scalability

  High-traffic portals require tools that can handle a large number of simultaneous users without compromising on speed or performance.

• Budget and Cost

  The cost of development tools, both initial and ongoing (in terms of licensing or subscriptions), should align with the project's budget.

• Support and Community

  Tools with an active community and robust support can be invaluable, especially when encountering challenges or seeking optimizations.

Examples of Development Tools and Platforms

• Content Management Systems (CMS)

  WordPress, Joomla, and Drupal are popular choices that offer a lot of flexibility and extensions.

• Dedicated Portal Platforms

  Liferay and Microsoft SharePoint are examples of platforms specifically designed for portal development.

• Web Frameworks

  Depending on the programming language preference, one might opt for frameworks like Django (Python), Ruby on Rails (Ruby), or Express (Node.js) for a more custom build.

• Front-end Frameworks

  Angular, React, and Vue.js are popular choices for creating interactive and responsive user interfaces.

The choice of a development methodology, be it Agile, Waterfall, or a hybrid approach, will also shape the customer portal development. Each methodology has its pros and cons, and the best fit often depends on the project's complexity, the team's expertise, and the client's requirements and feedback mechanisms.

Testing and Feedback Incorporation

Before any launch, extensive testing is essential. User Acceptance Testing (UAT) is a commonly employed strategy in customer portal development where end-users try out the portal in a controlled environment. Their early feedback helps designers address any hiccups, glitches, or pain points users encounter before launch.

Deployment and Post-launch Adjustments

The moment of truth arrives with the portal's deployment. But it doesn't end there. After the launch, close monitoring is essential to identify any unforeseen issues or areas for improvement.

Immediate post-launch tweaks, based on real-time user interactions and feedback, can greatly enhance the portal's performance and usability.

What Set DeGirum Apart? Translating a Unique Business Model into Client Portal Design

A Truly Unique Client

While many technology companies are 'unique,' DeGirum stands apart in a category almost unto itself. They exist in the vanguard of edge AI innovation, offering an array of specialized products and services that extend from software ecosystems to finely-tuned hardware components. Their target audience isn't the average consumer but other businesses in a rapidly evolving tech landscape, each with highly specific requirements and constraints. This highly technical realm necessitated an entirely new approach to both the client portal design and the website design.

The Limitations of Conventional Wisdom

Conventional wisdom and best practices in our field are often aimed at more common or universally understood business models. They guide you on how to create intuitive user flows or easy navigation but are not particularly tailored for an enterprise whose product offerings include a cloud-based AI testing environment and a hardware component optimized for edge AI applications. The guides didn't have a chapter on 'How to Design for a Company that Streamlines AI Development in the Cloud,' so to speak.

Immersion for Insight

To acquire a full understanding and context of the landscape we were operating in, we immersed ourselves in DeGirum's complex ecosystem. We had deep-dive sessions with their team, researched technical documentation, and even dabbled in some of the PySDK scripting to grasp the breadth and depth of their services, seizing every opportunity to gather insights.

Implementing Business Insights into Client Portal Design

We complemented the technical immersion with a fresh look at the business itself — what problems was DeGirum really solving for its customers? How did their offerings fit into the broader market, and what set them apart? It was essential to translate this business model into design choices that reflected not just the complexity but also the utility of what they were offering. To this end, we relied on a combination of heuristic evaluations, wireframing, and iterative prototyping, tailored to meet the specific needs and constraints set by DeGirum.

Weaving DeGirum’s Identity into Client Portal Design

To fully understand the intricacies of the customer portal development we did for DeGirum, it's essential to dive into the unique position that DeGirum holds within the broader landscape of the Edge AI sector. DeGirum distinguishes itself by offering targeted solutions to fully optimize the whole cycle of Edge AI planning, hardware selection, ML model, and application development and deployment.

Their standout services, DeGirum Delight and DeGirum Device Farm, serve as powerful platforms that help businesses test and refine ML models across diverse hardware configurations. DeGirum Delight is a cloud-based platform that enables companies to save both time and resources by experimenting with ML models and applications before rolling them out on actual hardware.

The DeGirum Device Farm goes a step further, providing a tangible space accessible via the cloud where ML models can be tested on various hardware options. This opportunity for real-world testing offers invaluable insights into model performance on actual hardware and informs further optimization and device selection.

Integrated into both of these platforms is DeGirum's PySDK, which enables developers to code in a hardware-agnostic manner. This frees the development process from hardware-specific limitations and allows for versatile testing and deployment strategies.

DeGirum also offers its own hardware solution, ORCA, an AI accelerator that stands out for its ability to efficiently handle pruned models, maximizing computing power directly at the edge. With built-in DRAM support, ORCA enables quick data transfer rates. It also features a flexible and power-efficient architecture. Its scalability offers businesses a straightforward path to scaling up their AI operations.

DeGirum provides a truly comprehensive, end-to-end solution covering the entire spectrum from software to hardware, providing every tool to businesses looking to leverage edge AI in their operations.

Website and Messaging: Translating Complexity into User-Friendly Experience

Understanding complex technology shouldn't be an obstacle course. Our challenge was to design a website that clearly communicates DeGirum's intricate services and products. Here's how we did it:

The homepage opens with an animated tagline, "Making Edge AI Powerful Simple." The words "Powerful", ”Private”, "Simple", and “Scalable” dynamically alternate, capturing the essence of DeGirum's work. It is a statement of DeGirum's approach to edge AI development — bringing new value to edge AI solutions.

Under the tagline, a descriptor outlines DeGirum's key focus areas: Cloud Platform, Edge AI development, and the simplification of the development cycle. This brief snapshot aligns users with the company's core mission and services, setting the stage for a visually captivating 3D animation. Created using WebGL technology, which allows for dynamic 3D graphics to be rendered directly in web browsers. The animation features particles that converge into a segmented 3D orb labeled 'Software,' 'Hardware,' and 'Models' — symbolising a three-fold yet homogenous nature of DeGirum’s platform and offering a quick, visually engaging overview of DeGirum's integrated approach. Together, the descriptor and the WebGL-powered animation serve as an elegant, unified introduction to DeGirum's complex yet accessible offerings.

Next, the article features a section comparing traditional edge AI methods to DeGirum's unique approach. An animated x/y chart quickly grabs the reader's attention, demonstrating how DeGirum's method eliminates the need for separately coding for and testing on various hardware configurations. Following the chart, a series of text cards further breaks down these advantages, emphasizing efficiency, time-savings, and cost-effectiveness. Both the chart and the cards convey DeGirum's value proposition clearly and interactively.

The Advantages section offers icon-accompanied cards that highlight DeGirum's differentiators. Each card is a promise of value, helping users understand how DeGirum stands out.

Visually appealing diagrams and concise messages work hand-in-hand. The diagrams serve as an aesthetically pleasing and intuitive guide through DeGirum's diverse offerings, while the messages directly communicate the unique value of each feature. Together, these elements create a clear and compelling narrative that makes it easier for users to understand the full scope of what DeGirum provides.

Finally, we have a results section that underscores the tangible benefits of DeGirum’s offerings. It's a summation of everything that makes the DeGirum DeLight Platform great and can steer users away from common pitfalls in edge AI development.

Each of these elements was designed with the user in mind, ensuring that complexity doesn't become a barrier to understanding. They work harmoniously to provide an informative, easily digestible presentation of DeGirum’s proposition.

The Client Portal Design: A Seamless UX Tailored to User Needs

The customer portal is where the rubber meets the road — where users directly interact with DeGirum's complex technologies. Our client portal design strategy was focused on streamlining this experience, offering a level of intuition and accessibility that is often lacking in tech-heavy domains. Below are the key areas we honed in on:

Dashboard

The dashboard is designed to be the operational center of the customer portal. Here, users can see an at-a-glance overview of their interaction with DeGirum's platform. It displays essential metrics such as the number of inferences currently running, total computing time used, cloud storage occupied, as well as financial details like the current balance and the next billing date.

When creating the client portal design, we recognized that too much information could be as problematic as too little, so we've been judicious in curating the type of data that appears here. The aim is to prevent information overload while still giving users a comprehensive snapshot of their account activity. To make the interface more dynamic and engaging, the orb and the number representing the current inferences in action subtly animate, ticking up or down as new inferences are initiated or completed. This small but impactful detail keeps users cognizant of real-time changes, adding an extra layer of interaction to the portal.

Inference Window

A unique feature of the portal is a dedicated window for running AI inference. In our specific example, the machine learning model recognizes a car. Users can upload a file, and within moments, the system provides the inference outcome along with the time it took to reach that conclusion. It delivers the necessary information, which allows users to fine-tune their machine learning models with precision.

Model Upload Interface

We've streamlined the process of uploading new AI models to the server by breaking it down into two separate functions, each delineated into seven clear steps. One function allows for the creation of a new model by uploading a zip archive, while the other enables users to compile a new package from an existing model file. Both routes are designed to be intuitive, guided, and error-tolerant. The segmentation optimizes the workflow for professionals who are versed in ML model management, making the platform even more efficient and user-friendly.

Overall Client Portal Design Aesthetics and Interactions

When it came to the overall design of the portal, we didn't take shortcuts. After extensive research into existing administrative customer portals, we decided to chart our own course, in line with the brand's ethos. Aesthetically, the portal echoes the design language of the corporate website, offering a consistent visual experience across different touchpoints. A signature pattern graces the background of every window, adding a layer of brand consistency. The front-end development was done using Vue and Nuxt, and underwent rigorous testing to make sure each component functions as intended. Additionally, we've infused the design with subtle animations and micro-interactions. The design choices contribute to a sense of tactile satisfaction, making the use of the portal an enjoyable experience without overwhelming the user with excessive flair.

A Closing Note

Understanding what businesses like DeGirum have to offer and successfully building upon that foundation serves as the true test of a designer's acumen. Conventional, tried-and-true practices can offer a starting point, but they don't necessarily fit when the task involves groundbreaking technologies and specialized client needs. And when traditional guidelines aren't enough, it's an opportunity to go beyond the basics, to turn complexity into clarity, and to elevate the user experience — showing that, sometimes, the most intricate challenges bring about the most inspiring design solutions.