Posts

Four tools for prototyping: Sketch, Figma, Principle, and FramerX

Image
Well, five. Because Sketch is not a prototyping tool. Prototyping solution will be Sketch + InVision. On the other hand InVision without Sketch doesn't hold much value, yet. It may be changed with the latest addition - InVision Studio. But let's stick for now with four tools: Sketch, Figma, Principle, and FramerX.

The goal of this research is to identify strengths and weaknesses of the tools, and their suitability for the UX team. The main use is to create wireframes and later convert them into interactive prototype.
I have chosen these tools because I used them before. The exception is FramerX, which is simply a brand new tool which I wanted to give a chance. No discrimination - there are bunch of other great tools on the market, they are just out of scope of this article.

Criteria:
Simple click through prototype. Compatibility with Sketch. Micro-interactions and animations. Ease of use. Collaboration – ability to share, to annotate on UI elements, and to work on the same fil…

Using Trello and Confluence to manage UX design project. Part 2

Image
This is part Two. Part One can be found here.

Term definitions.
Brainstorming board.
Activity board.

Let me give you an overview of the items we refer to, deal with, and vetting all days long.
Below are my simple definitions. UX Brief – a living document, a single and comprehensive point of reference of the design project.User Story – a short requirement or request from the end user. Later will be converted into task flow performed by this user to reach the goal. Acceptance Criteria – a set of conditions/statements, or a checklist, which defines the user story’s Pass/Fail.Feature – a functional part of the application, which combines several user stories. User stories are written to provide a complete support to this feature in terms of tasks performed by the user, while keeping in mind the user’s goal.Epic – a large logical group of multiple features in complex application.Brainstorm – a collaborative session involving product owners (PMs) and UX designers to create innovative solut…

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here.

Introduction.

Describe your design process”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps.
Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy: Empathize – Define –Ideate – Prototype – Test – Implement.  However the interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do:
Any project, which goes through UX Design team, or in other words, is handle…

Data visualization for Roadmap Microsite (Angular and D3.js)

Image
While working for Calypso Technology I was given a task to build a Product Roadmap and Inventory Microsite. This would be a web application which visualize the all Calypso' current products as well as a future roadmap.
Since Calypso was using AngularJS, I employed the the same technology to build a front-end. As a designer I focused on UI and how exactly I would visualize the complex structure of the product line catalog.
I created a prototype, which was ready to be picked up by engineering team and to adopt for production.
For data visualization I used open-source Sankey diagram library based on D3.js. I couldn't find the the library with exact features I needed. So, I forked an existing github project, to create my own library tailored to the needs of this project. I called it styled_sankey.
Below are some examples I created to demonstrate the visual abilities of my new library (from simple to more complex):
http://kardash.net/styled_sankey/examples/simple_test.html
http://k…

Interaction Design and Interactive Prototypes (Axure RP)

Image
This page is demonstrating what kind of interactive prototypes can be designed/developed in Axure RP.
To achieve the complex interactions, involving some basic math functions, and DOM updates, I injected javascript through the back door the Axure leaves for designers. The trick consists in ability of jquery-based javascript access any DOM element on the html page, and manipulate it.
However the detailed explanation how and why I developed these prototypes is outside of the scope of this article.  At least for now.

Below are my examples of interactive design, along with the instructions how to use some of their interactive features. These Interactive Prototypes are not part of my portfolio. Notice these are just some examples. I did much more while working in Calypso Technology.

Interactive Prototypes created with Axure RP prototyping software


Forex/Equity Options Flow Pricer

http://i2ulu8.axshare.com

1.    In the datagrid, in the "Enter new trade" only dropdown, choose several…

Defining a Persona

After some small research I realized it really depends on your own goals – what exactly you want to know about the user. Below are some of my thoughts how to define a persona, but they are rather “recommendations” than a solid template:
Defining a Persona
A persona represents a group of users who exhibit similar behavioral patterns in their use of technology or products, customer service preferences, lifestyle choices, and the like.
A persona details should list relevant to your business [or to your software] items.  One of the ways defining them is to conduct users interviews on the customer side (among potential end users), and starting from 30 interviews we can create a definition of our persona. Other thought how it can be done is through anonymous online surveys.
There are some details we may find about a persona, split on two main categories:
1. Personal Profile
1.     Age range (or broader: demographics) 2.     Location (or broader: cultural background) 3.     General likes/dislikes (…

10 Principles of Good Design (by Dieter Rams)

Image