initiation

Goal: to simplify the process of logging the physical activities.Reasoning: no easy-to-use automated tool or app on the market. Pen and paper? I lost in this pile of barely readable sticky papers.

Ultimate goal: to build a platform, which includes mobile and desktop access to user's profile, and a unique hardware device, which will assist in weight lifting exercises without touching the mobile phone.

process

Let's brainstorm and start with sketches. Actually, before the sketches, I want to be confident the world needs LiftDay. I started with initial usability research: user interviews, coffee talks, meeting with bodybuilders and trainers, surveys.The survey I ran is still alive today. And I encourage you to take it:

Talking about UX Research, the user studies and usability testing is a never-ending process, as well as development. It happened naturally during the design and development cycles, and our two weeks Sprints.

UX Research

conducted for LiftDay project:

Non-testing forms:

Survey

User interviews

Field research -> Contextual Inquiry with the observations how users perform tasks (exercise in the gym)

Testing forms:

Prototyping (before coding)

Usability testing (In gym environment where user is using the app build from the latest Sprint)

No,no, no - I don't want our users leave the negative reviews. Let's add a little bit of control of it.

result

The app is out and have some users. Not exactly what I wanted, but I need some time to pause and re-think it.The LiftDay REST API is here, the recommendation engine, access rules, basic set of exercises. but... iPhone is not covered. Webapp for browsers is not done. Community is not built. Our gadget, our super-duper tool of convenience, where are you?

Let me know if you are interested to participate, and pick up this project together.

Calypso Financial Cloud Services

Founded in 1997, Calypso Technology is a global financial software and services company delivering integrated cross-asset solutions for trading, risk, processing, and control. It offers a software platform for financial institutions such as banks, prime brokers, hedge funds, and insurers.

initiation

Goal: build scalable webapp solution for various needs of financial institutions, i.e. market and credit risks management, collateral and clearanceReasoning: while Calypso has robust desktop Java-based app with complex financial math and algorithms, they are behind the rest of the market players providing online access to their services with modern UI

design process

First version delivered in the end of 2016 was meant to be consistent in look and feel with existing web service of Forex trading.It served the purpose because imagine the typical UI the Java engineer can deliver:

I talked to product managers, gathering the requirements of the product, and with engineers, digging into the details of the technology, which we are going to apply for this webapp (appeared to be AngularJS):

I created a diagram for the structure of new web UI:

And visualized it into new design. It was a leap for the product as now we had UI very much similar to these mockups:

with the heatmap displaying the credit risk exposure, and more detailed and simple UI:

Not only the structure, the concept, and high-fidelity mockup. I gained the access to the repository and helped engineers with CSS, HTML, and even put my hands in the components of angular in TypeScript.

However the implementation lacked lots of functionality, and real application looked similar to this:

And then, starting from this page, Material Design trend began. Group of PMs and engineers inclined towards Material Design principles by Google. And I redesigned it again. This time I followed the Material guidelines.

result

Responsive design. Either fixed or floating navigation bar depending on the width of the screen.

Collateral web services. Screen with Paper Card:

The implementation of the Material Design screens will hopefully continue in Calypso by engineering forces. I've done my role here.

Calypso Navigator

Reasoning: Calypso application suite, written on Java for Windows desktops, had a main entry point application. It's a main menu with Swing-Java feel UI, called Main Entry. Cumbersome, ugly, customizable through pain, not really used by majority of Calypso users. As the first thing most people see of Calypso it is not a good impression. In demos you hear: “This is Calypso Main Entry, from here we have access to all the trade types and …” ergh!

Welcome the Calypso Navigator! Replacing Main Entry completely.

Brainstorming and sketches first:

New overall design of UI:

One of the orchestrated usecases:

bunch of new icons, of course:

Half-baked implementation along the process:

Three main layout variations. The user can switch to any of these at any time:

Possible color schemes for the users to choose from:

In the attempt of promoting the modern technology, I wanted to utilize SVG vector graphics, instead of raster PNG. For loading spinner, for example.

result

In spite we faced some obstacles along the implementation (like, the length of animated transition must not exceed 200ms) the Calypso Navigator launched successfully, and replaced the old and obsolete Main entry. It utilizes draggable tiles, nicer icons and colors. It's fully customizable by users. It comes with good valuable presets out-of-the-box, and even with Calypso applications windows management.

In conclusion I want to share a screenshot from Phase Two of the project, for the Windows 7 Aero. It includes the smooth animation during mouse interactions, e.g. mouseover, rearranging tiles with drag and drop; carefully thought through shades, gradients, and colors.

PacketShaper Sky UI

initiation

We had to solve HTTP 1.0 protocol limitations, the overdue and obsolete legacy PacketShaper's UI with the major usability issues. The technical limitations prevented the 11-year old html UI from being extendable and maintainable.

position

We will:

show improvements in various areas of the software to retain loyalty of existing install base.

utilize existing knowledge base of former Packeteer’s UI team which never came through to the next management level.

apply the latest technologies to GUI development.

enhance the traffic classification capabilities of the PacketShaper.

action

I took a leadership of this project, and not only designed but also developed the band new UI on Adobe Flex. I completely owned the visual design, layout, graphical assets, and UX, making sure it's simple and easy to use. We showed the prototypes to our client, and received a very positive acceptance.

A new Adobe Flex-based UI for the PacketShaper device line was a modern alternative to the legacy UI.

This project gathered together practically all Flex code written for the PacketShaper by UI engineering team: statistical graphing, new version of QoS (policy manager), and VoIP console. We made a special accent on VoIP traffic, and added a network traffic classification based on type of VoIP codec, which was a brand new feature.

I also programmed front-end, due to Flex framework offered a rapid development cycle, being a lead UI developer for this project.

process

Brainstorming sessions included the future UI concept sketched on the whiteboard.

Chose colors, which match the corporate styles and guidelines.

The company decided to name this UI a "Sky UI". It was a breakthrough, because this new UI not only improved usability, but also offered a robust functionality, which didn't exist in UI, and was accessible only through CLI commands in command line.

The screenshots:

result

It was a successful project. Product managers were happy, BlueCoat started deployment of Sky UI to the PacketShaper devices.The marketing team even made this video:

And if you are curious how PacketShaper device works overall, and how my UI is used on the real user scenario, then watch this video: