Apcera Console
A guided cloud configuration management tool

Project Background

Apcera is a enterprise cloud container management platform that helps easily monitor and orchestrate cloud operations in a secure manner. The Installer is a tool that enables users to install the Apcera platform, and configure their cloud infrastructures.


Team - 1 designer, 5 front end engineers, 1 product manager
My role - end-to-end UI/UX design, style guide, design process, front-end engineering

Apcera Installer in action

   Installer live video demo (last update)

Goal

Reduce a complex command line tool (CLI) to a step-by-step guided visual installer (GUI)

Our users
  • New clients who are unfamiliar with the product
  • Clients who already installed the product and want to make configuration changes
  • Clients who want to quickly check the cluster status

  • In the process, we also actively define the differences between CLI and GUI users

  • CLI users: expert who are already familiar with product; sprint through the configuration
  • GUI users: novice who need step-by-step guidance through the decision making process
  • Key Challenges

    Leverage graphic interface for information
  • Consistent page structure helps users recognize where to look for cues on the page.
  • Separated action and navigation allows users to focus on completing the task.
  • Convert existing prompt to graphical interfaces
  • Present complex prompts in a way that helps user make better and faster decision.
  • Here's a interaction mock up I created for zoom map selection:

    See the Pen Scale to center of element by Tinnei Pang (@tinneipang) on CodePen.


    Progress navigation bar
  • Effort-proportional progress navigation helps users set expectation.
  • Pages are categoried to related topic to help quick navigation back to the page.
  • Input fields states and use cases
  • Provide clear feedback indicator for each state of an input field.
  • Workflow

    One of my responsibilities was to define a process for the UI team. The project was seen as an opportunity to redefine and establish a product style guide for the company.

    0. Understanding product requirements
    Tools - whiteboard, Google Doc
    In the first few weeks, the project team and I brainstormed together to review the current command lines in order to best fit them into screens.
    1. Ideation, low-fi prototype
    Tools - pencil, paper, sticky notes
    With the list of commands, I began rapid prototyping and initiated design feedback session with the UI manager and the CLI team. Involving cross functional teams helped define the overall project scope and ensured we were all on the same page.
    2. Wireframe, define information achitecture
    Tools - Sketch, Figma
    After defining the basics with the team, I began wireframing on Sketch. Wireframing focuses on high level details for information flow without dwelling on the specific visuals.

    We used Figma to facilitate cross team feedback, and asked reviewers to add notes regarding the user flow.
    3. Interaction design, Documentation, User testing
    Tools - Sketch, Figma, Invision
    With continuous feedback, I did several iterations on the wireframes. We also set up design documents for version controls.
    Once we reached consensus across the teams, I added interactions with InVision. For each specific task, we sent out an Invision Link to gather feedback. This was deliberately tailored to focus on one task per feedback session.
    Our product manager and I also initiated an internal feedback session, inviting all teams to participate.
    4. Design handoffs
    Tools - Sketch, Figma, Invision, Zeplin
    Confident that the essential features were mature in the design, we were now ready for implementation. I worked closely with the product manager and the UI manager on task prioritization and created design handoffs for front end engineers. This ensured the design was implemented to accurately match the design according to the specified timeline.