NE1 Network Emulator

  • Services: UI/UX Design, Front-end, API Integration
  • Tech used: React, Redux, Tailwind, HTML5, CSS3, Strapi
  • Project type: Commercial Application

I built a new product that merges the functionality of two legacy projects. My role was to re-design and re-build the old desktop UI to a new modern (web-based) UI from the ground up. To improve the user experience journey, I mocked up various prototypes in Figma.

Noticeable highlights:

  • UI completely de-cluttered, thus distraction-free
  • Relevant buttons grouped via a Dropdown or Sidebar
  • User Journey is more efficient (fewer clicks required)
  • Responsive UI - adapts to various screen sizes
  • Consistent component design across the entire application using my Pattern Library
  • Removed various bad UX practises such as complex nested modals

Before (Desktop Client):

After (Web Client):

Before (Desktop Client):

After (Web Client):

Dashboard - Quick summary of the emulations running, model information etc

itrinegy-dashboard

System Notifications - You can filter by type (critical, info, warning etc) as well as view less (last 24 hours, week, month)

alerts-filtering

This page has a table component with live data coming from the API (every 3 seconds), which is then formatted and displayed on the table. You can also launch the Graphing component by clicking on the chosen field. This page also contains filtering functionality to help reduce the number of columns on display.

object-stats

Here you can select as many Hardware ports, Links etc and which fields you'd like to monitor such as the "Bytes Sent"

graph-generator

Following on from above - You will see a live graph (auto-fetches from API every 3 seconds) with many different coloured lines representing the data, as well as an option to modify the selected fields (add or remove), hide the sidebar (to go full screen) etc

graph-generator-2

Mesh Designer, also known as the custom Network Designer

mesh-designer

I designed & developed all the Admin pages and integrated them via the Rest API

platform-settings

Scenario Builder

scenario-builder

As you can see, I am the biggest contributor to the project

github