Posted by

Bilal Karim

on January 28, 2019

Team

Design

Share to


More Posts...

Designing Enterprise Products

by Bilal Karim | January 28, 2019

As product designers, building enterprise products isn’t much different from building consumer products. Our goal should remain universal. That is, to focus on the user by helping them achieve the desired outcome through your product or service. Essentially, your product or service needs to provide added-value. For consumer products, this could mean connecting a job seeker with local employment opportunities. For enterprise products, specifically at Rubikloud, it means leveraging cutting-edge AI techniques to help retailers optimize mass promotions and provide their customers with true 1:1 offer recommendations.

Building products at Rubikloud is truly a collaborative and iterative process. Based on client needs, our teams — ranging from Data Science to Engineering to Sales — scope new product requirements or existing feature enhancements. From there, the Design team takes over by starting with the creation of wireframes and high-fidelity prototypes, which are evaluated between the Design and Product teams.

Rubikloud recently kicked off a new product development cycle as part of our Price & Promo Manager product. Although product development is a constant process, below are a few insights while building enterprise products for our clients from the Design team’s perspective.

Get prototypes in front of users as early as possible

Our Design and User Experience (UX) Director has set up a rapid, unique, and efficient system for producing high-fidelity prototypes using Bootstrap Studio and Rubikloud’s Design System. Our prototypes are essential among teams and clients for gathering feedback as early as possible; it often guides the final UX that gets rolled out. Prototypes are typically exported and distributed as static HTML/CSS/JavaScript files that can also be run locally. This is especially great for our teams that are on the road, or when they have client meetings where internet access can be an issue. This form of rapid prototyping is exactly what led to significant design changes in the current sprint based on early feedback from Rubikloud teams.

Show the user the entire workflow in prototypes

When building prototypes for user testing or for product development sprints, it is important to showcase the entire workflow, from point A to point B, which will help the user achieve their desired outcome. At the end of the day, prototypes need to tell a story. This is crucial, and it is important not only for the user but also for teams within Rubikloud so that everyone is well-aligned. It is simply not enough to show a set of screens, and then verbally indicate to the user as to what will happen next. For example, when an action needs to be executed by the user, it is better to show them that the action is being executed in the user interface (UI) itself.

Respect users’ prior technical experience

During this new product development sprint, the design of the initial UI was completely different from what will eventually be shipped into the production version of the application. During the preliminary stages of design, different UI versions were experimented with, such as a sidebar, to complete a certain user task. The sidebar contained ‘actionable cards’ that would help the user activate a promotion. Although it worked well initially and made the application more interactive, there were doubts of whether it would work in the long-term after several rounds of internal user testing. This is because of two reasons: (1) the sidebar restricted access to items as the list grew longer, which meant they would not be visible in the viewport (see Figure 1). Since the purpose of this tool was to let the user explore different variations of a promotion, the sidebar had the potential to get crowded with too much information.

Optimize - Design Concept 1Figure 1 – Sidebar panel containing actionable cards to active a promotion.

(2) There would be a learning curve for the user on how to use this sidebar. This actually is the most important reason to keep in mind and set the path for a better version of the application’s UI design. It should be noted that our users mostly work in other enterprise products, such as Microsoft Excel, and are well-versed in them. In order to make sure there is a minimal learning curve for them, we tried to borrow some of the data structure capabilities and functionality from Excel tables — we didn’t lose any interactivity either (see Figure 2). In the end, tables represented a tabular, cleaner method of viewing and interacting with data, whereas the sidebar utilized a card system that became too convoluted.

Optimize - Design Concept 2Figure 2 – Replacing sidebar panel with a combination of a modal and a table to activate promotions.

Add motion to guide the user

Motion should feel natural, not forced in digital products. Since the creation of a promotion is alike to completing a form, we introduced subtle transitions to guide the user during the process and help them navigate through the creation of a promotion. Forms can become long and tedious, so it is best to break them down and introduce elements section by section. No doubt, adding motion to the UI also adds a little bit of personality, expressiveness, and gives the application a modern feel (see Figure 3).

Optimize - Adding Motion to UIFigure 3 – Using motion to guide the user to complete the creation of a promotion.

Overall, our work as designers is never done. After the product has shipped, we keep evaluating how it is being used in order to provide constant improvement to refine the user experience. The takeaway message here is that design is an iterative process. We have to keep trying and keep iterating based on user feedback to find and ship the right solution. If you’re interested in building world-class AI products like we do at Rubikloud, check out our Careers page for opportunities.