Enterprise Center
A solution for a business to set up rules and permissions for their users, applications and devices. This is a security software that enables companies to safely do business regardless of the location of employees, contractors, partners... Whether users are in the office or working remotely, only those who are allowed to use the internal applications will be able to access them.
All Enterprise Center application screens are obtained from the Akamai EAA blog.
Type
Web Application
Year
2016 - 2023
User Roles
IT, administrators, super-tenants, 3rd party developers
Mockups
Mockups were created for development of a product, but also as a visual aid for discussions in the meetings about features, technology, or user flows. After the design approval from stakeholders, the mockups were tested with users.
New Features & UI Components
-
Custom dashboard was created which previously did not exist in the company design style guide.
-
Design of dashboard was created per break point.
-
Due to the very complex nature of specific dashboard widgets with multiple data sources, for initial development it was decided to create a static dashboard with few breakpoints. Agile methodology was used to organize development in stages. Future releases will create dashboard tiles with a fluid design.
-
Enterprise mockups reflected Akamai Core Design System - design and branding used by the whole company. Enterprise user interface design guidelines were updated to include new UI standards.
-
Updates also included:
-
Angular framework
-
Modern design and colors
-
Icons with 1.4 px outlines in Sketch, later in Figma.
-
Updated design components that allowed for easy, seamless, future updates of front-end UI design elements which can be easily propagated in the environment without development updates.
-
Design process for this project
Design Steps & Time Management
-
Developed 7 step design process: UXD Backlog, Research, Concept (wireframes), Final Design (high-fidelity mockups), Review w Writers, Specs for Development, Completed.
-
These steps were tracked through UXD Kanban Board.
-
UX design tickets were opened for designers, and linked to developer's epics, stories or Jira tickets.
-
UX designer time was allocated per 2-week sprint increments. Then high-fidelity mockups were reviewed with all stakeholders, including product managers, lead engineers, architects, etc.
-
For some features that needed immediate creation, designer's and reviewer's time was organized per week. After approvals designer spent time in build reviews, developer and testing support.
Information Architecture & UX Research
The process of creating the best information architecture for this application, it had three main steps. It contained of
creating multiple navigation types, many navigation versions, templates, and styles, and user testing:
STEP 1:
-
Original belief was that multiple enterprise products need to be connected in one place, separated from other non-enterprise products. This still stands today, but with some adjustments.
-
First Enterprise in-app navigation had intertwined pages from multiple products.
-
This was confusing for users.
STEP 2:
-
We conducted card sorting with OptimalSort. There was no clear delineation of the best path. Testers had different ideas.
-
Navigation was organized around 11 use cases. This was better, but users were still having hard time to find right reports or the product pages.
STEP 3:
-
Many navigation designs were created. They were discussed internally with other designers, engineers and product owners.
-
Many different ideas and approaches were evaluated.
-
UX interviews with moderator were scheduled with users. This gave the best insights. Users wanted to have one Enterprise website with content grouped per product.
-
After UX testing, navigation was simplified and replaced with dedicated 1st level of navigation categories for each product.
-
We did not hear any complaints about navigation since.
Icons
-
Designed app specific icons based on the company icon guidelines.
-
Icons were first created in Illustrator, later company introduced Sketch, and finally in Figma.
-
All icons were optimized for svg export and tested in IcoMoon.
Design Approach & Deliverables
-
Created template design: main application frames, panels, and positioning of visual elements.
-
Incorporated company brand standards and design system guidelines while creating new visual components needed for this product.
-
Creation of a complex color palette for graphs, including severity colors.
-
Creation of low-fidelity wireframes for proof of concept.
-
Creation of a variety of high-fidelity mockups for discussions and selection of best design.
-
Making edits until all requirements are met and designs are approved by all stakeholders.
UX Research with Usertesting.com & Maze
-
Research of new concepts with testers
-
Created new test campaigns with Maze
-
Added relevant visuals
-
Wrote introduction and detailed explanation / instructions for each step
-
Worked with business stakeholder and research department to get best candidates for testing
-
-
Reviewed and analyzed all UX feedback data
-
Selected relevant video clips and comments
-
Compared data and found anomalies and repeated issues
-
-
Reported UX findings and recommendations.
