Cisco’s OI Edge
As the lead UX designer for our team, I designed the UI for OI Edge, an application built for clients requiring heightened security on a closed network. I focused on creating a seamless user interface that allowed users to easily monitor and assess the health of their network in real time.
Cisco’s OI Edge application
Cisco’s OI Edge was designed for closed networks. It monitors and reports real-time network status and health. The app provides detailed insights into network performance, including uptime, connectivity, and potential issues, ensuring proactive management and troubleshooting. With an intuitive interface, monitor closed networks and data, receive alerts, and generate reports, allowing network administrators to maintain smooth operations and quickly address any disruptions.
Resources
A six-member team a UX designer, project manager, front and back-end developers, and delivery engineers.
Engagement Type
Enterprise software solution.
Duration
Six months.
Development continues.
My role & responsibilities
For this project, I was tasked with designing a UI for delivery engineers working with closed networking systems. The project manager shared valuable feedback from interviews with engineers, which was instrumental in guiding the design.
My design role
I was the Lead UX Designer for the Cisco OI Edge app, tasked with creating an interface based on feedback from engineers and wireframes provided by the project manager.
My responsibilities
- Designing the Data Manager for handling network data
- Creating the Reports feature for generating and viewing reports
- Developing the Reports Schedule functionality
- Designing the Platform Monitor for tracking API status and performance.
Phase 1: Research
Conducting user research
- Research for Cisco’s OI Edge was based mainly on insights from Cisco’s QBR project.
- The project manager conducted additional interviews with delivery engineers to refine the requirements, ensuring the final design met their needs.
The Problem
Some of Cisco’s clients use closed networking systems for security, requiring delivery engineers to be onsite for troubleshooting. They need an intuitive interface to connect to secure networks, view data, manage reports, and monitor API performance in real-time.
The Challenge
Designing this interface is challenging as it must be powerful and user-friendly, with the advanced functionality needed to diagnose and fix issues on the spot.
The main challenge was to design an interface that performed the following:
- Effectively manages complex network data
- Downloads and runs customized reports
- Provides scheduled reporting capabilities
- Monitors a component’s API status
- Manages component tenants
- Views application configurations
- User management
- Gives alert and notifications
The Solution
User interviews told project managers that users want a product that will have the following:
- Real-time data access
- A user-friendly user interface
- Comprehensive platform monitoring tools
- Manages networks
- Manages network components
- Downloadable custom reports
- Generate reports on a schedule
- Operate within a closed network
Opportunities
- Engineers feel this direction will be more interactive and dashboard-like, giving the user more control and more efficient for the customer.
- This will make diagnostics and reporting more efficient, making what Cisco delivers more valuable to the customer.
- Engineers can stay on-site, making customers feel more comfortable and secure and increasing contract renewals.
Developing the user-Persona
- We used the QBR project’s user persona to guide the design of the OI Edge app, ensuring it met delivery engineers’ needs.
- Through the project manager’s interviews with delivery engineers, they learned key details about why, what, when, where, and how the app would be used.
How, what, when and where
Who is the end-user?
Project managers and delivery engineers engaging with customers onsite.
Why will the user use the app?
Because the app will allow engineers to maintain a clients closed network while remaining onsite.
What will be the user’s end goal?
Maintain and monitor clients’ closed network systems onsite to enhance security and boost customer renewals.
When will the user use the app?
When the engineer is onsite and maintaining the network.
Where will the user use the app?
The engineer will use the app at the clients facility.
How will the user accomplish their goal?
By successfully maintaining the client’s network system with zero security failures.
Meet Keep-His-Cool Kumar
Network Engineer Specialist
Kumar is a Network Engineer and Security Specialist at a Cisco-certified reseller. He performs many activities and works closely with the reseller’s Systems Engineer. He has developed many tools and templates to help him be more efficient and effective.
User-Persona
Customer-Personas
Phase 2: Design process
How I worked through the design process
Approach: The design process involved working with wireframes provided by the project manager and incorporating feedback from engineers. I focused on translating these wireframes into an intuitive user interface.
Conceptualization: I used the wireframes to guide the design of the application screens and their requirements. Incorporating feedback from the project manager, who gathered insights from engineer interviews, I ensured the design met user needs. To enhance usability, I used a traditional header, menu, and body layout, leveraging user familiarity with this structure.
Wireframes provided by the project manager are displayed below.
Reports shows all the customized reports that can be run on the network.
Data Manager displays details about data and its source
Schedule Reports set up when reports are generated.
Platform Monitor 1 monitors a components API system status
Platform Monitor 2 displays the system logs
Manage Tenants manages scripts loaded onto network components
Configure Application displays the application logs on a component
Manage Users gives Admin rights and user information
Phase 3: Solution
Build final prototype screens
Design Details: The final design includes:
- Reports feature for generating and viewing detailed reports
- Reports Schedule tool for automating report deliveries
- Data Manager for organizing network data
- Platform Monitor for tracking network performance
- Manage Tenants for installing scripts to components
- Configure Application for displaying application logs
- Manage Users for managing and displaying user information
Rationale: The design was guided by the wireframes and feedback from engineers. I aimed to create a user-friendly experience that aligned with the specified requirements, ensuring that the Data Manager, Reports, Reports Schedule, Platform Monitor, Manage Tenants, Configure Application, and Manage Users were functional and intuitive.
Here are some of the screens that include key features, it required 62 screens to complete this prototype.
Reports
The landing page was set to “Reports,” which showed all the custom reports used to track and gather data on the network’s different components.
- The navigation was kept to the four primary requirements for simplicity.
- Customized reports were featured in the main body of the page, so users could easily find reports quickly.
- I placed the settings, notifications, and user profile in the upper right corner, where most users naturally look for them.
Launched Report
When launched, the report displays key performance indicators (KPIs) to provide relevant data about the network.
- When a report was launched, it displayed a separate page to reduce screen clutter and keep the content focused.
Data Manager
The data manager displays data retrieved from network components.
- A filter is included to make it easier for users to quickly find the specific network component ther’re looking for.
- I used a slide-out modal to let users explore more details about a component without interrupting their workflow or taking them away from their current task.
Reports Schedule
The reports schedule sets the frequency reports will be ran.
- A button was placed in the top left corner as the first step in setting a new schedule.
- The table takes up most of the page to keep the focus on the user’s task.
Platform Monitor
The platform monitor monitors component APIs to verify their status.
- This feature has two main functions: checking the API status and viewing the system logs to identify any issues. I added a toggle in the upper left corner to help customers with their first step.
- The status of the API is large and in bright green or red identifying is significance.
- The reset button is placed on the far right it is the last function of the users process.
Configure Application
I designed the “Configure Application” screen as a full-page modal for viewing application logs. This allows engineers to check logs, troubleshoot issues, and return to their previous screen without disrupting their workflow.
Experience the OI Edge prototype
Check out the OI Edge prototype.
Click the module below to start the experience.
Phase 4
User testing
In the final phase of the project, project managers conducted user testing and recorded the results. If a request was valuable and within scope, changes were made. Then, it would be tested again, iterating until users were happy with the outcome.
User Insights
“I wish there were a feature to present data and software updates to customers in a way that helps them easily understand the state of their network.”
“I’d love a landing page or dashboard that instantly shows any potential issues from scheduled reports so I can address them immediately.”
“OI Edge needs to show customers the value Cisco has delivered.”
Reflection
Lessons Learned: This project highlighted the importance of turning user feedback and wireframes into a cohesive design. It reinforced the value of your project manager and incorporating detailed requirements and feedback into an intuitive interface that truly meets user needs.
Future Improvements: Future iterations could include additional customization options for reports and schedules, enhanced key performance indicators, and more user feedback mechanisms to refine the design further.
Other Projects
Xprecipe
Work for hire
Solid# Express Pay
Work for hire
ControlPad Website
Work for hire