Blog

Developer Productivity via UX in Apprenda’s Enterprise Private PaaS

Avatar

By Atos Apprenda Support

At Apprenda, we have an amazing technology platform and we’re big believers in unlocking value by making things as usable as possible. Achieving world-class usability is an iterative process. Our first user interface was just that – an interface. We saw an opportunity to improve the interface and make it a genuine, easier–to-use experience. Our goal was to help developers get their jobs done more quickly and with less confusion. Although enterprise software is notorious for having terrible user experiences, there is no real reason for it other than it’s been a historically neglected part of writing enterprise software.

The Apprenda private PaaS was built upon high value and depth, providing our customers with many sophisticated features that simplify their day-to-day tasks. After the strategic inclusion of Java compatibility, and the constant addition of new tactical features, in order to match the quality and simplicity that our platform itself provides it became essential to enhancing our user experience.

As a company, we decided to make our 4.5 release the genesis of a UX revamp and a better way for us to manage changes to the UX going forward.

In addition, there were three main functional goals:

  1. Create layout flexibility to integrate functionality from our Account & SOC portals’ into the same structure as the Developer portal for seamless interaction
  2. Enhance the experience of task workflows
  3. Modernize the aesthetics and improve our brand alignment

Obviously, the question becomes “how do you plan on tackling these goals?” There were three focal points for our User Experience Design update: Information Architecture, Interaction Design, and Visual Design. I broke down our UX revamp into these three buckets which address and accommodate the three functional goals.

Information Architecture

In a web portal like Apprenda’s, organizing data in a coherent way was important to improve the developer experience. To begin the undertaking, the first step was learning all high-level tasks for the three portals and sketching out ideas for a sitemap that could accommodate all three portals. I focused on our developer portal and visually mapped out the task workflows. If you want to understand how “tangled” an existing IA can get, just use string! The image below is a string map showing each page, and subsequent step taken, to create a new application on Apprenda’s PaaS. It appears complex, but it provided a very linear workflow. Having such a linear workflow forces a single “success path.” Discovery of offshoot workflows and tasks require cumbersome steps with “bread crumb” navigation. This makes for a less than optimal experience.

Implementing a hierarchical architecture pattern, allowing specialized structures to enhance intuition and flexibility of features, solved this issue. Through this new architecture, we could achieve productivity without force fitting a model on developers.

Interaction Design

Extreme effort on software UX is exerted in the “interaction design.” After choosing a structural concept we felt was best suited to our long-term product goals, my next step was to begin detailed wireframe concepts for each platform task workflow.

Throughout the wireframe process, I focused on optimizing the following main issues from the original interface:

  • Reducing the number of steps to complete a task
  • Providing easy-to-access information on workflow progress
  • Providing a clear path to task completion
  • Surfacing simple, high value tasks that were hard to find in the old interface

I focused my designs on improving six psychological UX attributes: Intuition, Productivity, Simplicity, Flexibility, Aesthetics, and Reliability. I performed a user study to effectively rank these qualities by importance and used that to assemble the overall design. For each attribute, I’ve explained the related enhancements that were made in the portal:

  1. Intuition
    • The hierarchy information architecture pattern provided high visibility to all tasks at hand.
    • It’s now easier to recognize where you are in the portal, what app you are working in, and what version and stage your app is in.
  2. Productivity
    • Tasks are completed with fewer clicks, thereby shortening required steps.
    • The hierarchical structure navigation grants access to any task page from any other task page in the app without “breadcrumb surfing” through the site, as well as quick-linking to all other apps in your portfolio.
  3. Simplicity
    • Combined workflows into related task pages and tabs.
    • Reduced the information content that over-crowded pages to simplify workflows for experienced users. For new users, or those new to a particular step, there are guidelines for extra assistance if you hover over “?” icons.
    • Added a step-by-step wizard for the app creation process.
  4. Flexibility
    • The hierarchy structure allowed for more features to be introduced seamlessly without hampering the platform, while maintaining fewer clicks and an intuitive workflow.
  5. Aesthetics
    • Modernized the aesthetics for improved brand alignment and visual appeal, while enhancing a sense of familiarity.
  6. Reliability
    • We now maintain “consistency of action” commands. The structure and interaction across all platforms will be consistent and help tips, or the support center, to always provide answers when they’re required.

Visual Design

The last piece of the puzzle was updating the visual design. As I’ve learned, vision trumps all other senses and is the most direct link to perception; additionally, aesthetically pleasing designs more often are perceived as being easier to use. I wanted to remain with a minimal, flat design in order to enhance the perception of ease and productivity.

I increased the icon-use to simplify workflows. Icons are symbols to represent entities or actions, since our brains decipher visuals faster than words. Since certain users occupy Apprenda’s developer portal daily, they will learn these visuals and proceed through their processes quicker.

An important goal for me was to begin aligning our visual aesthetic across company-wide assets. It’s difficult, as an enterprise, to gain brand value and recognition when all outward-facing designs varied so greatly from another; this trait increased if you compared departments, as well. Throughout the past year, I also began to participate in Apprenda’s branding design. Not only has it helped to cohesively patch our brand together, but also immersing myself in the marketing team provided me an increased understanding on how we communicate ourselves verbally, which greatly impacted how I turned that into a visual communication layer for the product itself.

Redesigning a UX requires time and iteration. It’s been worthwhile to lead the efforts for the start of the redesign, but the real work remains ahead of us. Moving forward we will continue to enhance the platform, focusing on the six psychological qualities I described earlier as guiding principles. We will be enhancing the UX quarterly with user-tested changes, and leverage a tight feedback loop to deliver a modern, high productivity user experience to enterprise developers worldwide. A by-product of our revamp of our UX 4.5 is that it allowed us to:

  • Improve the speed at which we could release UI changes. Our release process has historically bucketed UI changes with platform changes. To do this, we took better advantage of our new and improved REST API in our beta release, letting us separate the UI from the platform in a better way.
  • Define an iteration schedule for the UX that allowed us to introduce value quickly in a practical way.

These functional changes and improvements to the UX development process make for exciting times at Apprenda, and I’m proud to be a part of kicking-off such an interesting project. UPDATE — Apprenda 5.0 now available:
 

Apprenda-5-0-webinar-REGISTER-CTA-button

Avatar
Atos Apprenda Support