CISCO

UX Design 2018

GOAL

  • Understand painpoints within App Profiles experience on Cisco CloudCenter.

  • Redesign UI/UX of App Profiles experience to enhance the overall experience.

CONTEXT

  • Worked on project independently with the guidance of mentor and manager.

  • During 3 month internship.

  • Cisco CloudCenter is a multi-cloud management tool that allows users to manage and deploy various apps, regardless of their topology.

  • Tools Used: Expert Interviews, Sketch, Invision, KeyNote.

FINAL DELIVERABLES

  • Insights based on 3+ rounds of expert interviews.

  • High fidelity prototype demonstrating refreshed UI (based on existing library) & UX for App Profiles experience.

EXISTING FLOW

  1. System Admins create customized services.

  2. App Architects model apps using these services and out-of-the-box templates (this is the experience I refreshed).

  3. Web apps are deployed.

Existing flow outlining roles involved and main screens. 1. System Admins create customized services. 2. App architects model apps using these services and out-of-the-box templates. 3. Web apps are deployed.

Existing flow used by App Architects specifically. (from left to right App Profiles screen, Templates screen, App Modeler screens)

RESEARCH

I conducted both preliminary research and expert interviews.

First I researched app architect roles online. Then, I conducted 3 rounds of expert interviews with 5 stakeholders with backgrounds in engineering and sales. I asked questions about the different roles involved in the flow, the most frequent use cases + app topologies, and competitors.

I gathered the following key insights:

  • Most app architects did not use the pre-existing services that CloudCenter provided.

  • The blank canvas template was used 99% of the time, over 20+ others.

  • There were 3 commonly built topologies.

  • Many frustrations expressed were related to Services, outside of the scope of my project.

  • The 3 panel layout and drag-and-drop interaction in the experience was widely liked.

KEY FRUSTRATIONS

I categorized key frustrations by role and by low hanging fruit vs. UX overhaul.

Graphic outlining key frustrations by role and by whether solutions were low hanging fruit vs. UX overhaul.

SKETCHES

I mapped the key frustrations to the screens and created various options for possible solutions.

A visualization of where key frustrations were located on the existing App Modeler screen.

App Modeler Layout Option 1 (3 panel layout)

App Modeler Layout Option 2 (full screen)



MEDIUM-FIDELITY SCREENS

I coupled each frustration with a more flushed-out solution idea. Then I got feedback.

Because there were many vocalized frustrations, I sought feedback for which to focus on. Feedback indicated I should re-design the canvas experience and app profile/template selection flow.

There was not much room to move services onto canvas. The 3 panel layout could be expanded to take the full screen, allowing app architects to take advantage of more space.

Properties in the right hand panel were not organized. A possible solution was organizing them by order of usage by app architects.

There was no way to find a specific service without scrolling for a long time. A solution could entail implementing a service search.

There was no way to manage different iterations of app topologies. A possible solution could be implementing drafts to allow for version management.

The existing app profiles were stored in an unorganized fashion. A solution could be organizing them by what kind of app they were.

1 out of 20+ templates was used most frequently by app architects. To waste less of their time, a solution could be taking a user straight to that template or highlighting that one above others.

HIGH-FIDELITY PROTOTYPE

My final deliverable was a high-fidelity clickable prototype.

Before and after, comparing user flow.

Before and after App Profiles screen

Before and after Templates screen

Before and after App Modeler screen

Key improvements in the new design related back to the key insights I discovered:

  • 3 most commonly used templates highlighted instead of previous 12+.

  • Real estate optimized by expanding giving users a full-screen canvas.

  • Content organized in a way that is inline with a user’s task flow.

  • Implement service search.

  • Updated UI that was in sync with other recently updated CloudCenter services.

View Prototype >

IF I COULD DO THIS OVER AGAIN...

  1. I would ask app architects about their key frustrations (rather than just stakeholders) with the tool to validate my research and designs with actual users.

  2. I would create more iterations of low fidelity designs to allow for more possible solutions.

  3. I would have gathered data on the existing designs like time for task completion and user satisfaction. I would then gather the same metrics using the new design, and compare the two sets of data to gauge success of the new designs.

 

OTHER WORK: BuildZoom / StarButter / Dayli