Projects
Mobile application for bodybuilders and trainers.
LiftDay application is a workout journal and complete gym assistant, which helps to record physical exercises, analyze progress, and keep track of fitness and health.
LiftDay application is a workout journal and complete gym assistant, which helps to record physical exercises, analyze progress, and keep track of fitness and health.
initiation
Goal: to simplify the process of logging the physical activities, the access to the logs, and the analysis of the training progress.
Reasoning: there are no easy-to-use automated tool or app on the market. Pen and paper? I lost in this pile of barely readable sticky papers.
Reasoning: there are 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 market and user research. I interviewed bodybuilders and fitness enthusiasts. I had
coffee talks, meetings with bodybuilders and trainers, and conducted a survey.
The survey I ran is still alive today. I would encourage you to take it, but unfortunately SurveyMonkey bought FluidSurveys, and they closed the access. Below is a screenshot:
The survey I ran is still alive today. I would encourage you to take it, but unfortunately SurveyMonkey bought FluidSurveys, and they closed the access. Below is a screenshot:
|
Talking about UX Research, the user studies and
usability testing is a never-ending process, as well as development. It's an essential part of the design and development cycles, during our two-week Sprints.
UX Research
conducted for LiftDay project:
Non-testing forms:
Testing forms:
|
Let's brainstorm and do the sketches.
Branding, mobile app screens, core usecases (which became Epics in our Scrum process):
Branding, mobile app screens, core usecases (which became Epics in our Scrum process):
|
|
|
Let it be the logo for now. |
|
Thinking in larger scale I started to sketch and mockup the physical gadget for this.
|
|
and detailed specs:
|
|
|
And the Architecture of the whole system (yes, I can wear multiple hats):
Let's get back to the mobile app. There are bunch of core usecases, and dozens of UI screens (Balsamiq Mockups).
UI Design specs (Adobe Photoshop):
|
|
UI specs and interactions with developers, and
the development itself, which is way slower than expected. Probably it's
a long way to the production...
|
|
|
For example, just a registration/login itself (Omnigraffle diagram):
Here comes the internationalization:
|
|
|
Icons, icons...
|
|
|
|
|
|
|
|
Ok, if we can't do the dedicated gadget, can we use existing smartwatch? It's a good start, right?
And here comes the Android Wear. (These mockups are done in Omnigraffle - great tool, which lost the market to Sketch)
And here comes the Android Wear. (These mockups are done in Omnigraffle - great tool, which lost the market to Sketch)
|
|
|
|
|
|
Yes, I directed the promo video as well. I wrote the scenario script, hired models, and found the studio.
|
|
|
Here is the final app design. Screenshots enhanced in Photoshop:
|
|
|
Soon I discovered how short tempered users are, and how easy to leave a negative feedback, which ultimately makes my application disappear from all Google searches. Apps with low ratings never show up in the list of search results, even with the exact word match. This is how Google's algorithm works. Of course, I don't want our users leave negative reviews. That's why I implemented the diagram below, which adds more control, and encourages users to write a private feedback about the problems they face.
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... The list of exercises in the database is tiny. 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.
And don't forget to download the LIFTDAY app here:
The LiftDay REST API is here, the recommendation engine, access rules, basic set of exercises. but... The list of exercises in the database is tiny. 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.
And don't forget to download the LIFTDAY app here:
|
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 clearance
Reasoning: 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
Reasoning: 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:
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.
Indeed, 23andMe.com looks just fine, IMHO:
result
And finally, adopted Material Design.
Wizard screen of Regulatory Risk Services:
Wizard screen of Regulatory Risk Services:
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.
Read my blog post: SVG - XML based vector graphics to replace GIFs and PNGs
Some tweaks of the implemented UI are needed:
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.
Read my blog post - Design practice: How fast the transition animation for expandable panels should be.
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.
Good luck, Calypso!
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.
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:
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:
