Abyss
API Management
UX Design &
UI Development
2018
API Management
UI Development
Abyss is a full scale API Management Platform. The platform includes a portal, an analytics module and a gateway. It is a fully managed software that enables developers to create and publish APIs at any scale to secure APIs, virtualize, manage and monitor.
I was head of the UX design at this project. I saw the UI design as part of the UX design and produced materials accordingly. I also did not hesitate to do the identity design and the UI development.
I was head of the UX design at this project. I saw the UI design as part of the UX design and produced materials accordingly. I also did not hesitate to do the identity design and the UI development.
![](https://freight.cargo.site/t/original/i/536914b0d22383e8787a8cd75cb2ea54c1e68e1f6f4c0fb87a364b7bfb8ddea4/abyss_logo.png)
![](https://freight.cargo.site/t/original/i/f0891bd304c08e23a34e8a8b9ebe5a22a498cb88404397bccef7d3b4ce79020f/simplex_logo.png)
![](https://freight.cargo.site/t/original/i/c126f097362b89f76f8864d7f137ba8153740d22ff9470d674958dff8f081900/cogito_logo.png)
![](https://freight.cargo.site/t/original/i/1c275d4050f3596ea99f8344c6545abd845412823272ee1c4e8a00352eeb6567/lavitan_logo.png)
![](https://freight.cargo.site/t/original/i/dcee1673c07e61043f4c7cb7faa2f4c145707247d5f93619c0fa3e6adc7718e8/ux_design_process.png)
![](https://freight.cargo.site/t/original/i/925d805792e05da73d615035d50b0a93d9bbf76bdccee91b6c6f057d60f57a8e/benchmark2.png)
![](https://freight.cargo.site/t/original/i/8a010ed66393dea0fe933754c998969b053f62cf1756c23c29120d7daba0dd71/benchmark05.png)
![](https://freight.cargo.site/t/original/i/3211d80a70d903db1870cdd93461fe64fa9d48cb502c738c3f145396d32d44f0/benchmark06.png)
![](https://freight.cargo.site/t/original/i/827a24765071484a18b2167b3174e697ad67214b1675d3ff9d302ac5435b0d60/personas.png)
Some persona cards we created after the user research.
![](https://freight.cargo.site/t/original/i/9f4820062db2a19db7748a9d885659d416d9a329a7ea41926b38faaad9b6cdbc/scenario_map.png)
An example about scenario map
![](https://freight.cargo.site/t/original/i/1044612f5d70f6c268309c1dba99580fc7e22a0af38a82db46e149f7292684ef/sitemap.png)
Part of the sitemap
![](https://freight.cargo.site/t/original/i/103a74df106c58f40742bc0bb4261d8df19ae16049615e22d3359c3ade53bf00/t01.png)
![](https://freight.cargo.site/t/original/i/cbb65d3c19f54c079bd3189852277ce8d2605000c9b1f318e4be90c2e4e56faf/t02.png)
![](https://freight.cargo.site/t/original/i/7a19def4bf020973a85c89fc51e61459240e623f8246908a6553d7848884ec6b/t03.png)
.
![](https://freight.cargo.site/t/original/i/ac3ee07807c7e8efb4f028fd92d09a6a771babff96f97a029f48bc57ca4db903/login.png)
![](https://freight.cargo.site/t/original/i/47151865dc934b5fa5faf9b3407307610ba9073ee8c01baf526b039f3a2ffd94/dashboard.png)
This video shows the policy designer in Simplex. I designed it with Sketch and developed with Joint.js.