UX Showcase - CodiLime
Codilime logo footer

Complex network systems with great user experience

Macbook mock splash

Complex network systems with great user experience

UX services showcase

Dashboard

Get clear insights into your application

Original design

Original design

Pain points

  • an outdated look with poor usability
  • poorly applied hierarchy of elements
  • displayed UI elements aren’t customizable
Wireframe

Wireframe

Solutions

  • intuitive navigation and the effective use of all screen space
  • customizable widgets and graphs
  • non-essential information is hidden
Final product

Final product

Achievements

  • the percentage of users using the view increased from 10 to 75%
  • a single view allows you to see complete network stats
  • aesthetically appealing UI

Data Tables

Organize your information-heavy view
and get more details on demand

Original design

Original design

Pain points

  • poor usage of screen space
  • lots of data displayed while not much information conveyed
  • truncated text and uneven rows make reading difficult
Wireframe

Wireframe

Solutions

  • optimal use of screen space
  • information architecture designed to improve readability
  • additional options and data available inside the same screen
Final product

Final product

Achievements

  • significant drop in user errors and time spent editing the data
  • sidebar with details allows for infinite expansion of additional data
  • aesthetically appealing UI

Network Manager

Manage your network more effectively
with the best UX practices

Original design

Original design

Pain points

  • poor use of screen space
  • user doesn’t receive relevant information
  • outdated UI design
Wireframe

Wireframe

Solutions

  • screen split in two vertical sections
  • more data displayed in one click
  • clear navigation with breadcrumbs to aid user
Final product

Final product

Achievements

  • simplified navigation means less time spent searching for information
  • a good insight into network status thanks to a single view
  • quick search function for solving corner cases

Wizard

Create a new provisioning cluster
seamlessly

Original design

Original design

Pain points

  • missing options and variables
  • non-optimal use of screen space and non-intuitive navigation
  • poorly designed information architecture
Wireframe

Wireframe

Solutions

  • vertical wizard steps for better use of screen space
  • clear and distinguishable steps with all options available
  • all necessary info displayed with clues for user
Final product

Final product

Achievements

  • less time spent on configuration
  • acceptance tests came in essentially error-free
  • visually refreshed screen more aesthetically pleasing for user

Alerts & Notifications

Get the right notification on time

Original design

Original design

Pain points

  • many levels of interface elements combined in one screen
  • difficult to find and read relevant information
  • design causes eye strain
Wireframe

Wireframe

Solutions

  • all notifications collected in one table
  • information architecture significantly enhanced
  • simplified view for better readability
Final product

Final product

Achievements

  • user spends less time setting up alarms
  • clear visual cues when an issue arises
  • lighter tones more friendly for eyes