1. No category

EDGAR ANZALDUA
USER EXPERIENCE
 +61 423 628 325
DATA SCIENCE
 [email protected]
ANALYTICS
 blog.eam.mx
 eam.mx/twitter
DATA VISUALIZATION
 eam.mx/linkedin
 Disclaimer: This portfolio must be used for the purpose intended upon its request and be treated as confidential.
This portfolio must-not be re-distributed or published partially or in its entirety without express consent from the author,
offenders may be prosecuted by the offended parties. All content is Copyrighted and belongs to either Edgar Alejandro Anzaldúa Moreno (the author) or it is used with authorization of Schneider Electric, eMedici or the people that appear in it.
LONGSTORY SHORT
When I joined the company the software
looked dated, it was difficult to use, it
was cluttered with conflicting features
and lacked information architecture (IA)
and task-oriented workflows.
This particular screen would display several arbitrary pieces of information (some of
it was redundant) and it was broken into
14 different sub-panels.
We put together a cross-functional team
that would collaboratively design interactions, IA and user interface.
The team included people from Canada,
Australia and Europe. Workshops lasted
no more than 1.5 hours.
Design ideas were consolidated into a
single wireframe that later became a
clickable prototype, which was pre-approved for technical feasibility, as members of the technical team co-designed it.
Knowledge transfer was no longer required, everybody knew what was being
being designed and why. Many of the elements of the screen went straight to the
UI Pattern library, and some others helped
build the application road-map (back-log).
The result was a screen with reduced
complexity and a sense of task-oriented
flow, that talked to the user base without
user-guides or training, that was easier
to develop and with modular features
that could be re-used.
This modern-looking screen (considering
Java Swing limitations) shows only 3 different panels and kept the same amount
of information displayed, which reduced
significantly code-base, bugs and maintenance cost.
0:00 AM
0:00 AM
Last 6 Months
0:00 AM
Last 6 Months
Weight
Last 6 Months
BMI: 31.28
Fat %
110.2 Kg
29.8%
Obese Class I
(Moderately Obese)
CHANGE: 5.28 MIN:
30.12
MAX:
35.4
CHANGE: 16.9 Kg MIN:
106.8 Kg
MAX:
123.7 Kg
iPad
CHANGE: 8.2% MIN:
28.1%
MAX:
36.3%
9:45 AM
100%
Last 6 Months
Weight
BMI: 31.28
Fat %
110.2 Kg
29.8%
Obese Class I
(Moderately Obese)
CHANGE: 16.9 Kg MIN:
106.8 Kg
MAX:
123.7 Kg
123.7 Kg
11/11/2013
CHANGE: 5.28 MIN:
30.12
MAX:
35.4
CHANGE: 8.2% MIN:
28.1%
MAX:
36.3%
110.2 Kg
18/02/2014
102.3 Kg
4/06/2014
Gordolytics
http://eam.mx/portfolio
GORDOLYTICS
Edgar Anzaldua 12-Feb
13-Feb
Responsive Design
Weight
14-Feb
15-Feb
16-Feb
Yesterday
BMI: 31.28
110.2 Kg
Today
Tomorrow
Fat %
29.8%
Obese Class I
(Moderately Obese)
MIN: 106.8 Kg MAX: 123.7 Kg
123.7 Kg
11/11/2013
MIN: 30.12 MAX: 35.4
110.2 Kg
18/02/2014
MIN: 28.1% MAX: 36.3%
102.3 Kg
4/06/2014
MacBook Pro
Personal Project: What started
as a personal weight monitoring system spreadsheet
in excel, derived into a fully
fledged statistical and prediction model. Later on I added
with the help of my friends
multi-user support and developed a working prototype in
Python, Javascript, CSS, HTML
and D3.
PORTFOLIO 
Process Design
Companies get to where they are by following a process, whether they’re
conscious of it or not. Successful companies are conscious of it and look for
opportunities to improve it.
I’ve had the opportunity to help define UX loops that enhance communication to
make sure the right thing is delivered. The process below is an early version of
the User Experience workflow that we followed at Schneider-Electric.
User Experience Design Process
Personas
Vision, Framing and Outcomes
Outcomes
Features
Hypothesis Statements
Prototyping
ssemble
Hypothesis
Statements
no
Start
Feedback & Research
Create Update
Prototype
Feedback
UX Design Team
yes
Outcomes
Personas
no
es
Features
Feature o Fidelity
ire rame
Hypothesis
Statements
Update
Styleguide
HC
Veri y Standard
End
o
Re ie
Related
Feedback
Outcomes
Personas
Clickable Prototype
Plan Tests
Plan Tests
es
Declare Problem
Statements
Outcome
rainstorming
Session
Persona
rainstorming
Session
o
Feature
rainstorming
Session
Design Studio
Session
Sketch
One on One
One on One
es
Update
Feature
acklog
Outcome
Feature Sketches
yes
usiness
orks heet
Personas
High Risk
es
Outcomes
Features
Familiar
Client
o
Version 0.1 of a proposed UX process that would allow for collaborative design.
Workshops (Collaborative Design)
While I still produce design-work, my role has taken on the additional role of
facilitator to lead teams through a series of exercises. The output of these
sessions typically consists of low-fidelity sketches and wireframes.
In Schneider-Electric, I’ve facilitated numerous collaborative problem discovery,
risk assessment, design (called also design studios or charades), prioritization
and development cycle planning (RPE) workshops with great success. They
proved to bring people together, to make work more enjoyable and most importantly, they make sure the right thing gets built and that potential risks are
discussed well before implementation.
Moments from different design thinking workshops that I led at Schneider Electric.
Complies
Complies
es
One on One
Complies
Personas
Feature Prioritization
Models of the people for whom we believe we are solving the problem.
Features are defined as the product changes or improvements that we believe will drive the outcomes we
seek. Scope, Time and Budget affect the features included in the software are constantly competing forces while
developing software, with quality often being compromised due to time or budget pressures.
I’ve had the chance to create personas based on the
target market of the application, and also a quicker version
through empathetic and user-oriented thinking (which
helps when resources are limited.
Persona Definition Template
3.
Personal Details
3.1 Role Name:
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
2.
Context
2.2 Environment
“
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
“
2013 Schneider Electric Pty. Ltd.
Knowledge
4.1 Domain
Poor L
imited S
tandard
1.
____________________________________
2.
____________________________________
Good
Great
tandard
Good
3.
____________________________________
3.3 Goals:
1.
____________________________________
Great
0- 20
2.
____________________________________
3.
____________________________________
20+
4.2 Technical (Software)
Poor L
imited S
4.3 Years of Experience
1–23
5.
–55
- 10 1
Relationship with our Software
3.4 Motivations
__________________________________________
__________________________________________
__________________________________________
__________________________________________
5.1 Why use the software?
__________________________________________
__________________________________________
__________________________________________
__________________________________________
6
3.5 Risks
2.3 Form Factor:
Copyright
v1.0 Last Updated: 19/03/03
4.
3.2 Activities:
1.2 Back Story:
Quote:
Role Description
1.1 Name:
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
__________________________________________
5.1P rimary use of the Software
__________________________________________
__________________________________________
__________________________________________
__________________________________________
3.6 Frustrations or Pain Points
__________________________________________
__________________________________________
__________________________________________
__________________________________________
3.7 A Great Day
__________________________________________
__________________________________________
__________________________________________
__________________________________________
Commercial-in-Confidence
5.1 Frequency of use
Constantly
Open
6.
Twice a
Day
Once a
Day
Every other
Day
5
Once a
Week
BEWARE!
Anything Else?
__________________________________________
__________________________________________
__________________________________________
__________________________________________
4
Page 1 of 1
1
Persona Template and Sketch (2013)
2
Familiarity
3
4
Sketching
2
Paper/Whiteboard sketching will makes it easier for
people to criticize solution are they are the cheap and
fast to make.
1
I’ve been doing it for a long time. I tend to take photos
from the whiteboard or scan paper sketches to keep notes
on design decisions.
5
6
3
Technical Risk
1.
By making teams collaboratively prioritize features,
scope, time and budget should not compromise quality.
In Schneider Electric, we use feature prioritization maps
(kano/bang vs. buck) and risk assessments manage their
expectations, making better and long-term relationships
with them.
Handdrawn/Balsamiq - Left: Progress Bar UI Pattern (Backlog) /
Right:(2014) Risk Assessment Example.
Wireframes
Digital version of the sketches. Low-fidelity wireframes
are rough, sizes, proportions and colors are approximate. High-fidelity wireframes can be used as guidelines
for developers to build the software.
I have experience designing both types of wireframes at
different stages of my engagement with the SDLC. I’m
tool agnostic, but I really like Balsamiq, Photoshop and
Illustrator while designing.
Hand Drawn Sketch - Design Studio Workshop - 2013 (above)
Photoshop Wireframe - Advanced Planning and Scheduling, 2012 (above)
Balsamiq Wireframe - Supply and Demand Optimization, 2014 (left)
Illustrator Wireframe - General Purpose Dialog UI Pattern (Sizing), 2014
Dialog Title
Content
Dialog Title
Content
Dialog Title
6px
Content
6px
Horizontal Ruler: 2px 6px
6px
6px
6px
6px
6px
The Progress Bar Dialog UI Pattern, is
build on to the General Purpose Dialog UI
Pattern.
355px
6px
30px
Supply and Demand Optimization
6px
6px
Operation Title:
20%
14px
Task:
Subtask:
1/n
1/m
Cancel
Supply and Demand Optimization
Operation Title:
Task:
Subtask:
20%
1/n
1/m
Cancel
Supply and Demand Optimization
Operation Title:
Task:
Subtask:
20%
1/n
1/m
Cancel
Supply and Demand Optimization
Operation Title:
Task:
Subtask:
20%
1/n
1/m
Cancel
Illustrator Wireframe - Progress Bar Dialog UI Pattern (Sizing), 2014
Paper Prototype
Technical Storyboarding
A low cost alternative for Formative Testing that allows
UX researchers to get ready for Summative Testing
consisting of easily movable and replaceable interface
elements created from pieces of paper.
Not as high-level as the traditional one, Technical Storyboarding allows step by step Human-Computer Interaction analysis.
This quick approximation, has helped me identifying and
fixing potential interaction flaws, as they are fast to amend
and people in the team are more open to criticize this
work rather than the finished realistic design comp.
Paper Prototype for a Window Based Application, 2015
This has proven to be a great tool to document interactions between the user and the system and communicate
to developers. I’ve found this very useful as an input for
writing technical specifications.
Balsamiq - Technical Storyboard, 2014
Clickable Prototype
A deliverable that will help communicating all the design work that has been
done so far without boring people with pages and pages of explanation.
In my experience at Schneider-Electric and as a consultant, I’ve found that
making clickable prototypes would set the right expectation on the customer’s
mind on what is to be delivered, and provides a final feedback look back to the
customer for further refinement.
Adobe Acrobat, Clickable PDF Prototype, 2014
FACILITATION TOOLS 
Prioritizing Context
Understanding the context in which a software application is used is critical
for its success and adoption.
I designed the following card deck to help the leadership team at Hostworks understand and set the target context priority of the application that we are developing. Accompanying documentation helped further understand each context.
IN MOTION
HOME
ACE
WORKPL
/////
HOME
HOME
IN MOTION
AT WORK
AT HOME
AT HOME
AT WORK
HOME
COMPUTER
ER
/


COMPUTER + TV
COMPUT
COMPUTER

/////
+
TABLET

TABLET + TV
/



TABLET

/

+

TABLET
SMARTPHONE + TV
IN MOTION

SMARTPHONE
SMARTPHONE
SMARTPHONE
/////
+




Illustrator, Premium Gaming Plastic, 2015 - Among other benefits that following this technique gave
us, was that there wasn’t a clear understanding of the vision of the software. This quick, cheap and
humbling approach allows teams to be more introspective about being working towards similar goals.
Storyboards
A higher-level storyboard allows organizations to find design gaps or come
up with ideal scenarios in which the application being developed has reached
maturity.
Vectorizing these assets and keeping a digital copy allows me to reuse assets
Storyboard T itle: Cre
ate a Series, Season
quicker and to enhance sketches with effects.
e and Episode Struct
Project:
ure
Platform
Author: EdgarA@Host
Works.com.au
Date: 14/5/2015
From Scratch
Remind me L ater
(4.1.1) Start the Series Man
agement Feature and
Create a Series (4.1.2) and
fill in the detail.
(4.1.3) Create a Season and
V app
ityTdeta
in the
il.
Notaku opens the Comfillmun
in his
phone.
(4.1.6 and 4.1.7) Make sure
the "add new episode when
finished"
checkbox is ticked and repe
at, and untick when the last
episode
has been added to the seas
on.
(4.1.8) Add Another Season
if Required by going "up the
tree"
two levels.
t there’s a banner
Once open, he notices tha
highlights.
show
that indicates upcoming
(4.1.4 and 4.1.5) Create an
Episode and Fill in the Det
ail.
(4.1.8) Repeat from 4.1.3
until no more seaso
ing World Cup
He taps excited on the Fish
s two weeks
it’
t
tha
ices
banner and not
ahead.
has been completed the
EXPERTISE MAPPING 
 Timeline
 Programming & Markup Lang.
2011
2010
2009
2008
2007
2006
2005
2004
2003
2001
 Frameworks
D3
JQuery
DJango
Rails
Highcharts
Bootstrap
Ratchet
 Workplaces and Education
2000
1999
1998
PROMOTIONS
SENIOR / LEADER
2002
ENTRY LEVEL
XHTML
CSS
Java SE
Javascript
Python
Ruby
PHP
JSON & XML
2012
PROFESSIONAL EXPERIENCE Photoshop
Illustrator
Indesign
Fireworks
Dreamweaver
Google Analytics
Google Adwords
Balsamiq Mockups
Omnigraffle
Netbeans
Eclipse
2013
MASTER OF SCIENCE
 Tools
2014 - PRESENT
EDUCATION Design Thinking
Heuristic Evaluation
Workshop Leading
User Research
Personas
Sketching
Collaborative Design
Wireframing
Storyboarding
Prototyping
User Testing
Information Architecture
Big Data & Analytics
Design Strategy
User Interface Design
Visual Design
BACHELOR OF SCIENCE
 Design
MORE 
Logo Design 
FC OI VN SE U DL TO I GN SG
Five Dogs Consulting, 2010
Nortel’s Green Team, 2008
Latin American Airport Holding, 2006
Book Design 
Broadband Telecommunications Technologies and
Management Book, 2014
CMU Yearbook, 2010
Photography 
Left: Angel de la Independencia (2007) / Top: Chiapas, Mexican Jungle (2009) / Right: Dorste Self-Portrait (2008);
Center-Down-Left: Me @ Flickr Exhibition (2007) / Center-Down-Right: Me @ Public Exhibition (2009)
Publications 
MUST
READ
Left: Book El Mexico de los Mexicanos (Mexican’s Mexico) / Center: Muestra tu México en Flickr (Show Your Mexico in Flickr) Yahoo’s Commemorative Book / Right: Data Mining / Information Visualization Research Paper
 3D Modelling
Selft Portrait, Cinema 4D (2013)
Mexican-Australian, Cinema 4D(2014)
 3D Video
3D Presentation for Mexican Government, Cinema
4D, Photoshop, Illustrator and Final Cut (2007)
 http://youtu.be/80WhhbBcoF4
Friend’s Proposal Video, Cinema 4D, Photoshop,
Illustrator and Final Cut (2007)
 http://youtu.be/OoA8arpncTQ
MUST
WATCH
 Video Production
Intro Scene for Five Dogs Media, Soundtrack, Photoshop, Illustrator and Final Cut (2011)
 http://youtu.be/juLKdQ5ttHA
The Making of the Greatest Software Ever, Final Cut
(2011)
 http://youtu.be/ZL39xb3z4tY
 Just Fun!