Tap to start

Francis Vila Portfolio

What I can do for you

Mobile artist

Here's what I can do for you:

  • Discover and understand user's requirements, goals and pains
  • Design interfaces: wireframes, prototypes, interaction diagrams for mobile and desktop

  • Build app interfaces using Web techniques
  • Contribute new ways of thinking to the debate about the company and its products
  • Build Information architectures and suggest simple ways of representing complex realities

A word about this app

Why the "mobile app" look for a portflio?, What tools did you use, and why ? What user research is it based on?

Systar Community Web Site

This was Systar's community site for 2 years before the takeover by Axway.

  • Responsive design (changes layout to adapt between mobile and desktop)
  • Open to both Systar customers and internals
  • 7 different types of users, each with rights to different parts of the site
  • Based on Drupal

Gathering information

1) Conducting Brainstorming sessions

People think brainstorming knows no rules, but in fact its methodology is quite strict.

I conducted several brainstorming sessions with Systar stakeholders. I enjoy the contributing towards an atmosphere where everyone participates in inventing something new.

2) Interviewing techies to understand how things work

Understanding technology is made easier by the fact techies (like most people) are happy to talk about what they do and pleased that someone is taking an interest.

Web site: MyDaysInTheWorld

A project that was going to bring me fame and glory... Unfortunately Google came up with a similar idea (they call it Google Stories).

The point is to make it easy for anyone to create their own travel blog.

I did learn a lot about web techniques, and also by comparing my isolated efforts to the collective work of the great giant.

Branding and storytelling

Apart from telling the occasional parrot joke, I'm a great believer in the storytelling approach to getting messages across and establishing identity :

  • I created a cartoon character to illustrate the different features of an E-learning platform
  • I created a video animation to illustrate the theme of digital enablement (drawings/script/animation).
  • I proposed two metaphors to illustrate Axway's tagline "governing the flow of data"

User awareness

Before working on UX, design and Web dev I started out as a tech writer. Here are some of the human-oriented techniques that apply to all the above mentioned fields.

  • Understanding the user context: Designing interfaces, writing documentation, product management, training, all have in common that they require a deep feeling for the users, their needs, aspirations, and their work situation
  • Personas: example provided (Donald the Senior Business Line VP)

Icons & graphics

I've done a number of icon sets for Systar products and web sites.

My Web site

I do art, I love web technology, I'm fascinated by complexity, and how to make it simple. In my web site I try to reflect all those things

  • Technology: WordPress
  • Theme, graphics: all done by me

Learning and complexity

I'm fascinated by complexity, and I love digging into complex fields when they appear worthwhile. Here are examples of what I have done that supports this claim:

  • passed an adult education honors degree in IT (bac+4)
  • spent years learning Chinese
  • learned web development techniques
  • read long books by Proust, Tolstoy, Joyce...

Maybe because I value the richness of complexity, I hate useless complication and enjoy tracking it down to uncover the elegance of simplicity.

(Another reason I hate complication is that - don't repeat this - I am not so good at applying procedures and I forget how to do things. This gives me a low tolerance for tools that don't make things as simple as they could be, which means I am demanding when it comes to usability)

Digital art

In the subway, I'm fascinated by people using their smartphone, the positions of their hands... As they are absorbed by their screen, I can draw them without being noticed.

That interest has combined with that for mobile UI design, and a fascination for the transformations of society that the Internet and mobile are bringing. I then developed the concept into painting and sculpture.

Simplicity, and the rest

This image summarizes my way of thinking about representing information:

  • Simplicity: the ultimate goal that everyone wants
  • Complexity: the reality of the world, to be studied and respected
  • Complication: simple things masquerading as complexity. Concepts useless to the task at hand, added in to look important, or left there because they used to make sense. Rooting out complication to reveal the simplicity beneath is one of my joys in life
  • Confusion: when you think you understand but get it wrong; or when conflicting ideas get superposed in the mind

View contacts

Systar Community

Community.systar.com was Systar's official community site for 2 years before the takeover by Axway.

Content of the site:

Several different types of users had different rights to different parts of the site

My contribution:

Other contributors

View contacts

Gathering information

I like the open atmosphere of brainstroming sessions, where people think aloud, without being afraid of looking stupid or try to show off. I conducted several sessions with Systar stakeholders, and I enjoy contributing towards such an atmosphere, where everyone participates in inventing something new. I like the cathartic search to get to the bottom of problems that previously remained unspoken.

Below are a few principles I tried and tested.

Methodology for Brainstorming

People think brainstorming has no rules, but in fact its methodology is quite strict!

Phase 1, preparation

Phase 2, the round table (30-45mn)

The steps below are geared to avoiding the same people doing all the talking, and others staying out of the discussion.

Rule for the round table: All ideas accepted

Brainstorming works by ideas triggering other ideas. And the idea you are hearing - however harebrained it may seem - may be triggering a breakthrough in someone else's brain. Downplaying could cut that breakthrough short. So the following are never to be heard during the session: it can't work, it's been tried before, it's impossible, that's silly, etc.

Phase 3: synthesis (30-45mn, immediately after phase 2)

Phase 4: approval

View contacts

Site myDaysIntheWorld.com

Elevator speech: create the photo album of your vacation - or your life - on this site. Life is a journey, day after day, hence the title.

After that I started the app, Google launched its version to him: Google stories.

For me, it was both despairing and encouraging: on one hand it probably signed the death warrant of my hopes of fortune and glory through this site, on the other it validates the principle of the idea.

What's more, Google's rendition gave me lots of ideas to better present the site, pointed out to me my own limitations and opened new horizons. In particular, the Google site is much more dynamic.

Technology: WordPress + custom theme + jQuery + plugins

View contacts

Branding and Storytelling

3-minute animated video to popularize the concept of digital enablement.

See the animation (on YouTube): https://youtu.be/u8POYAmYMqY

Script, drawings, narration: done by me.

Drawn by hand, scanned, vectorized, then processed in Illustrator, finally added the hand-drawn animation effect using VideoScribe.

Script inspired by a video testimony by an Australian banker (for Axway: search for "ANZ Bank discusses the real-time opportunities with the Australian ‘New Payments Platform’ (NPP) initiative.""

The story opens with: "It was love at first sight on a Saturday afternoon", then moves on to the Marketing VP, IT manager and Security officer at the Bank.

Concept to illustrate values

In a workshop I proposed a concept to illustrate Axway's value (Team focus, Integrity, Passion for the Customer experience, Empowerment & Accountability, Expertise & Excellence ). It won first first prize for Most artistic production in the Human Resources competition !

Metaphors for flows

I suggested two metaphors to illustrate the concept of flows in Axway

  1. Metaphor #1:Data is to Axway as water is to….
    Water = Flows / Life = Water / Flows= Axway
  2. Metaphor #2:transporting goods and people.
    Doing IT without Data Flow Governance today would be like running a country or transport company with the transport infrastructure of the 19th century: horse-drawn carriages instead of motorways, steamboats instead of airports, etc

Cartoon character for an e-learning site

The character is called Syu for "Systar University". Hand-drawn, colors added with Fireworks

View contacts

User Awareness

Experience with users

My first experience of contact with users - and the gap between material designed by well-meaning training or documentation designers and the needs of the people they were designed for - was in my first job.

I was working as an interpreter for training courses for middle-eastern technicians and pilots of French military aircraft (in fact my role extended to that of accompanying and cushioning culture shock between vastly different populations). I saw a lot of theoretical explanations that only served to add confusion and perplexity to situations that were not lacking in thoses ingredients. That gave me a lasting distaste for any content that does not have relevance, or at least does not provide users with the means to determine its relevance to their own situation.

Since then I have had mainly indirect contacts with user populations via people in the support teams.

Personas

I was an early adopter of personas, and below is one written by me. Insists on the working environment, the situations in which the user interacts with tools and humans.

Donald the Senior Business Line VP

"I want simple answers to simple questions. Immediately."

Work environment:

Tools:

Portrait

Donald is a Senior Business Line VP.

He lives in a world of customers to be satisfied, staff to be managed and competing managers to outshine (to survive at this level in a large company, you have to hold your own in internal politics). He likes to show that he is in control; he spends quite a lot on suits and cars to show that he is successful.

He wants to show his customers that his company or department is delivering high-level service, that he is aware of past and present problems, and that he has done -or is doing -what is necessary to solve them.

He is not particularly tech-savvy. He has to manage people whose technical skills are much greater than his. He has to show these people he knows what he is talking about.

He demands immediate answers to simple questions. He has little time to get familiar with complex interfaces.

Work situations

On the phone with a customer: Donald wants rapid access to a summary of service quality delivered to that customer. SAF becomes a high-tech extension of a CRM application.

When a major crisis occurs (the whole network and the network is down…): He wants to be informed about it as it unfolds, just like he followed September 11 on a video news site.

In a meeting with technical staff: Donald wants printed reports showing performance of a given item of infrastructure or application. Staff will be suspicious; they will challenge the figures on the report; therefore evaluations or graphs must be backed up by text explaining how it was obtained.

On the plane back home after a successful meeting: After gazing out of the window for a while, he starts to think about the direction things are taking, how to prepare the future, whether efforts, time and money are well utilized, and if they could be allocated differently. He pulls out his laptop and reads the long-term reports downloaded by the secretary before he left.

View contacts

Icons and graphics

I designed graphics and icons for Systar's products, marketing campaigns, etc.

Icons for the Systar community web site

Icons for the BusinessBridge site:

View contacts

About this app

Q: Why the "mobile app" look for a portflio?

A: The medium is the message... Right now the mobile format in greatest demand is for mobiles apps; if it was for 1000-page documents I would have filled the portfolio with 38 chapters.

Q: What tools did you use, and why ?

A: The platform is jQuery mobile, because you can do almost anything in declarative ("no programming") mode, in a single html page - from the cover page to the detailed page, the whole app holds on a single page, which is very convenient for editing.

Q: Were you inspired by user research ?

A: There's a current in the user experience community that holds that in mobile, users start scrolling even before the page is fully loaded. Scrolling is the easiest thing to do, much easier than figuring out navigation links. That's why I put the whole of the content (in summarized form) in a single page, with links to more information in detail pages. The idea is to give just enough to whet user's appetite. More information: Scroll behavior across the web (by Josh Schwartz)

View contacts

Digital art

I'm fascinated by the civilisation changes we are seeing develop under our eyes. I translate that fascination into drawings, paintings and sculpture

View contacts

XXXXXXXXXXXXXXX

Page content goes here.

View contacts

XXXXXXXXXXXXXXX

Page content goes here.

View contacts

XXXXXXXXXXXXXXX

Page content goes here.

View contacts

XXXXXXXXXXXXXXX

Page content goes here.

View contacts

XXXXXXXXXXXXXXX

Page content goes here.

View contacts

Contact info

email fvila@axway.com
Web site http://fvila.fr
Mobile 07 50 84 97 44