Apptio's Frontdoor

Designing B2B Applications - Frontdoor

Frontdoor is a customer portal to access all of Apptio's IT management tools which houses client-created projects and reports. It not only provides visibility to different applications but also enables the customer admin to configure each application's settings and user access.

However, as the the number of applications increase, and the number of projects created within each application grows, it becomes difficult for users to sift through all that information and quickly find what they are looking for. This was the case with one of Apptio's existing clients and the product management quickly realized that remedial action was needed.

Business Requirements

• Allow Frontdoor customer admin to group projects based on the business requirements and internal team distribution of their organization.

• Provide a descriptive text to go along with the grouping so it can be recognized by all those who have access to the group.

• Give admins greater control over the layout of Frontdoor's homepage and enable them to customize it.

Design Goals

• Provide the right affordances to users which are easy to understand when making groups within Frontdoor.

• Redesign an individual application's tile to accommodate descriptive text and longer application names without truncating it.

• Provide an option between list and gallery view on Frontdoor homepage.

• Clearly identify the different operating environments (sandbox, main, test, etc.) housing the applications within Frontdoor.

User Profile

Kim is her company's Technology Management Admin. She controls user roles, application settings, and tool configuration. She is often the end users' single point of contact within her company when it comes to managing applications and deals with tool-related questions, suggestions, and grievances. One of her responsibilities is to ensure the smooth running of Apptio's products and optimize their usage by her organization.

Kim's User Stories

“As a Technology Management Admin, I want to organize the homepage as per my company’s usage and organizational structure so that all users can quickly browse through the applications to find the right project.”

“As a Technology Management Admin I want to manage my end user's applications using my account so that I am no longer dependent on the the IT Setup team to make those changes for me.”

Rapid Designing

Being on a tight schedule with short deadlines, this project was nothing short of a design sprint. Once the business requirements were communicated to me by the Product Manager and the design goals were set, I began the research and ideation process. I went through some of the applications I use and how it incorporates grouping. For example, I observed iTunes to understand the workflow of creating a playlist. I then scrutinized the steps I take as I go about making a folder in my laptop with files stored in it. With insights from these ubiquitous devices, I was inspired to start with the ideation process.

I started whiteboarding exercises with the Product Manager and a senior designer to come up with a user flow, and evaluated the conceptual level design by creating a paper prototype. Using foldable mockups I figured out the steps Kim will have to take to create application groups and then modify those groups. This helped me discard some of the initial ideas like drag-and-drop, and continue with others that made the minimum viable product.

Low Fidelity Usability Tests

After testing the concept using rapid prototyping I moved on to creating low fidelity digital prototypes. The goal was to highlight the different application environments such as Main, Sandbox etc. on the UI and create interactions for re-organizing the application groups. Each tile could be controlled individually while adding to/removing from a group and modifying its description. The entire group itself could also be edited or dissolved. The group structure was collapsed by default and could be expanded to interact with the individual projects contained within.

I decided to use icons instead of labels for actions like Create Group, Add To Group and Edit so that the interface would have a clean and minimal design. After making the mock-ups shown below I evaluated them with user tests and gathered feedback from both the users and the development team of Product Managers and engineers.

High Fidelity Wireframes

After testing the usability of the first iteration, the final workflow was created. The general feedback was to simplify the controls and make the interface look cleaner. I also got the feedback that the grouping icons weren't readily identifiable and a little more information was needed. However, they were happy with my use of icons instead of labels. An addition was made to the design requirements where users could somehow read the URL of the application/report before actually opening it.

Before presenting the revised wireframes to the stakeholders, I created the following workflow to give them a better sense of the design and the context.

For the second iteration the tile controls were hidden from view unless hovered upon to reveal editing and URL icons. Modals were adopted to complete the task of creating groups and editing descriptions. This was helpful since modals could clearly indicate the character limit to avoid truncating the text. Applications contained within a group had the additional reorganizing functionality where they could be moved about within that environment. List view followed the same information hierarchy as gallery view. The collapsible feature was discarded and all groups were maintained in their expanded state as part of the minimum viable product.

Key Takeaways

Redesigning Frontdoor was the first project I was assigned to as an intern at Apptio. It reinstated the importance of creating a minimum viable product when undertaking product design. With changing business requirements and development limitations it is important to maintain sight of what are the absolute essentials of the redesign project and how much leeway a designer has.

It also exposed me to communicating clearly with Product Managers. Their in-depth knowledge of the tool can sometimes be overwhelming and it becomes important to sift through all the information and keep asking relevant research questions. This project was a good exercise for me to test my researching skills. I felt confident after this to take on more projects with dynamic requirements, short deadlines and gaining subject matter expertise on the fly.